BLOG

highlight.jsで軽量化！crayon syntax highlighterを辞めてみた。

2017.08.18 | JavaScript、WordPress、WordPressプラグイン

皆様、お盆はゆっくり出来ましたか？
ぼくは、相変わらず、実家に帰っておりました。
大阪から兵庫に帰ったのですが、いやー大阪に比べたら涼しいのなんので快適に親に甘えてまいりました。

さて、今回は、エンジニアブログにはよく使われるコードの見栄えをよくするプラグインで「crayon syntax highlighter」があります。
こちらは、ほぼインストールするだけで使える便利なプラグインです。
見た目のデザインは設定画面より、ちょいちょいっと変更するだけでよく、リアルタイムプレビューで現状の状態もみれるので設定も簡単です。

ですが、なんか、僕のブログではちゃんと動いてくれなかったので、別のものを使うことにしました。
crayon syntax highlighterの代わりを探すとすぐに見つかったのが「highlight.js」というもの、これはプラグインでは無いのですが、実装がとても簡単そうだったので、実装してみました。

実装手順

css/jsを読み込む
jsを書く

これだけです。
超簡単ですね。jsの部分も１行各だけです。
それでは、もう少し詳しい説明です。

cssを読み込む

//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/github.min.css

こちらのcssを<head>内に読み込む。

jsを読み込む

//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js

こちらのjsを</body>手前で読み込む。

jsを書く

hljs.initHighlightingOnLoad();

を読み込んだjsの下辺りに書き込む。

以上！

これでOKです！

あとは投稿のときに<pre><code> ~ </code></pre>でコードを囲めば使えます。

簡単すぎですよね。
これでは拍子抜けですね。

でも、いちいち<pre><code>ってかくの面倒ですね。
僕はエディターを「TinyMCE Advanced」を使ってるのですが、こちらの設定より、ソースコード(アイコン<>がふと言う方がそれ)を追加し、該当箇所を選択肢、ソースコードをクリックするだけでテキストに切り替えなくても<pre><code>がかけちゃいます。
ちょっとした便利昨日ですね。

あとは、基本的にcssやらjs、PHP等のデザインに切り替わりますが、指定することも出来るようです。