コードに色付けしてみたいけどどうやったらいいのかわからない。
プラグイン入れるべきか、でも重くなりそうだなー。簡単に実装したいなー。自作テーマだけどどうすればいいんだろう。
そういう方、見ていってください。
このページではダウンロードして使う方法を解説します。
参考にしたサイト【コードを綺麗にハイライトする!highlight.jsの使い方!】2019.10.23
参考記事が少し古かったので、この記事では2022年度版として簡単に解説します。
手順解説
stylesのテーマはいろいろあるんですが、一般的に使われてるのがmonokai-sublimeです。
zipファイルでダウンロードされるので展開しましょう。
Xserverの場合で解説していきます。
ドラッグアンドドロップで簡単に入れられます。
header.phpの<head></head>内に下記のコードを書きます。
<link rel="stylesheet" href="<?php bloginfo("template_url");?>/highlight/monokai-sublime.min.css">
<script src="<?php bloginfo("template_url");?>/highlight/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
テンプレートファイルに読み込むコードの<?php bloginfo("template_url");?>を忘れないようにしましょう。
色付け(highlight)したい部分を<pre><code></code></pre>で囲みましょう。
例
<pre><code>
.selector {
display: block;
margin: 20px;
}
</code></pre>
言語名を入力するとエラーが改善されることがあります。
→code class="言語名"で指定。(小文字)
classに言語名を指定することで、その言語で色付け(highlight)できます。
例
<pre><code class="css">
/* CSSのスタイル */
</code></pre>