たかまるブログ

wordpressでソースコードをシンタックスハイライト

   

ソースコードなどの色付に wordpressのプラグインとして○○ syntax highlighterなどの代わりに highlight.js を利用するようにしました。

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/hybrid.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>// <![CDATA[
hljs.initHighlightingOnLoad();
// ]]></script>

これをテンプレートの footer.php に入れました。
入れるだけで動きます。

テーマはいくつかありhttps://highlightjs.org/static/demo/ここからサンプルを見ることができます。

気に入ったサンプルがあれば
https://github.com/isagalaev/highlight.js/tree/master/src/styles に同じ名前のCSSがあるので、これに「.min」をつけてfooter.php に書いたcss名を部分を変更すればテーマも変わります。

あとはpreタグでソースコードを書くとコードがハイライトされます。

<pre><code class="php">
// ここにphpのコード
</code></pre>

べんり!

 - WordPress