Dart言語のコードをシンタックスハイライトする方法
当ブログは、ソースコードのシンタックスハイライトにHighlight.jsをCDN経由で使用しています。
先日、Blogにあるdart言語のソースコードがシンタックスハイライトされていないことに気づきました。
どうやら、Dart言語に対応するためには、追加のライブラリが必要だったようです。
補足）現在、Highlight.jsはver11.9.0です。ver11.8.0でDart言語の強化fixがされています。
目次
シンタックスハイライト
シンタックスハイライトとは、プログラミングのコードの各要素に色を付けて見やすくしてくれます。
JavaScriptのライブラリとしては、Highlight.jsやPrism.jsがあります。Shikiもいいみたいですね。
本記事はDart言語の対応を確認しています。
Highlight.jsを今一度試す
さて、公式サイトのUsageを見てみましょう。
As HTML Tags のところですね。CDNの使用方法が書いてあります。
「追加の言語は個別にロードする」と書いてありますね。
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>go.min.jsをdart.min.jsに変更してみましょう。
対象コード全文です。
head部分
<!-- highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/dart.min.js"></script>
<script>
hljs.highlightAll();
</script>
<!-- highlight.js -->本文
<pre><code class="language-dart">
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme Demo',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const MyHomePage(),
);
}
</code></pre>結果
Downloadして使用する方法
ライブラリをダウンロードして使用する場合は、公式サイトで使用する言語を選択してからライブラリをダウンロードしてください。
使用方法は公式のUsage、As HTML Tagsに書かれています。self hostedですね。
Prism.jsとは
こちらもコードをシンタックスハイライトしてくれます。
pre>code内の余計なスペースを削除する機能追加も可能です。
補足）更新が停滞気味かな？
では確認してみましょう。
Usage
公式より使用する言語とプラグインを選択してライブラリをダウンロードする。
head部分
<link href="./prism.css" rel="stylesheet" />
<script src="./prism.js"></script>本文
<pre><code class="language-dart>
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme Demo',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const MyHomePage(),
);
}
</code></pre>結果
highlight.jsよりすこしカラフルですね。
Shiki 美しく強力な構文ハイライトツール
さっき知りました。いい感じですね。
すこしだけ遊んでみましょう。
Usage
一言でまとめると、コードをcodeToHtml()に通せと言っているようです。
では、適当にCDNで実装してみましょう。
Shikiは、Highlight.jsやPrism.jsみたいに簡単実行用メソッドが無いみたいなので自分で実装する必要があるです。
Code
まずはHTMLです。
データ属性（data-*）から値を取得するのが便利そうだったのでこれを使用しています。
<pre><code data-lang="dart" data-theme="github-dark-default">
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme Demo',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const MyHomePage(),
);
}
</code></pre>つづいてCSSです。
私は、”Consolas”がすきなので。
<style>
pre > code {
font-family: Consolas, monospace;
font-size: 0.9rem;
}
</style>JavaScriptです。
preタグ（codeタグ持ちの）をセレクトして、子要素のcodeタグをcodeToHtml()に通す作業をしています。
codeToHtml()は、テキストを返すので、innerHTMLで要素化しています。
ファイル名”run-shiki.js”
import { codeToHtml } from "https://esm.sh/shiki@1.22.2";
function runCode() {
const tags = document.querySelectorAll("pre:has(> code)");
(async () => {
try {
for (const pre of tags) {
const codeElement = pre.querySelector("code");
const lang = codeElement.dataset.lang ?? "javascript";
const theme = codeElement.dataset.theme ?? "github-dark";
const text = codeElement.textContent;
// console.log(`lang: ${lang}, theme: ${theme}`);
try {
const html = await codeToHtml(text, { lang: lang, theme: theme });
const temp = document.createElement("div");
temp.innerHTML = html;
pre.replaceWith(temp.firstChild);
} catch (error) {
console.error(error);
}
}
} catch (error) {
console.error(error);
}
})();
}
window.addEventListener("load", runCode);
head部です
<script type="module" src="./run_shiki.js"></script>はい。なんとか動きましたね！
Shikiは静的サイトなどプリコンパイルで使用することが多いのかな？
まとめ
Shikiはとってもいい感じ。これからも伸びそう。
Highlight.jsは大人しい感じ。簡単に使える。そこそこ更新あり。
Prism.jsはちょっと派手な感じ。簡単に使える。更新停滞気味。プラグインもある。
以上