記事内に広告が含まれています。

SyntaxHighlighter Evolvedの導入方法と使い方

Nov 6, 2014

ブログでコーディングネタなどを書いている時に、色分けなどをしてソースコードをわかりやすく綺麗に表示したいと思い、WordPressのプラグインであるSyntaxHighlighter Evolvedを導入しました。
導入方法について、忘れないうちにまとめようと思いましたので記事にします。

1, 導入手順

WordPress のプラグイン管理画面から「SyntaxHighlighter Evolved」を検索します。

これでSyntaxHighlighter Evolvedがインストールされ、WordPressで使用できるようになりました。次は設定です。

SyntaxHighlighter Evolvedの設定画面を開きます。

「すべてのブラシを読み込む」は、HTMLタグで「pre」を使用する場合にチェックをいれてオンにするようですが、全ての言語ファイルがロードされ重くなってしまいますので通常はオフのままにします。

「変更を保存」をクリックして設定を保存すると、画面の下の方にプレビューが表示されますので、テーマをいろいろ変更して試してみるといいかもしれません。

使い方はとても簡単で、コードの種類に合わせてSyntaxHighlighterのショートコード[言語名]…[/言語名]で囲むだけです。

例えば、phpなら [php]code[/php]
cssなら [css]code[/css] といった感じです。

jQueryのコードをSyntaxHighlighter Evolvedに変換させる場合は、下記のようにjsのショートコードでコードを囲みます。

[js] $(“div#sample1 input.btn”).click(function(){ $(“div#sample1 p”).css( “color”, “red” ); }); [/js]

$("div#sample1 input.btn").click(function(){
$("div#sample1 p").css( "color", "red" );
});

対応している言語は下記になります。