【WordPress】プラグイン Crayon Syntax Highlighterでソース コードを綺麗に整えて表示

    icon-clock-o読了時間:約11分37秒

WordPressでソースコードを記述して紹介したい時に困るのがコードの表示方法です。

 function hello_dolly_get_lyric() {・・・・

なんてそのまま書いたら他の文章との区切りが分からず、かなり見づらくなってしまいます。
そんな時に役立つのが『 Crayon Syntax Highlighter(クレヨン・シンタックス・ハイライター) 』。
クレヨンのロゴ
このプラグインを入れておくと、記事編集画面で簡単な操作を行うだけで
こんな感じ ↓ の綺麗なレイアウトに整えてWordPress上に表示してくれます。

今回の記事では『 Crayon Syntax Highlighter 』の設定方法などをご紹介します。

 ※同じようにソースコードの体裁を整えてくれるプラグインとして
  『 SyntaxHighlighter Evolved 』も人気があります。
  試しに片方ずつ入れてみるも良し、どちらを使うかはお好みで。
  私は他のプラグインとの兼ね合いで『 SyntaxHighlighter Evolved 』が動作しないので
  『 Crayon Syntax Highlighter 』を使っています。

Crayon Syntax Highlighterをインストール

プラグインをダウンロード

Crayon Syntax Highlighterプラグインページからダウンロードしていただくか、
ご自分のプラグインのページから『 Crayon Syntax Highlighter 』と検索してダウンロードしてください。

  ちなみにCrayon Syntax Highlighterというのが長くて書きづらいので
  以下、文章中はクレヨンと呼びます U・x・U 

Crayon Syntax Highlighterを有効化する

ダウンロードしたクレヨンの『 有効化 』をクリックすれば使用可能になります。
クレヨンの有効化
初期設定のままでも充分に使用することができますが
せっかくなのでご自分のお好みで細かい設定を変更してみてください。

管理画面のメニュー【 設定 】⇒【 Crayon 】を選択する、もしくは
プラグインページの【 設定 】から設定を開くことができます。
クレヨンの設定を開く
設定内容についてはこちら⇒Crayon Syntax Highlighterの詳細設定

Crayon Syntax Highlighterの使い方

プラグインを有効化すると、投稿記事の編集画面にクレヨンのボタンが現れます。
記述したソースコードを選択した状態でクレヨンのボタンを押してください。
クレヨンの適用01

プログラム言語の欄でソースコードの言語の種類を選択し、
右上の挿入をクリックすればOKです。
クレヨンの適用02

クレヨンの表示設定は、大元の設定で決めたものがデフォルトとして適用されますが
この編集画面の下部にある設定でテーマなどを選べば、この時限りの個別の設定が可能です。

個別のテーマを設定すると、下図のように各ソースコードに別々のテーマを反映させることもできます。
各テーマを設定

クレヨンの適用後にはソースコードにクレヨンの設定が追加されています。
もう一度クレヨンの設定をやり直したい時はこの部分を削除して
再度クレヨンのボタンから挿入し直すか、この記述自体を書き換えてください。
クレヨンの適用03

その他の使い方
ハイライトで強調

行にマーク設定をするとハイライトをつけて目立たせることができます。
ハイライト編集

『 3 』と入力すれば3行目に、
『 3-5 』と入力すれば3~5行目に渡ってハイライトされます。

例えば2行目と4行目にハイライトをつけたい場合には
『 2 』 『 ,(カンマ) 』 『 4 』とカンマで区切って行番号を入力します。
ハイライト指定

指定の結果、2行目と4行目にだけハイライトがつけられます。
ハイライト表示

また、一度編集し終わったコードに対してハイライトを付け加えたい時や削除したい時には
コードの頭についているクレヨンの記述から 『 mark:2,4 』の部分を修正・追記してください。

Crayon Syntax Highlighterの詳細設定

クレヨンで表示させる文字の大きさ、枠の色や幅の外観の設定や
行の折り返しについてなど、様々な設定を行うことができます。
下記に主な設定についてご説明します。

表示の際の負荷が減り、表示速度が少しでも早くなるかもしれませんので
不要な設定がある場合にはその機能を外しておくことをオススメします。
一度設定してしまえば後はそんなに苦労することはありませんので、
宜しければ最初だけは各項目をじっくり見て設定してみてくださいね ヾ(=・ω・=)

色や幅など外観の設定

クレヨン設定01
変更するごとにサンプルコードの欄が変わるので確認しながらお好みのデザインを探してください。

テーマを決める

全体のデザインを【 テーマ 】の選択で決めます。

文字の型や大きさを変更

【 フォント 】から文字フォントやサイズを変更できます。
Line Heightは行間、つまり一行の高さです。
文字の上下が詰んでいて見づらいと感じる場合はこのサイズを大きくしてください。

表示枠の大きさを決める

【 サイズ 】から記述欄全体の枠について変更できます。
高さ
 高さを設定し、左のチェックボックス(□)にチェック(レ点)を入れると
 その高さを超えて記述が続く場合はスクロールバーで続きを読む形式になります。
 逆にチェックを外しておくと、高さの制限なく全ての記述が表示されます。

横幅
 枠の幅は最大でもブログ記事の幅になるのですが、いっぱいいっぱいにするとサイドバーと
 近すぎて見づらくなるかもしれないので適度に調節してみてください。

余白
 記述欄の外、上下左右の余白を設定することができます。

回り込み
 枠の前後にある文章や画像との配置関係についての設定です。
 【 回り込み無しの場合 】
    文字文字文字
   [ソースコード]
    文字文字文字

 【 回り込み有りの場合 】
    文字[ソースコード]文字文字
    文字文字文字文字文字文字文字

ツールバーや行の設定

クレヨン設定02

ツールバーの表示

表示されるソースコードの右上に、閲覧者用のツールバーを表示させるかどうか。
ツールバーには
・行番号の表示/非表示の切り替え
・ハイライト表示(色分け表示)のON/OFF
・全てのコードを選択コピー
 など、便利な機能が付いています。

デフォルトでは『 マウスオーバー時(マウスカーソルを合わせた時) 』に
ツールバーが表示されるようになっていますが
記述欄にマウスを合わせるたびにピョコピョコとツールバーが出てくると
コードが上下に動いて見づらくなってしまうことがあるので
『 常に表示 』か『 表示しない 』にしておくと良いかもしれません

謎の行指定

Enable line ranges for showing only parts of code
コードの一部だけを表示するために行指定できる・・・? U・x・U ?

なんのこっちゃ、と思って試行錯誤している内に気づきました。
編集画面のココ ↓
行指定
これか!!(`ФωФ’)

ここに行番号を入れると、どんなに長く数十行に渡るソースを書いていても、
指定した番号の行のみが記事上には表示される機能のようです。
『 3 』と入力すれば表示されるのは3行目だけ。
『 3-5 』と入力すれば3~5行目だけが表示されます。

必要かな・・・?と悩んだ末に私はとりあえず外してみました。
チェックを外して機能を無効にすると、たとえ行指定をしていてもコード全文が表示されるようになります。

行の折り返し

Wrap lines by default
長いコードを記述する時、ずーっと右まで一行で表示させる機能。
いちいちスクロールバーを動かして右の端まで見に行くのは不便ですし、
このチェックを外して、折り返して表示させるようにしておきましょう。
もちろん折り返した部分には行番号が振られず、ちゃんと一行の記述として表示されます。

Enable line wrap toggling
閲覧者が行の折り返しを自分で行える機能をツールバーに追加します。
さっき行の折り返しを設定していれば、特にこの機能は必要ないのでチェックを外しておきましょう。

スクロールバーの表示

上のツールバーの表示についてご説明したとおり、記述にマウスを合わせる度に
上下にピョコピョコ動かれると見づらいので、この項目にチェックを入れて
『 常にスクロールバーを表示する 』ようにしておくといいかもしれません。

タグについての設定

クレヨン設定03

タグエディタ

Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress)
よく分からない部分に限って日本語訳されていないのは一体なぜ・・・と思いつつ、また適当に訳してみます。

“ フロントエンド(Webブラウザ)上の
  任意のTinyMCE(ここではWordPressのテキストエディタのことだと思ってください)の
  インスタンス(実体)でタグエディタを表示(例えばbbPressみたいな) ”

つまり、コメント欄などのブログ上のテキストエディタを
投稿記事の編集画面のような感じにするもののようです。
コメントを書いてくださる方もいちいち太字にしたり、リスト表示を使ったりすることは少ないと思うので
この機能は外してしまって構わないと思います。

Display Tag Editor settings on the frontend
これも訳すと “ フロントエンドでのタグエディタ設定を表示 ” 。
先ほどのコメント欄のエディタ化とセットみたいですね。
私はこれもチェックを外しています。

設定が終わったら保存

設定を変更したら忘れずに左下の変更を保存で更新しましょう。
クレヨン設定04

過去に投稿したソースコードを探す

タグ検索
設定画面の Show Crayon Posts のボタンを押すと、
過去に投稿した記事の中から、preタグが使われている記事、つまり
クレヨンを使ってソースコードを記述してある記事を検索することができます。

ちなみにpreタグとは、クレヨンによってコードの前後に追記されるこの部分 ↓ のことです。
preタグ
過去に掲載したコードを修正・追記したい時に便利ですね。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket