今回は、ブログにコードを記載する際に、色のついたコードを表示してくれるjQueryプラグインであるhighlight.jsの実装方法をご紹介致します。
簡単に実装でき、ブログの質も良くなるため、おすすめです！
目次
1.highlight.jsのファイルをダウンロードする。
まずは、以下のリンクよりhighlight.jsのファイルをダウンロードしてください。
以下の画像の『Get Version 10.1.2』の黒背景のボタンを押してください。
続いて、以下の画像で、適用する言語を選んでください。
（わからない方は初期設定のままでも大丈夫です！）
以下の画像のダウンロードボタン（小さい白背景のDownloadボタン）よりファイルをダウンロードしてください。
ダウンロード後は、ファイルを解凍して、作業ファイルにhighlight.jsファイルを入れましょう。
2.header.phpのhead内に、highlight.jsのプラグインを読み込む
以下の画像のようなコードを記載してください。
<head>
・・・
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/highlight/styles/tomorrow-night-eighties.css">
<script src="<?php echo get_template_directory_uri(); ?>/highlight/highlight.pack.js"></script>
</head>
<body>
・・・
ポイント
・<?php wp_head(); ?>の後に、highlight.jsを読み込むコードを書く。
・linkのhrefコードは、<?php echo get_template_directory_uri(); ?>の後に、階層を書く。
・linkのhrefコードの最後のtomorrow-night-eighties.cssを変えることで、好きなコードの色合いや背景を選ぶことが出来ます。
公式サイトから好きな色合いや背景を選んで、設定しましょう！
footer.phpに以下のようなコードを記載してください。
・・・
<script>
jQuery(function() {
hljs.initHighlightingOnLoad();
});
</script>
<?php wp_footer(); ?>
</body>
</html>
ポイント
・<?php wp_footer(); ?>の前に、java scriptを書く。
・hljs.initHighlightingOnLoad();の一行で、java scriptのコードはOK！
これで、作業ファイルでのコードの打ち込みは終了です！
4.ブログの投稿ページで、highlight.jsを使おう！
使用方法は、
<pre><code>
載せたいコードを書く
</code></pre>
のように投稿ページに打ち込めば大丈夫です！
詳しい手順
1.まずは、カスタムhtmlで打ち込む
なぜ、htmlカスタマイズで打ち込むかと言うと、直接打ちこんでも反影されないからです。
2.<pre><code>記載したいコード</code></pre>のように書く。
3.打ちこんだコードを、カットペースト（ショートカットキーはcommand+X)して、文章に貼り付ける
上記で、打ちこんだコードを、カットペーストして、通常のテキスト文に貼り付ける。（カスタムhtmlは、削除してください）
そうすると以下の画像のように、<pre><code></code></pre>が消えて、<div>コードだけが記載されるようになります。
投稿を公開すると、
見事に反映されています！
まとめ
以上が、highlight.jsの実装方法でした！
自分自身、少し実装に手こずるところもあったため、今回みなさんに共有させていただきました。
少しでも、お役にたてたら幸いです。
それでは、最後まで読んでいただきありがとうございました。
