HOME >  プラグイン > 

SyntaxHighlighter Evolvedでソースコードを表示

技術系やウェブ系のサイトだと、pre要素とかcode要素なんかでソースコードを表示することが多かったと思います。

HTMLのタグのカッコを文字参照コードに置換したり、いちいちCSS設定したりと結構手間だったと思います。ltとかgtとか。テキストエディタで良く一括置換しました。

最近ですとJavaScriptライブラリのSyntaxHighlighterを使ってソースコードを表示するウェブサイトが増えてきました。

こんな感じのやつですね。

<?php
 echo date('Y/m/d');
?>

WordPressの場合、プラグインで実装することが可能です。

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

ダウンロードはこちらから。
http://wordpress.org/extend/plugins/syntaxhighlighter/

右上のDownload Version?からZIPファイルをダウンロードし解凍します。解凍後は、設置しているWordpressのpluginsフォルダにsyntaxhighlighterフォルダを丸ごとアップロードしてください。ダッシュボードからプラグインを有効化すればすぐに使えます。

使い方

記事を投稿する際に[php]と[/php]といった感じで言語名でマークアップします。この辺の詳細は参考サイトをご覧ください。

■参考サイト:
WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved
SyntaxHighlighter Evolved : ソースコードを美しく表示するプラグイン

注意点

このプラグインを使う場合、テーマ側に下記のコードがないと動きません。

<?php wp_head(); ?>
<?php wp_footer(); ?>

wp_headの方は意識しなくても使っている場合が多いと思うんだけど、wp_footerの方は、get_footerなんかを使っていると用が無かったりするもんだから忘れがちになります。自分は、フッターをget_footerで読み込んでいたので、最初、SyntaxHighlighter Evolvedが動きませんでした。

このSyntaxHighlighter ですが、Version2系と3系を選択できるんですが、ツールバーが出せる2系の方が使いやすいという印象でした。

関連記事

サーバー別インストールガイド