ブログにソースコードを記載するなら「highlight.js」が軽くて簡単

今年の3月にブログを始めてから、Wordpressのカスタマイズを通して色々なコトを勉強してきました。学んだことを記事にして残そうと思っているのですが、コードを紹介されている方達のブログを見ると表示がオシャレ!シンタックスハイライトで綺麗に色付けされ、行番号が表示されている。

どうやっているのかなと調べると、Wordpressのプラグインで「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」などなど、色々なプラグインがあるらしい。

とりあえず、「Crayon Syntax Highlighter」をインストールしてみると、凄く簡単に綺麗なコードを記載できました。が、色々と調べていくうちに「Crayon Syntax Highlighter」は重いらしいことが判明。

たしかに、「css」や「js」ファイルを色々と読み込んでいる・・・。他に何かいいモノはないかなと調べていくうちに、たどり着いたのが「highlight.js」!

シンタックスハイライトは「highlight.js」が軽くて簡単

この記事を書いている時点でのバージョン:9.0.0

CDN版のほうが簡単

CDNで必要なファイルを読み込むか、自サーバーに置くかを選べます。このブログではCDN版を利用させてもらっています。CDNで読込むには、Wordpressの「header.php」か「footer.php」に下記のコードを記載。

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

これで準備は完了。

あとはブログの記事を書くときに、表示したいコードを、

<pre><code>...</code></pre>

のタグで記載するだけ。

これだけで綺麗にシンタックスハイライトで表示されます、簡単!

自サーバーに置くときは

自サーバーに「js」と「css」を置くときは、公式サイトの「Get」ボタンを押して進み、「言語」を選ぶかデフォルトのままで必要なファイルをダウンロード。

ダウンロードしたファイルの中で使うのは、「highlight.pack.js」と「css」ファイルだけ。

必要なファイルをサーバーにアップロードして、ファイルを読み込むために、「header.php」か「footer.php」に下記のコードを記載。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

パスはサイトに合わせて書き換えが必要。

軽い

外部から読み込んでくるファイルは、「css」と「highlight.js」の2種類だけなので軽い!

カスタマイズ

言語の指定方法、ハイライトカラーのテーマ選択の方法です。

言語の指定

何もしなくても、自動的に記載しているコードの言語を判別してくれますが、希望通りにいかない時は、「class=”言語名”」で明示的に指定。

<pre><code class="PHP">....</code></pre>

<pre><code class="css">....</code></pre>

などなど。

ハイライト色のテーマを選択

公式サイトのライブデモで、ハイライト色を「言語」と「スタイル」を切り替えながら選ぶことができます。

気に入ったスタイルが見つかったら、CDN版は以下の規則のファイル名で「css」を読み込みます。

“小文字にする+半角空白は「-」(ハイフン)にする+拡張子は「.min.css」”

このブログで選択したスタイルはSublime Text風の「Monokai Sublime」です。cssのファイル名は、「monokai-sublime.min.css」になります。

ポイント

ソースコードを記載するときは、” < “や” > “などなどの記号を、実体参照というモノに置き換える必要があります。下記のサイトなどで、コードを貼り付けて変換ボタンを押せば瞬時に置き換えをしてくれます。

まとめ

行番号の表示には対応していないようですが、軽くて使い方もシンプルなので気に入りました。綺麗なテーマが色々あって悩ましいですけど、なんだか楽しいです!