問題点
- HTMLとCSSで手書きコーディングしたWebサイトを作るとき、構文ハイライトが難しい
- コードスニペットを読みやすく理解しやすくするために、色で強調したい
- 一般的にはPrismやhighlight.jsのような複雑な構文ハイライトライブラリを使う必要がある
- 外部スクリプトを使わずに手書きでコーディングしたい
OpenType機能を使ってフォント自体に構文ハイライト機能を組み込む
Monaspace Krypton というオープンソースフォントを改変し、各文字の色付きバージョンを含めた- OpenTypeのCOLRテーブルとコンテキスト置換機能を使って、特定の文字列を見つけて置き換える
- その結果、フォント自体に内蔵されたシンプルな構文ハイライターが完成
長所と短所
長所
- 導入が簡単: フォントを読み込み、OpenTypeのCOLR（色）およびCALT（コンテキスト置換）機能を有効にすればよい
- JavaScriptが不要
- CSSテーマが不要
- プレーンテキストと同じくらい高速
<pre> と <code> タグにコードスニペットを追加できる- HTMLソースコードがクリーン
- InDesignのようにOpenType機能をサポートするあらゆる場所で動作
- 保守やアップデートが不要
<textarea> や <input> でも動作
短所
- カラーパレットを変更したり言語サポートを追加したりするなどの修正が必要な場合、フォントファイル自体を修正しなければならない
- OpenTypeをサポートする環境でしか動作しない
- OpenTypeのコンテキスト置換を使ったパターン検出は基本的なもので、正規表現を使うスクリプトとは比較にならない
実際の仕組み
- OpenTypeのCOLRテーブルとコンテキスト置換機能を使用
- COLRテーブルはカラーフォントを可能にする
- コンテキスト置換は隣接する文字を認識して置き換える
- 例: JavaScriptのキーワード
if を見つけて、色付きの派生字形に置き換える
GN⁺のまとめ
- この記事は、手書きでWebサイトをコーディングするときに構文ハイライトを実装する新しい方法を示している
- OpenType機能を活用してフォント自体に構文ハイライトを内蔵することで、JavaScriptやCSSテーマなしでも構文ハイライトを可能にしている
- この方法はシンプルな構文ハイライトには適しているが、複雑な構文ハイライトライブラリと比べると限界がある
- 類似の機能を提供するプロジェクトとしては、Prism、highlight.js などがある
1件のコメント
Hacker Newsのコメント
面白いハックだ
font-feature-settings: "colr", "calt";という設定には意味がないcolr機能タグは OpenType レイアウトテーブルに存在しないcalt機能はデフォルトで有効になっている元のテキストがそのまま保持される
OpenType の専門家ではないので、代替ロジックは改善できるかもしれない
このハックはひどいが驚かされる
素晴らしいハックだ
ページ下部に良いメッセージがある
コードで自動化できそうだ
Chromium ベースのブラウザではバグがある
color: blueと入力するとrだけが強調表示される本当にすごい機能だ
パーサージェネレーターのように動くものが必要そうだ
本当に驚くべき機能だ