技術系のブログにはお約束！イッパイヨンデナにもシンタックスハイライトを導入したい！

ってことで、一番の有名どころは SyntaxHighlighter かなぁと思うのですが、こちらのサイト様でシンプルなおしゃれ感が気に入ったので、今回は、Highlight.js をプラグインを使わずにワードプレスに入れてみたいと思います♪

公式サイトはこちら

cdnjsがあって、

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

これをヘッダーにコピペするだけで、いけるようです。ワードプレスで使うので、テンプレートの header.php に入れます。個別投稿ページのみ必要なので is_single() で囲みます。

<?php if ( is_single() ) : ?>

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

<?php endif; ?>

うん！できてる！
テーマもデフォルトから変更してみます。テーマはとってもいっぱい！後でデザイナーさんに直されそうですが（笑）ひとまず Agate にしてみます。

<?php if ( is_single() ) : ?>

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

<?php endif; ?>

うむ。良いではないか・・・。
ここまでの作業で分かったこと。

1. Highlight.js を入れるのはとっても簡単！
2. 使い方は、<pre><code class=”html（クラスは記述するソースに対応させる）”>　〜ここに書くだけ〜　</code></pre>
3. <>は &lt; &gt; にしないとダメ〜。
4. 実は、一番最初にご紹介したサイト様で、横スクロールバーのONOFFが一番気に入っていたのですが、それは Highlight.js の機能ではなく、サイト様の独自対応だということ（笑）

ワードプレスで <pre></pre> を書き出したい時は、「段落」の中にある「整形済みテキスト」を選ぶと <pre></pre> で文字が囲まれます。<>についても、タブの［ビジュアル］の方で書き込めば、勝手に変換して貰えます。「整形済みテキスト」でソースを記入した後、タブを［テキスト］に変更し、<code></code>を書き加えると良さそうです。