BLOG

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

| JavaScript

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

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

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

実装手順

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

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

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等のデザインに切り替わりますが、指定することも出来るようです。

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

こんな感じでclassを指定すればいいようです。

あと、デザインは、用意されており、cssを読み込み直せばいいようです。
デザインの参考は公式にデモがあるのでそちらで確認できるようです。

公式demo

こちらを確認してもらえればと思います。
atelier-cave.light.css
atelier-sulphurpool.dark.css
color-brewer.css
magula.css
monokai-sublime.css
などなどです。

まとめ

いろいろと、プラグインが便利だから、なんでもプラグインでしようとしてきました。
だけども、普通にjs/cssやら読み込んでやったほうが、簡単で良いときも有りますね。
どっちがいいかは、その時その時でちゃんと判断するべきだなって思いました。