カテゴリ一覧から記事を探す

highlight.jsでwordpressに軽くコードを載せる方法【Crayonからの乗り換え可】

highlight.jsでwordpressに軽くコードを載せる方法【Crayonからの乗り換え可】

プログラムのコードを紹介する際によく使われているのがCrayonというプラグイン。

しかし、Crayonは重く、デザインも少ししかいじることができません。

もっとおしゃれに軽くコードを載せたい!

そんな悩みを解決するための記事になっています。

highlight.jsを使用すれば解決可能です!
導入方法から、Crayonからの切り替え方法についても書いていきます。

1.Crayon Syntax Highlighterとは

知っている人は飛ばしてOKです。
Crayon Syntax Highlighter―通称CrayonはWordPressのプラグインで、使用すると以下の画像のようにコードを出すことが可能です。

Crayonのコード

分かりやすいですね。

かなり多くのサイトでこのプラグインは使用されています。

しかし、多くのデータを読み込んでくるので重いのなんの。

重いから乗り換えたいという人も確実にいるはず。

2.highlight.jsを使用してもっと軽くコードを掲載!

一方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でも対応可能というわけです。)

ただ、テキスト編集の切り替えは必須です。

wordpressのビジュアルモード→テキストモードになった場合に、例えば「>」は「&gt;」と表示されます。

この状態にならないとコードを正しく認識してくれません。
テキスト編集モードが切り替わると自動でできるのでめんどくさくはないのですが、注意です。

wordpressをテキスト表示にして<pre></pre>のコードを書き込んで、ビジュアルモードにしてから<pre>内にコードが入るようにコピペすればできます。

4.highlight.jsのデザインを自分好みに変更する

私が今回見せた見本はデザインを自分好みに設定しています。

文字の色を自分好みにするのは難しいので、文字の色だけはhighlight.jsのテーマに任せます。

しかし、枠とか背景とか、余白といった部分は変更できます。

highlight.jsを自分好みにデザインする

CSSで変更するだけです。

以下は例ですが、このようなコードをStyle.cssに追加するだけでできます。

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>

これで多少スピードアップします。

6.まとめ

今回は、以下のことについて書いていきました。

  • highlight.jsの使い方
  • Crayonからの乗り換え方法
  • highlight.jsのデザイン変更方法
  • highlight.jsをより速く使う方法

highlight.jsを使用して軽くおしゃれにコードを載せていきましょう!