ChocoMemo

学んだことをメモがわりにアップしていきます!

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


Crayon Syntax Highlighterプラグイン

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

Crayon Syntax Highlighterのインストールと有効化

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

WordPress基本操作 2 - プラグイン、カテゴリーとタグの設定 - chocomemo

Crayon Syntax Highlighterの設定

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

wordpress-CrayonSyntaxHighlighter設定画面
CrayonSyntaxHighlighter設定画面

Crayon Syntax Highlighterの使い方

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

wordpress-投稿エディタのcrayonボタン
投稿エディタのcrayonボタン

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

wordpress-crayonエディタ
crayonエディタ

プログラミング言語設定

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

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

行番号表示

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

wordpress-crayon行番号表示
crayon行番号表示

ハイライト表示

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

wordpress-crayonハイライト行選択
crayonハイライト行選択

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

<?php

$hello="Hello";

echo $hello;

?>