はじめに
コードハイライトのライブラリであるhighlight.jsを使ってみる。
適用するのはネット上の、自作ライブラリのコード。
ちょっとしたツールボックス。
つかいかた
ここに詳しく書いてある。
CDNを使おうと思う。
コード全文
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Code Highlight</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/base16/oceanicnext.min.css" /> <!-- パレット -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script> <!-- 生成機 -->
<style>
/* カスタマイズは自由自在。 */
.hljs-comment{
color:aquamarine;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap" rel="stylesheet" />
</head>
<body>
<pre><code class="javascript" id="target-tag">
</code></pre>
<!--<script>hljs.highlightAll();</script>-->
<script src="main.js"></script>
</body>
</html>
async function getText(url){
// text string
const response = await fetch(url);
if(!response.ok){
throw new Error(`response.status: ${response.status}`);
}
const txt = response.text(); // テキストデータが欲しい時はこれ
return txt;
}
getText("https://inaridarkfox4231.github.io/fisceToyBox/fisceToyBox.js").then((res) => {
const codeDom = document.getElementById("target-tag");
res = res.replaceAll('&', '&');
res = res.replaceAll('<', '<');
res = res.replaceAll('>', '>');
res = res.replaceAll('"', '"');
res = res.replaceAll("'", ''');
codeDom.innerHTML = res;
hljs.highlightElement(codeDom);
});
code {
font-family: Inconsolata;
line-height:130%;
font-size:18px;
margin:0;
}
結果（一部）
解説
コードのフォントは人気のInconsolataで、Google fontの一種で、こっちから使える：
テーマはたくさんあり、ここで選ぶことができる：
自分はoceanicnextが気に入ったのでこれを使ってる。demoのうちbase16とあるものは、コードにもあるようにbase16をはさんで指定する。最後にminを付けるのを忘れずに。ここから取ってるらしい：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/base16/oceanicnext.min.css"> <!-- パレット -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script> <!-- 生成機 -->
そのあとスクリプトを埋め込んでいる。このときhljsがグローバルになり、いろいろ呼び出すことができる。
なお、oceanicnextはコメントアウトが見えづらかったのでそこだけカスタマイズさせていただいてる：
<style>
/* カスタマイズは自由自在。 */
.hljs-comment{
color:aquamarine;
}
</style>
直接埋め込んでもいいが、今回は読み込んだファイルを使いたいので、スクリプトでコードを入れてから関数で動的にハイライトを掛けている。
async function getText(url){
// text string
const response = await fetch(url);
if(!response.ok){
throw new Error(`response.status: ${response.status}`);
}
const txt = response.text(); // テキストデータが欲しい時はこれ
return txt;
}
この関数で非同期的にテキストデータを取得できる。jsでも、htmlでも、cssでも、何でも。
これを次のようにプロミスでinnerHTMLにセットして、highlightElementで動的にハイライトする。
getText("https://inaridarkfox4231.github.io/fisceToyBox/fisceToyBox.js").then((res) => {
const codeDom = document.getElementById("target-tag");
res = res.replaceAll('&', '&');
res = res.replaceAll('<', '<');
res = res.replaceAll('>', '>');
res = res.replaceAll('"', '"');
res = res.replaceAll("'", ''');
codeDom.innerHTML = res;
hljs.highlightElement(codeDom);
});
なお、その際にエスケープシーケンスによる置き換え処理を実行している。実はなくてもうまくいくようになっているが、その場合セキュリティエラーを出されてしまう。試しにこれらすべてをコメントアウトすると：
このように変換はうまくいくがエラーを食らう。なのでなるべくなら変換した方がよい。
直接ハイライトする場合
ファイルを読み込まずに直接ハイライトする場合は、普通に書けばいい。
<body>
<pre><code class="javascript" id="target-tag">console.log("hello, world!");
const p = (2 < 3) && (4 > 1);
</code></pre>
<script>hljs.highlightAll();</script>
<!--<script src="main.js"></script>-->
</body>
結果：
この場合もエスケープは不要だが、エスケープしても同じ結果にはなる。
<body>
<pre><code class="javascript" id="target-tag">console.log("hello, world!");
const p = (2 < 3) && (4 > 1);
</code></pre>
<script>hljs.highlightAll();</script>
<!--<script src="main.js"></script>-->
</body>
結果：同じ
なお、当然だがhtmlでこんなことをすればエラーを食らうし、正常な結果にならない。
<body>
<pre><code class="html" id="target-tag"><p>こんにちは！せかい！</p>
</code></pre>
<script>hljs.highlightAll();</script>
<!--<script src="main.js"></script>-->
</body>
結果：
エスケープしましょう。
<body>
<pre><code class="html" id="target-tag"><p>こんにちは！せかい！</p>
</code></pre>
<script>hljs.highlightAll();</script>
<!--<script src="main.js"></script>-->
</body>
結果：
おわりに
コードハイライトにはいろんな方法があるようです。今回はテーマの豊富さからこれを選びました。次の記事は非常に参考になりました。ありがとうございます。
拝読感謝。