軽いとうわさのhighlight.jsをTwenty Fifteenに導入、ソースコードを綺麗に表示

highlight.jsのトップページ

[2015/11/21]追記1:インラインコードにもハイライト表示を適用したくなったので、そのための設定方法を追加しました。
[2016/01/21]追記2:prism.jsに切り替えたので、サイトのソースコード表示はprismの方になっています。

サイト上でコードを綺麗に表示させるプラグインを求めて

このサイトではプログラムのソースコードをかなり載せるつもりですので、コードを綺麗に表示できるプラグインを探していました。最初は高機能なプラグイン「Crayon Syntax Highlighter」を導入し、綺麗なコード表示に満足していました。

しかし、色々調べてみるとどうやらかなり重いらしいということが判明。今はまだサイト自体ほとんど記事がないので問題ないですが、後からプラグインを変更した場合の手間を考えると「切り替えるなら早い方がいいか」と思って色々検索しました。

highlight.jsの設定

WordPressのプラグインで、少なくともCrayon Syntax Highlighterよりも軽そうなものもありましたが、結局「highlight.js」を導入することにしました。理由は単純で、おそらく「最も軽い」からです。私自身が計測したわけではありませんが、本記事の最後で紹介する参考サイトの方が詳しく解説なさっています。また導入方法も簡単で、私のようなサイト運営初心者でも簡単にインストールできました。さらに、WordPressのプラグインではないので、仮にWordPressを使わなくなった場合でも問題ないという利点もあります。

この記事では、highlight.jsの導入手順と私がつまづいた点を紹介させて頂きます。ちなみに、私が使っているWordPressテーマはTwentyFifteenですので、テーマが違う場合、多少設定方法が変わるかもしれません。

highlight.jsのダウンロード

highlight.jsは下記のサイト

highlight.jsのトップページ
https://highlightjs.org/

からダウンロードできます。右の方にある「Get version ???」(ダウンロード時点では8.9.1)をクリックすると、「Getting highlight.js」というページに飛びます。ここで、シンタックスハイライトさせたい言語にチェックを入れて、下の方にある「download」ボタンを押せばダウンロードできます。

私の場合は、「Swift」がメインでしたので、OthersからSwiftにチェックを入れて、その他使いそうな言語を選びダウンロードしました。「highlight.zip」というファイルがダウンロードされるので、それを解凍します。この中でサーバ上に必要なファイルは

  • highlight.pack.js
  • {好みのスタイル}.css

の2ファイルのみです。

好みのスタイルというのは、highlight.jsを使った際に表示される文字・背景のパターンを決めるものです。実際どんな風に表示されるのかは

https://highlightjs.org/static/demo/

から確認することができます。ここから好きなスタイルを選び、それと同じ名前のcssファイルをサーバにアップロードします。私の場合は、迷わずXcodeスタイルを選びました。cssファイルは、ダウンロードしたhighlightフォルダ内の、「css」というフォルダに置いてあります。

サーバ上での設定

使うスタイルが決まったら、ファイル転送ソフトを使って「highlight.pack.js」と「cssファイル」をサーバに転送します。転送後、テーマの「header.php」を編集して、下記のコードをコピペします。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/xcode.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

この記述はheader.phpの</head>タグ直前に書きました。使っているテーマ(ここではTwentyFifteen)のディレクトリに、「js」と「css」ディレクトリを追加して、それぞれにhighlight.pack.jsとxcode.cssを追加しました(私は子テーマを使っているので、親テーマの場合はjsとcssというディレクトリは元々あるようです)。ファイルをどう置くかは任意だと思いますので、header.php内の記述がファイルの場所を正しく指していれば問題ないと思います。

また、上記の例ではxcode.cssを使っていますが、この部分は使用するスタイル(cssファイル)によってそれぞれ記述を変える必要があります。

表示例

先ほどのheader.php内にコピペする部分もhighlight.jsで表示されたものでしたが、Swiftの場合はこんな感じになります。

ソース

<pre><code class="swift">var twentyFifteen = 2015
let someString = "hello world"
</code></pre>

表示

var twentyFifteen = 2015
let someString = "hello world"

つまづいた点

highlight.jsのインストールやheader.phpの記述では特に問題ありませんでした。しかし、highlight.pack.jsのパーミッションが所有者のみの(rw)権限でしたので、最初うまくいかず、readパーミッションをgroupとothersに与えてうまくいきました。もし正しく設定しているのにうまくいかないという方は、highlight.pack.jsのパーミッション設定を見なおしてみると良いかもしれません。

[追記]codeタグのみでインラインのハイライト表示

文章中にもコードを部分的に使用しているので、<code>タグのみでハイライト表示させたいと思い、色々調べた結果以下の方法でうまくいった。

まずhighlight.jsの設定をロードする部分

<script>hljs.initHighlightingOnLoad();</script>

を以下のコードで置き換えます。

<script>
jQuery(document).ready(function($) {
	$('code').each(function(i, block) {
		hljs.highlightBlock(block);
	});
});
</script>

最初は先頭のjQueryなしのコードを埋め込んでうまくいきませんでしたが、これで<code>タグのみでハイライト表示できました。

参考:WordPress プラグインなしでソースコードをシンタックスハイライトさせる方法 highlight.js
https://tanacio.com/highlightjs/

ただし、これだけだと.hljsクラスがブロック要素になっているため、<code>タグで囲んだ部分が改行されてしまいます。これは、cssの設定でブロック要素を解除すれば解決しました。

参考:HIGHLIGHT.JSでインラインのソースコードもハイライトする
http://kenzauros.com/blog/apply-highlight-js-to-inline-source-code/

参考になったサイト

highlight.jsのインストールから設定まで、以下のサイトが大変参考になりました。

highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適
(http://blog.s-giken.net/229.html)

スポンサーリンク
広告1
広告1

シェアする

フォローする