読者の悩み
- WordPressでカスタマイズ記事を書きたい！
- コードをどうやって載せるのがいいの？
- プラグインなしで載せる方法ってある？
こんな悩みに答える記事になっています。
プログラムのコードを紹介する際によく使われているのがCrayonというプラグイン。
しかし、Crayonは重く、デザインも少ししかいじることができません。
もっとおしゃれに軽くコードを載せたい！
highlight.jsを使用すれば解決可能です！
導入方法から、使いかた、Crayonからの切り替え方法についても書いていきます。
1.Crayon Syntax Highlighterとは
知っている人は飛ばしてOKです。
Crayon Syntax Highlighter―通称CrayonはWordPressのプラグインで、使用すると以下の画像のようにコードを出すことが可能です。
分かりやすいですね。
かなり多くのサイトでこのプラグインは使用されています。
しかし、多くのデータを読み込んでくるので重いのなんの。
重いから乗り換えたいという人も確実にいるはず。
私は以前使用していましたが、highlight.jsに変更してページの速度スコアが7くらい上昇しました。
2.highlight.jsを使用してもっと軽くコードを掲載！
一方highlight.jsを使用するととても軽く、以下の画像ようにコードを掲載することができます。
デザインもアレンジ可能です。
画像の場合だと、文字色以外すべて自分なりにアレンジしています。（背景、フォント、枠などなど）
行数が出てこないのは残念ですが、デメリットはそのくらい。
highlight.jsの使い方
実際にどうやって使用するかを説明していきます。
以下のコードを<head>～</head>内に載せるだけです。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
このコードはhighlight.jsのアップデートによって変化しますので、詳細はhighlight.jsの公式ページでGet version 〇.〇〇.〇のボタンをクリックした先にあるコードを見るようにしてください。
貼り付けた後、掲載したいコードを<pre><code>～</code></pre>内に書けばOK
基本的には自動で言語を判別してくれますが、ミスっているときは言語を指定します。
<pre><code class="python">～</code></pre>のように書けばできます。
highlight.jsの使い方【デザインも豊富】
highlight.jsにはもともとあるデザインも多く、簡単に変更することができます。
コードのこの部分を変更すればできます。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
ここのdefault.min.cssの部分に注目。
defaultの文字を変えればできます。
デザインの見本を参考に好きなデザインに変えましょう！
ちなみに文字は、cssが置いてある場所のファイル名を参考にしてください。
3.Crayonからhighlight.jsに乗り換える方法
Crayonからhighlight.jsにすぐに乗り換える方法を説明します。
Crayonでは、<pre>～</pre>内にコードを書いていました。
しかし、highlight.jsでは<pre><code>～</code></pre>内にコードを書かなければなりません。
対応できるように書き換えましょう
Crayonから乗り換えるためのコード
head内に載せるコードを以下のように変えます。
最後の行を変えただけですね。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
こうすることで、<pre>～</pre>内でも認識されるようになります。
ちなみにこのコードはアップデートで変化する場合もあります（当分は大丈夫でしょうが）ので、highlight.jsのgithub内を参考にしてカスタマイズしてみましょう。
私は数年前の記事を参考にして、昔のコードではアップデートにより対応できない状況になっており苦しみました・・・。
乗り換える人限定にはなりますが、注意して進めていきましょう。
Crayonから乗り換えた場合の使い方
単純に<pre>～</pre>内にコードを載せればOKです。
（Crayonでは、<pre>～</pre>内のデザインを整えていたのでhighlight.jsでも対応可能というわけです。)
ただ、Classicエディタでのテキスト編集の切り替えは必須です。
wordpressのビジュアルモード→テキストモードになった場合に、例えば「>」は「>」と表示されます。
この状態にならないとコードを正しく認識してくれません。
テキスト編集モードが切り替わると自動でできるのでめんどくさくはないのですが、注意です。
wordpressをテキスト表示にして<pre></pre>のコードを1文字ほど書き込んで、ビジュアルモードにしてから1文字を消し、そのまま<pre>内にコードが入るようにコピペすればできます。
4.【highlight.jsの使い方】デザインを自分好みに変更する
私が今回見せた見本はデザインを自分好みに設定しています。
文字の色を自分好みにするのは難しいので、文字の色だけはhighlight.jsのテーマに任せます。
しかし、枠とか背景とか、余白といった部分は変更できます。
highlight.jsを自分好みにデザインする
CSSで変更するだけです。
以下は例ですが、このようなコードをStyle.cssに追加するだけでできます。
.hljs {
background:#f5f6f7!important;
padding: 1rem!important;
line-height:1.4;
border: solid 1px #dadada;
border-radius:5px;
}
例では枠と背景を主に変更しています。各自で自由にやってみてください！
設定したのに変わらないよ！という場合は、!importantを追加してみましょう。上記のコードも使用していますので、それを参考にしてください。
5.highlight.jsの表示を高速化させる
コードの置き方次第ではより高速化することもできます。
<head>～</head>内に以下のコードを
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<?php wp_footer(); ?>
</body></html>
の手前に以下のコードを挿入
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
これで多少スピードアップします。
フッターに置くことで、記事が表示された後でhighlight.jsを読み込むようになるので、読み手からすると「はやく表示された！」と思わせることができます。
6.highlight.jsの使い方、乗り換え方まとめ
今回は、以下のことについて書いていきました。
今回紹介した内容
- highlight.jsの使い方
- Crayonからの乗り換え方法
- highlight.jsのデザイン変更方法
- highlight.jsをより速く使う方法
highlight.jsを使用して軽くおしゃれにコードを載せていきましょう！
コードを紹介する人はこれ以外の選択肢ないぞ！ってくらいおすすめです！
【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】
今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。
