シンタックス・ハイライト・プラグインhighlight.jsの導入

Bloggerに開設したこのブログに、シンタックス・ハイライト・プラグイン（highlight.js）を導入しました。 --- 僕は、Bloggerにマークダウン・プラグインMarked.jsを導入しています。 投稿時、マークダウン形式で貼り付けたコードブロックについても、シンタックス・ハイライトができるかどうか少し気になったのですが、問題なくできました。 以下、その作業記録です。 <a name='more'></a> --- ## 環境 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - シンタックス・ハイライト・プラグイン：highlight.js(9.15.6) - マークダウン・エディタ：VSCode（1.33.1） - マークダウン拡張機能：Markdown All in One（2.2.0） ## やりたい投稿手順 大まかには、以下のような手順で投稿できるようにしたいと思って、導入しました。 1. VSCode上で、マークダウン形式で投稿テキストを作成する。 2. 作成したテキストを、基本的にコピー＆ペーストで、Bloggerに投稿する。 - Bloggerの投稿作成画面では、HTML形式欄で入力する。 --- ## highlight.js導入手順 「[Matsup's blog：Blogger で highlight.js を使ってみた](http://matsup.blogspot.com/2017/03/blogger-highlighterjs.html)」[1] を参考に、以下の手順で導入しました。 1. highlight.jsプラグインのコードを追加。 1. 「ダッシュボード」-「テーマ」から、「HTMLの編集」ボタンをクリック。 2. HTMLソースのテキストボックス内で、Ctrl+fで検索ボックスを立ち上げて、`</head>`を検索。 3. `</head>`タグの直前に、以下のコードを追加。 ``` html <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> ``` ここで、“Common”に分類されていない言語をハイライトさせたい場合は、言語ごとに個別にスクリプトを読み込むコードを追加する必要があります。[3] ある言語が“Common”に分類されているかどうかは、[ここ](https://highlightjs.org/download/)で確認できます。[4] ハイライトされなかったTeX用にコードを追加したの作業記録は[こちら](https://logospathos-techlog.blogspot.com/2019/04/texblogger.html)です。 4. 「テーマの保存」をクリックして、保存する。 ## 参考 - [1] : [Matsup's blog：Blogger で highlight.js を使ってみた](http://matsup.blogspot.com/2017/03/blogger-highlighterjs.html) - [2] : [コードのハイライト表示用 JS ライブラリ highlight.js の使い方](https://qiita.com/tadnakam/items/99088d78512a20e75ff3) - [3] : [highlight.js: How to use highlight.js](https://highlightjs.org/usage/) - [4] : [highlight.js: Getting highlight.js](https://highlightjs.org/download/) --- ## 今後の課題 * [ ] 参考サイト[1]には、`<pre>`タグや`class`属性の設定、あるいはCSSの設定など記載されているのですが、とりあえず、上の手順だけでうまくいったので、それ以上、深追いしていません。いずれ確認したいと思っています。 * [X] ~~*デフォルトでハイライトの配色が、ちょっとイマイチなのでCSSの設定について、調べていきたいです。*~~ [2019-04-26] - 参考サイト[2]を参考にパレットを「vs.min.css」に変更してみました。 * [X] ~~*TeXのコードブロックがハイライトされない。*~~ [2019-04-27] - [TeX言語用のスクリプトを読み込むコードを追加しました。](https://logospathos-techlog.blogspot.com/2019/04/texblogger.html) --- ## 更新履歴 2019-04-24 新規作成 2019-04-26 パレットの変更 2019-04-27 “Common”に分類されていない言語について説明を追記