wordpressでソースコードを表示するには「highlight.js」がいい!

スポンサーリンク

2015.10.30 | wordpress




wordpressでソースコードを表示するには「highlight.js」がいい!

wordpressでソースコードを表示すると言えば、「Crayon Syntax Highlighter」のプラグインを使用されている方が結構いらっしゃると思います。

しかし、「Crayon Syntax Highlighter」は、重いとよく聞くことがあり、今回はソースコードを表示するために「highlight.js」を導入してみることにしました。

「highlight.js」の設置方法

設置方法は簡単です。CSSとJavaScript はCDNを設置することができます。 JavaScriptの呼び出し部分をhead内に書き込むだけで表示することができます。


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>
$(document).ready(function() {
    $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
    });
});
</script>

※2015年10月30日現在です。 以下のサイトにて最新版のCDNのコードをご確認ください。

https://highlightjs.org/download/

コードの表示方法

<pre><code>タグで囲み、HTMLエスケープさせればOKです。
<pre>
<code>
<a href=”http://hifumi-sinji.lovepop.jp” target=”_blank”>ひふみブログ</a>
</code>
</pre>

WordPressでのHTMLエスケープは簡単で、ビジュアルモードでコードを貼り付け テキストモードに表示を切り替えるだけで、簡単に変換してくれます!!

「highlight.js」のカスタマイズ

デザインは、いくつか種類があり、その中から自分好みのデザインを選ぶことが出来ます。

「highlight.js」のサイトからCDNをコピーしてきた場合、defaultとなっています。


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

上記のように「/8.9.1/styles/default.min.css」となっています。

まずは、以下のサイトで「Styles」を選択し、自分好みのスタイルを探してください。

https://highlightjs.org/static/demo/

highlightjsスタイル選択

思ったより多くのスタイルがあり、迷うかもしれません。

私の場合、いくつか試してみて、「ir_black」のスタイルを選択しています。

導入方法は、先ほどのCDNのコード「default」部分を「ir_black」と書き換えるだけでOKです。



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

スタイルのスペルは、小文字で書く必要があるようです。正しいスペルは以下のサイトで確認してください。

https://github.com/isagalaev/highlight.js/tree/master/src/styles

「highlight.js」をさらにカスタマイズ

さらにこのブログで使用しているCSSを載せておきますので、参考にしてください!


.pre{
	font-size: 90%;
	background: #F7F7F7 none repeat scroll 0% 0%;
	border: 1px solid #E7E9EE;
	padding: 0.5em 0.8em;
	color: #555;
	overflow-x: auto;
	overflow-y: hidden;
}

まとめ

wordpressで「highlight.js」を使用するには、HTMLエスケープをする必要があり、多少面倒ですが、表示速度は早く使いやすく感じます。

ぜひ、皆様も導入してみてください!!


いつもクリックありがとうございます

ブログランキング・にほんブログ村へ
スポンサーリンク




コメントを残す