ソースコードの表示でCrayon Syntax Highlighterをやめて「highlight.js」にしてみた【Simplicity設置例】

ブログでJavaScriptやCSSなどの解説でソースコードを表示する場合に、プラグイン「Crayon Syntax Highlighter」を使っているWordpressユーザーさんは多いと思います。
私もこの前まで使ってましたが、「highlight.js」というのが軽くてよさそうなので使ってみました。

スポンサーリンク

Highlight.jsとは?

Highlight.js」はPHPやCSSやHTMLやその他色んな言語のソースコードを見やすくハイライト(色付け)してくれるライブラリです。
Crayon Syntax Highlighterほど高機能じゃないですが、「対応言語も多い」「設置が簡単」「軽い」「カラーテーマも豊富」となかなかよさそうです。

ブログ記事内などのソースコードを色分け(ハイライト)して見やすくしてくれる
リンク Highlight.js

Highlight.jsの設置(通常)

今使っているテーマが「Simplicity」なので、Simplicityへの導入例を中心に説明していきます。

必要ファイルをダウンロードして設置する方法もありますが、今回はコピペでOKな一番簡単な方法での導入方法で進めていきます。

まずは、Highlight.js公式サイトにアクセスします。
「GET Version (バージョン)」をクリックします。
※2016.4.18現在でバージョンは「9.3.0」

highlight.js

Hostedの、「cdnjs」か「jsdelivr」のどちらかのコードをコピーしてhead内に記入するだけ。

Highlight.js CDN

ハイ簡単!

初心者の人でもテーマ「Simplicity」を使ってる人なら余裕余裕♪
子テーマにコードを追加するだけ!
こういう使い勝手の良さが「Simplicity」の本当にいいところですよねー。

では、もう少し詳しく説明していきます。

テーマ「Simplicity」の場合

Simplicityをカスタマイズする場合は子テーマを編集します。
※他のテーマの場合もカスタマイズするなら子テーマ推奨。

Simplicity子テーマのheader-insert.phpの
「//ログインユーザーも含めてカウントする場合は以下に挿入」の下に次のコードを追加してください。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

!注意! ↑3行目も忘れずに!

Simplicityでのコード追加

※「9.3.0」はライブラリのバージョンなので導入時期によって変わります。
※最新バージョンは公式サイトでチェックしてねー

Simplicity以外のテーマ

使用しているWordpressのテーマによりますが、header.phpのhead内、JavaScriptは<!–?php wp_head(); ?–>の下あたり(の直前)に上記のコードがくるように追加すれば大丈夫だと思います。

Highlight.jsの設置(Crayon Syntax Highlighterからの変更)

Crayon Syntax Highlighterをずっと使っていた場合はコードの部分が

<pre>コード</pre>

になっていると思います。

Highlight.jsではコードの部分を

<pre><code>コード</code></pre>

にしないといけません。

今までの記事にいちいち<code>を追加していくのは大変なので、

<pre>コード</pre>

でもハイライトするために次のようにします。

テーマ「Simplicity」の場合

header-insert.phpには公式サイトからコピーした次の2行のみ追加します。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>

※「9.3.0」はライブラリのバージョンなので導入時期によって変わります。
※最新バージョンは公式サイトでチェック!

そして、javascript.jsに以下を追加します。

jQuery(document).ready(function($) {
 $('pre').each(function(i, block) {
  hljs.highlightBlock(block);
 });
});

Simplicity以外のテーマ

head内に次のように追加します。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>
$(document).ready(function() {
 $('pre').each(function(i, block) {
  hljs.highlightBlock(block);
 });
});
</script>

※「9.3.0」はライブラリのバージョンなので導入時期によって変わります。

Highlight.jsの使い方

基本の書き方

基本的な書き方は次のようにprecodeでコードをはさむだけです。

<pre><code>
ここにコードを入力
</code></pre>

例えば下のように書くと

<pre><code>
.sample {
 display: block;
 margin: 0 10px;
 text-align: center;
 border: 1px solid #000;
}
</code></pre>

こう↓表示されます。

.sample {
 display: block;
 margin: 0 10px;
 text-align: center;
 border: 1px solid #000;
}

言語指定

思うようにハイライトされない時は言語を指定ください。

<pre><code class=”css”></code></pre>
という感じ。

ハイライトなし

ハイライトしたくないときは
<pre><code class=”nohighlight”></code></pre>
とします。

HTMLの場合は「AddQuicktag」プラグインがおすすめ!

次のようなコードを書いた場合、ソースコードが表示されません!

<pre><code><a href="https://mizutama.blog">リンク:Neko Life</a></code></pre>

普通のテキストリンクになっちゃいます。

テキストリンク

HTMLのソースコードを表示したい場合はHTMLエスケープされたコードじゃないとだめなんです。

そこで、「AddQuicktag」の出番!

よく使うショートコードやタグなどのボタンをエディターに追加できるWordpressの超定番プラグインですが、htmlタグを変換してくれるボタンが追加できるんです。

AddQuicktag

AddQuicktag」の設定ページで「htmlentities」を有効にすると、エディタに「HTML entities」「Decode HTML」のボタンが追加されます。

AddQuicktag

エディタのテキストで変換したいコードを選択して「HTML entities」を押すと・・・

<a href="https://mizutama.blog">リンク:Neko Life</a>

↓ ↓

&lt;a href="https://mizutama.blog"&gt;リンク:Neko Life&lt;/a&gt;

このように変換されます。

保存して確認してみると、はいちゃんとコードが表示されました!

 コード表示

逆の変換(戻したい場合)は「Decode HTML」ボタンでHTMLに戻ります。

これは便利なので、ぜひ使ってみてください。

カラースタイルのカスタマイズ

デフォルトのスタイルはなんとも味気ないので、スタイルをカスタマイズしていきます。

標準のスタイル

まずは、デモページで好みのスタイルを探します。

リンク highlight.jsデモページ

highlight.jsデモページ

例えば「Monokai Sublimek」がいいなと思ったら、
https://github.com/isagalaev/highlight.js/tree/master/src/stylesで、同じ名前を探します。
「Monokai Sublime」だったら「monokai-sublime」でページ検索すると見つかりました。

スタイル検索

「monokai-sublime.css」があるのを確認したら

<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css”>

の「default」を「monokai-sublime」に書き換えます。

<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css”>

「.min」を忘れずに!大文字になっていたりハイフンがなかったりするとカラーが表示されないので注意!

カラーを変更したらこんな感じになりました。

Monokai Sublime

まとめ

プラグインの方が簡単なのですが、ちょっとでも軽くしたいならこの「highlight.js」もいいかと思います。「できるだけプラグイン使いたくない派」の人にもおすすめだと思います。

私の場合「Crayon Syntax Highlighter」からの乗り換え後もコードの表示で不具合がないようなので、しばらくはこれでいこうと思います。

ファイルをダウンロードして自分でスタイルを編集すれば好きなカラーにもできるので、コードの表示をカスタマイズしてみたい人はぜひ試してみてくださいねー。


スポンサーリンク

シェアする

フォローする