wordpressでhighlight.jsを利用する方法

この記事は2014/9に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

このサイトは技術系の記事を書くことが多いため、コードハイライトを行う必要があるなと思い、「highlight.js」を導入しました。

highlight.jsの導入はJavaScriptとCSSを読み込み、スクリプトの起動を行うだけでよしなにやってくれるのでお気に入りです。

前提

WordPress4.0のデフォルトテーマである「Twenty Fourteen」をカスタマイズするために子テーマを作成してスタイルの調整とfunctions.phpの追加を行っています。

highlight.js起動スクリプトの準備

まず、子テーマ内に適当な名前でJavaScriptファイルを作成します。
Transrainでは「highlightjs_call.js」という名前にしています。

内容はとても簡単で、1行で起動用の処理を書いているだけです。

hljs.initHighlightingOnLoad();

functions.phpの修正

次に、functions.phpに下記処理を追加します。
この処理は単純に、JavaScriptとCSSの読み込みを追加しているだけです。

このサイトの場合は子テーマのfunctions.phpにそのまま書いています。(子テーマのfunctions.phpは親テーマのfunctions.phpの追加として扱われる)

親テーマに直接追加する場合はfunctions.phpの適当な位置に追加してください。

/**
 * highlight.jsを追加する
 */
// スクリプト追加アクションに処理を追加
add_action('wp_enqueue_scripts', 'append_highlight_js');

function append_highlight_js() {
    // スクリプトの追加
    wp_enqueue_script('highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js');
    wp_enqueue_script('highlightjsload', get_stylesheet_directory_uri() . '/highlightjs_call.js');

    // スタイルの追加
    wp_enqueue_style('highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/solarized_dark.min.css');
}

今回はスタイルとして「Solarized Dark」を利用していますが、沢山のスタイルが用意されているので、好きな物を選んで、読み込めば好みのハイライトが行えます。

ちなみに、cdnjsでの一覧はこちら

上記の作業で読み込みを行うようになったら<pre><code>〜</code></pre>のようにマークアップされている部分がハイライト化されます。

3cdd8e39b7bfcbb268641285abb97e154622bea0

 

おまけ

自分は結構タグを手書きするので、<pre><code>の組み合わせでも問題ないのですが、ビジュアルエディタを利用した場合には面倒なので、preタグに反応させる方法も記載しておきます。

ただし、テストしていないので自分でデバッグしてください。

修正対象はhighlight.js起動スクリプトです。

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

コメントを残す