highlighterを辞めてみた。highlighterを辞めてみた。JavaScript皆様、お盆はゆっくり出来ましたか?ぼくは、相変わらず、実家に帰っておりました。大阪から兵庫に帰ったのですが、いやー大阪に比べたら涼しいのなんので快適に親に甘えてまいりました。highlighter」があります。こちらは、ほぼインストールするだけで使える便利なプラグインです。見た目のデザインは設定画面より、ちょいちょいっと変更するだけでよく、リアルタイムプレビューで現状の状態もみれるので設定も簡単です。なんか、僕のブログではちゃんと動いてくれなかったので、別のものを使うことにしました。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の下辺りに書き込む。</code></pre>でコードを囲めば使えます。これでは拍子抜けですね。いちいち<pre><code>ってかくの面倒ですね。Advanced」を使ってるのですが、こちらの設定より、ソースコード(アイコン<>がふと言う方がそれ)を追加し、該当箇所を選択肢、ソースコードをクリックするだけでテキストに切り替えなくても<pre><code>がかけちゃいます。あとは、基本的にcssやらjs、PHP等のデザインに切り替わりますが、指定することも出来るようです。class="js">...</code></pre>こんな感じでclassを指定すればいいようです。あと、デザインは、用意されており、cssを読み込み直せばいいようです。デザインの参考は公式にデモがあるのでそちらで確認できるようです。公式demoこちらを確認してもらえればと思います。atelier-cave.light.cssatelier-sulphurpool.dark.csscolor-brewer.cssmagula.cssmonokai-sublime.cssなどなどです。まとめいろいろと、プラグインが便利だから、なんでもプラグインでしようとしてきました。普通にjs/cssやら読み込んでやったほうが、簡単で良いときも有りますね。どっちがいいかは、その時その時でちゃんと判断するべきだなって思いました。