highlight.js
<pre><code>...</code></pre>の中身を勝手に構文解析してsyntax highlightしてくれる/icons/javascript.iconpackage 利用方法
CDN
code:cdn.html
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
ただ、公式マニュアルだとhighlightBlock()を使えと指示されている
ESModulesからも使える
code:sample.ts
import {highlight} from 'highlight.js';
Deno(支援)環境で使う方法
今のところJSのみしか使えない
型定義ファイルをうまく生成できない
言語の読み込み
https://esm.sh/highlight.js@11.7.0だとなぜかregisterLanguageがundefinedになって失敗する
手動で必要な言語を読ませる
https://cdn.skypack.dev/highlight.js@11.7.0なら読める
code:sample.js
//hljs.registerLanguage("typescript", typescript);
const res = await fetch(
);
const code = await res.text();
console.log(hljs.highlight(code, { language: "typescript" }).value);
References