読者の悩み
- 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を使用して軽くおしゃれにコードを載せていきましょう!
コードを紹介する人はこれ以外の選択肢ないぞ!ってくらいおすすめです!
