highlight.jsの使い方
こんばんは．loschです．
前回記事でhighlight.jsを簡単に紹介しました． 今回はその導入と詳しい使い方を記事にしたいと思います．
1. highlight.jsの導入
まず，前回記事で書いたようにダウンロードページから，cdnjs，jsdelivr，unpkg のjsコードのいずれかを<head>～</head>内にコピペすればいいです．
しかし，このまま使うとデフォルトで用意されている言語のシンタックスハイライトしか使えません． すなわち，
この画像にある分しか使えません．
そこで，
このようにotherの中にある好きな言語にチェックを入れ，下にある「Download」ボタンをクリックすればダウンロードが始まります．
そしてPCに“highlight.zip”がダウンロードされているはずなので，これを解凍します．
解凍先フォルダの中に“highlight.min.js”というファイルがあると思います．（画像の黄色い線を引いた部分）
このファイルに先ほど選択した言語のシンタックスハイライトの設定が書き込まれています．
Tumblrに適用する場合は
テーマの編集 < HTMLの編集 < 設定画面(歯車マーク) < テーマアセット
に進み，テーマアセットの「ファイルを追加」を押して，先ほどダウンロードした “highlight.min.js”を選択し，ファイルを追加します． するとテーマアセットの中に “highlight.min.js” が追加されると思うので，それをクリックしてみてください．
新たなタブが開かれると思います．このとき，
https://static.tumblr.com/◯◯/◯◯/highlight.min.js
というアドレスがアドレスバーに表示されていると思うので，これを控えておいてください． （ちなみに〇〇の部分はランダムな英数列が与えられています．人によって違います．）
このアドレスに対して，
<script src="https://static.tumblr.com/◯◯/◯◯/highlight.min.js"></script>
と書いて，これを <head>～</head> 内に貼り付ければOKです．
選択した言語が反映されているかの確認として，ブラウザのデベロッパーツールを使います．
私は普段Firefoxを使っているので，Firefoxでの説明をしていきます． （他のブラウザも概ね同様だと思うので，調べてみてください．）
まずブラウザ上でF12キーを押してください．すると，以下の画像のようなのが下に出てくると思います．これがデベロッパーツールです．
コンソールタブを押すと，入力画面が一番下に現れると思うので，ここに
hljs.listLanguages()
と入力してください．
エンターキーを押すと，
このようにリストが展開されるので，先ほど選んだ言語がすべて入っていればOKです．
2.シンタックスハイライトのデザイン
ダウンロードページの cdnjs，jsdelivr，unpkg のjsコードのいずれかを選んだとしましょう．今回は cdnjs を選びます．
このコードの中に，
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
というものがあります．このコードがシンタックスハイライトのデザインを決めるものになります．
このコードの “default” の部分を書き換えれば，デザインを変更することが可能となります．
デザインは highlight.js demo に一覧が載っているので，これを参照すれば良いと思います．
結局，これらをまとめると，
<script src="https://static.tumblr.com/◯◯/◯◯/highlight.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/□□□□.min.css"> <script>hljs.highlightAll();</script>
というコードを <head>～</head> に突っ込むと記事内でシンタックスハイライトが使用可能になります． （ただし， 〇〇の部分はランダムな英数列，□ □ □ □ は好きなデザイン名．）
[Tips] highlight.js の適用方法
基本的にはエディタをHTMLモードにし，記事内のコードを表示したいところで，
<pre><code> [埋め込みたいコード] </code></pre>
と入力すれば使えます． 概ねこれで問題ないはずですが，適用する言語を明示したい場合は
<pre><code class=“[言語名]”> [埋め込みたいコード] </code></pre>
として入力すればOKです．
また，特にHTMLコードに highlight.js を適用したい場合は，一部の記号を以下のように変換してください．
& → &
" → "
' → '
< → <
> → >
