WordPressプラグインのCrayon Syntax Highlighterでソースコード、行番号やハイライトを表示する方法

htmlやphpなどのソースコードや特殊文字が簡単な設定できれいに表示することができる。また、行番号の自動付与やソースコードのハイライトを表示することができる。

プラグイン新規追加から「Crayon Syntax Highlighter」を検索してインストールと有効化をする。詳しいプラグイン導入方法以下を参照。

メニューから「設定」→「Crayon」を選択するとCrayon Syntax Highlighterの設定画面が表示される。ここで、設定をするが基本的には初期設定のままで問題ない。

CrayonSyntaxHighlighter設定画面

投稿エディタにある「crayon」をクリックする。

投稿エディタのcrayonボタン

「コード」書かれた部分にソースコードを入力して「挿入」をクリックすれば完了。

crayonエディタ

「プログラミング言語」から表示するプログラミング言語を選択する。

crayonプログラミング言語選択

下にスクロールすると「行」の設定があるので以下を設定する。デフォルトで行番号を表示にチェックを入れる。行番号の開始数字に開始位置の数字を入力する。

crayon行番号表示

ハイライト表示する行の数字を「,」区切り数字を入力する。連続行をハイライトしたい場合は、「-」で「3-5」のように入力する。

crayonハイライト行選択

上記画像の設定されているphp言語、行番10から表示、3と5行目をハイライト表示を設定していた場合、以下のように表示される。
※ wordpressからはてなブログ移行したからちゃんと表示されないーーー。

<?php

$hello="Hello";

echo $hello;

?>

ChocoMemo