はぴすぷ

WordPressでコードを色付け表示する。highlight.jsでシンタックスハイライト

      2015/09/22

codeWordPressでコードを色付け表示する方法を色々検討した結果、highlight.jsというものが私にはベストかなという結論になりました。

まずコードを色付けして表示してくれることを、シンタックスハイライトと呼ぶそうです。

WordPressでシンタックスハイライトを導入する方法は、主には以下の２種類があります。

  1. プラグインとして導入する方法
  2. ヘッダーやフッターのphpファイルを編集して、JavaScriptとCSSを別途読み込ませる方法

１の方は、Crayon Syntax Highlighter、SyntaxHighlighter Evolvedが人気で、
２の方は、highlight.jsが人気がありそう。

見た目だけで言うとCrayonがすごい綺麗だし高機能でステキなんですが、対応言語がちょっと少ないのと、動作がかなり重いとのことで見送り。

完全な技術ブログならパフォーマンス多少落ちても綺麗に出したいってなるんですが、私のブログは一般向けの記事の方が多くなる予定でいるので、プラグインは使わず、速度優先でhighlight.jsを使うことにしました。

スポンサーリンク

highlight.jsの導入手順

まずは色付けのスタイルを決めましょう。

highlight.js デモ画面でStylesを色々選んで試せます。

決まったら、スタイルのファイル名を調べます。

highlight.js GItHubから近しい名前のものを探します。

ヘッダー（header.php）のheadタグの中に以下を追記

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/[選んだスタイルの名前].min.css"/>

フッター（footer.php）のbodyタグの最後に以下を追記

<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>
hljs.highlightBlock(block);
</script>

デフォルトではpreタグとcodeタグの組み合わせの部分に適用されますが、
preタグだけで適用させたい場合は、

hljs.highlightBlock(block);

の部分を以下のように変更して下さい。

$(document).ready(function() {
    $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});

これでpreタグに書かれたコードが色づけされて表示されるようになります。

はてなブログで慣れてしまってたせいで、htmlエスケープが必要になる手間がちょっと辛い(´・ω・｀)

Google先生のスタイルが良かったけどブログの背景色が白で区別つきにくいから、
私はhybridっていうスタイルのものを使ってます。

参考にさせて頂きました。
wordpressでのシンタックスハイライト

2015/08/17追記：
HTMLエスケープするのに便利な拡張機能見つけました。
技術ブログ書く人にオススメ！HTMLエスケープしてくれるChrome拡張機能！

 - Webサイト構築, WordPress ,