こんにちは。
皆さんは、プログラムのソースコードをブログやホームページなどで公開しようと思った時、どうしていますか。
そのまま貼り付けていたりしませんか。
別にそのままでもいいのですが、コードに色付けをしないととて見にくかったり、HTML/JavaScript/CSSなどにおいては、貼り付けたコードがプログラムとして作動してしてしまったり、などという問題点があります。
そこで出てくるのが、この「highlight.js」というものです。
JavaScriptなどを読み込むことで、すぐに使えます。
また、とても軽量です。
特徴をまとめると、こんな感じです。
- CDNがあるので、そのurlを読み込むだけ
（ダウンロード不要） - とても軽量
- ソースコードに自動で色付け（ハイライト）してくれる
- HTMLなども、ただのテキストとして表示できる
- 変に行番号が入らないので、貼り付けたソースコードをコピーするのも簡単
どうでしょうか。
使ってみたくなったのではないでしょうか。
また、マイナーなやつでも、結構使えます。
では、実際に使って「プログラムのハイライト」を実現してみましょう。
今回、僕は、Googleのブログサービス「Blogger」で試してみます。
基本的には、他のブログサービス・ホームページでも使用できますよ。
導入方法
1.テーマを決める
まずは、コードにハイライトして表示する際の配色（テーマ）を決めます。
こちらのサイトにアクセスしてください。
https://highlightjs.org/static/demo/
こういうサイトになっています。
左下の「Styles」というところから、好きなテーマを選択してください。
すると右側に、プレビューが表示されます。
これを見ながら、実際にブログで使用するテーマを決めてください。
僕は、「Atom One Light」というテーマにしました。
明るく、見やすかったからです。
そうしたら、次にこちらのサイトにアクセスしてください。
https://github.com/highlightjs/highlight.js/tree/master/src/styles
この中に、先ほどのテーマのCSSが載っていると思います。
別にダウンロードする必要はありません。
ただ、cssファイル名のスペルを覚えておいてください。
僕の場合は、「atom-one-light.css」というのが、スペルですね。
各自、自分の使用するテーマのcssファイル名を、メモしておいてください。
highlight.js本体を読み込ませる
このライブラリを読み込ませるためのコードを取得していきます。
違うページにまたがって乗っているので、それぞれコピーして合わせていきますが、最終的にできたコードも載せておきますので、そこまでの作業は飛ばしても構いません。
では、やっていきます。
こちらのサイトにアクセスしてください。
「Get Version ～」というボタンをクリックします。
「cdnjs」というところに書いてあるコードをコピーしてください。
そしたら、メモ帳とかに張り付けておきましょう。
次に、ブラウザバックして、さっきのページに戻ります。
「Get Version ～」の下にある、「Usage」というリンクをクリックします。
こんなのが出てくると思います。
一番下の「hljs.initHighlightingOnLoad()」の一行だけコピーして、先ほどのメモ帳の一番下に追加します。
これで一応終わりです。
最終的には、このようなコードになります。
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>ちなみに、linkタグの一番後ろに「/(スラッシュ)」を追加させていただきました。
これがないと、ブログのカスタムHTMLに貼り付ける際、エラーが出たので。
上のコードに変更を加え、テーマを設定する
ここで、先ほど覚えておいた「cssファイル名」の出番です。
ちょうど上のコードのlinkタグの「default」というところを、「cssファイル名」に変えます。
僕の場合、cssのファイル名は「atom-one-light.css」でしたので、最終的なコードは、次のようになります。
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>これで、ブログの設定に貼り付けるコードは完成しました。
実際に、ブログのカスタムHTMLをいじります。
ブログの設定
今回は、Bloggerで行います。
各自のブログサービスで、HTMLを自由にいじる方法は調べてください。
Bloggerの場合、「テーマ」⇒「HTML」と進んだところの、「HTMLの編集」というボタンから、HTMLをカスタマイズできます。
ここで、「</head」の手前あたりに、先ほどできた、最終的なコードを貼り付けます。
これで、保存すれば、設定は、すべて完了です。
あとは、実際に使ってみましょう。
使い方
使うのは、簡単です。
表示させたいプログラムコードを、
<pre><code>
～プログラムコード～
</code></pre>
という感じで囲うだけです。
プログラムを貼り付ける際の注意点なんですが、HTMLやJavascriptなどを貼り付ける場合、エスケープ処理をしないと、Webから、処理される文字となってしまいます。
こちらのサイトで、特殊文字列に変換してから、貼り付けてください。
https://tech-unlimited.com/escape.html
最初に、「プログラムコードをただのテキストとして表示してくれる」みたいなことをいいましたが、少し違いますね。
highlight.jsの機能では、ないです。
だとしても、比較的簡単に扱えるのではないでしょうか。
ぜひ、プログラムをサイトで公開したいときは、使用してみてください。
それでは、さようなら。
また、お会いしましょう。
