WordPress の記事上にソースコードを掲載したときに、ハイライト表示してくれるプラグイン Crayon Syntax Highlighter を導入してみた。似たようなプラグインに SyntaxHighlighter Evolved というのもある。
インストール
プラグインの新規追加をクリックする。
![プラグインの管理画面](https://pc.tokuvin.net/wp-content/uploads/2015/11/11.jpg)
Crayon で検索するとトップにヒットするので、今すぐインストールをクリックする。
![プラグインの追加画面](https://pc.tokuvin.net/wp-content/uploads/2015/11/21-680x396.jpg)
しばらくしてインストールが完了するので、プラグインを有効化をクリックする。
![プラグインのインストール完了画面](https://pc.tokuvin.net/wp-content/uploads/2015/11/31-680x235.jpg)
プラグインの一覧で有効になっている事を確認する。
![プラグインの管理画面](https://pc.tokuvin.net/wp-content/uploads/2015/11/41-680x327.jpg)
各種設定は「設定>Crayon」から行う。
![Crayon Syntax Highlighter の設定画面](https://pc.tokuvin.net/wp-content/uploads/2015/11/51-680x460.jpg)
使ってみる
記事の編集画面でビジュアルモードの時は上画像、テキストモードの時は下画像のボタンをクリックする。
![ビジュアルエディタのメニュー](https://pc.tokuvin.net/wp-content/uploads/2015/11/19-680x77.jpg)
![テキストモードのメニュー](https://pc.tokuvin.net/wp-content/uploads/2015/11/23-680x77.jpg)
コードの追加画面が表示されるので、ソースコードを入力し、必要に応じて各種設定を行い右上の挿入ボタンをクリックする。これでハイライト表示のソースコードが記事に挿入される。
![ソースコードの追加画面](https://pc.tokuvin.net/wp-content/uploads/2015/11/33-680x550.jpg)
挿入したソースコードはこのような感じで表示される。
![シンタックスハイライトが適用されたソースコード](https://pc.tokuvin.net/wp-content/uploads/2015/11/source-code-highlight-680x62.png)
また単純に pre タグで囲ったコードや、設定でミニタグをキャプチャするにチェックしておけば [php][/php] で囲ったコードもハイライト表示されるようにできる。
ハイライト表示したくない場合
pre タグを問答無用でハイライト表示してしまうので、既存のソースコードでない物など具合が悪い。
設定に「Crayons として<pre>タグをキャプチャ」というのがあり外してみたが、こうすると Crayon ボタンで挿入されるコードにも<pre>タグが使われているので、そちらも無効になってしまった。
調べると pre タグのクラスに crayon:false を追加すれば無視してくれるようである。
int main() { printf("Hello World!"); return 0; }
<pre class=”crayon:false”></pre>で囲った場合はこのように Crayon は無視する。
コメント