highlightjs

これまでのWordPressプラグインのCrayon Syntax Highlighterでソースコードをハイライト表示していましたが、ソースコードのコピーができないなどの不具合が見られたので代替のものを探しました。

JavaScriptライブラリのhighlight.jsが軽くてカラースキームも選べるとのことで導入しました。

スポンサードリンク

導入方法

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

スタイルシートとJavaScript、ハイライト表示をするための関数呼び出し(<pre><code>...</code></pre>で囲まれているソースコードをハイライト表示)をhaedの中に記述します。これでソースコードを貼るための準備はできました。

<pre><code>public class Main {
    public static void main(String[] args) {
        System.out.println(&quot;Hello World!&quot;);
    }
}</code></pre>

ソースコードを貼るときは<pre><code>...</code></pre>にコードを記述します。

このとき、ソースコードは事前にHTML特殊文字を変換(=エスケープ)しておく必要があります。エスケープはソースコードを適切に表示するために必要な作業です。上記に示した<pre><code>...</code></pre>で囲った部分がエスケープしたあとのソースコードです。

HTMLエスケープツール | Web制作小物ツール – dounokouno.com

HTMLをエスケープするツールはネット上に様々ありますが、今回は上記リンクのツールを使用しました。ソースコードをHTMLエスケープツールに貼り付けて、変換を押すとハイライト表示が可能なHTMLが出力されるのでそのままWordPressのエディターに貼り付ければOKです。

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

このようにハイライト表示ができました。

テーマの変更

highlight.js demo

上記のリンクでhighlight.jsのデモを見ることができます。左側のメニューの”Styles”からハイライトするときのテーマをチェックすることができます。変更したいテーマを決めたら、そのテーマと同名のCSSファイルを下記リンクより探して、headに記述したスタイルシートのファイル名を変更してください。

highlight.js/src/styles at master · isagalaev/highlight.js

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/github.min.css">

例)テーマ:Githubを使用の場合
github.min.cssに変更する(minを忘れずに付ける)

Crayon Syntax Highlighterからの移行

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

Crayon Syntax Highlighterでは<pre>...</pre>のみでソースコードを囲っているので、初めに紹介したハイライト表示の関数呼び出しの書き方では動作しません。上記のように修正すると、<pre>...</pre>のみで囲まれたソースコードでもハイライト表示が可能となります。

さいごに

Crayon Syntax Highlighterを使っているときは行番号の表示、ツールバーからのソースコードのコピー機能など便利な機能がありました。また、HTMLエスケープも自動でやってくれました。highlight.jsではそれらの機能は提供されていないのですが、代わりに動作がとても軽くなりました。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。