**組み込みシンタックスハイライト機能付きフォント(2024)**

2025/12/23 19:28

**組み込みシンタックスハイライト機能付きフォント(2024)**

RSS: https://news.ycombinator.com/rss

要約

Japanese Translation:

## Summary
この記事では、COLRテーブルとコンテキスト別代替(contextual alternates)を利用して、OpenTypeフォントに直接構文ハイライト機能を埋め込む方法を紹介しています。これにより、コードスニペットはJavaScriptやCSSテーマなしでレンダリングできます。  
改変された Monaspace Krypton フォント(`FontWithASyntaxHighlighter-Regular.woff2`)には、キーワード文字を色付きバリアントへ置き換えるチェーン置換(ALT_SUBS)によるカラ―グリフとルックアップテーブルが含まれています。コメントは有限状態機械(finite‑state‑machine)スタイルのルックアップで処理され、CSS/HTML の関数やタグは「ユニバーサル」ルックアップ(`CssParamCalt`)を使って最大25文字までの名前と `(` を一致させる代替グリフクラスでハイライトされます。  

フォントには niutech によって追加された 2 つのカラーテーマ(Night Owl と Light Owl)が含まれています。テーマを切り替えるには、glyphs ファイルを編集し `fontmake` で再構築する必要があります。  
使用方法は簡単です。フォントを読み込むために次の CSS を追加します。
```css
@font-face { font-family:'FontWithASyntaxHighlighter'; src:url('/FontWithASyntaxHighlighter-Regular.woff2') format('woff2'); }
code{font-family:"FontWithASyntaxHighlighter",monospace;}

これにより

<pre>
<code>
<textarea>
、および
<input>
要素で動作し、高速レンダリングとクリーンな HTML を提供し、約 94 % のブラウザ互換性を実現します。

メリット: JavaScript 不要、CSS オーバーライドによるテーマ変更が可能、幅広いブラウザでの互換性。
デメリット: OpenType 対応環境に限定され、フォント編集が必要、基本的なパターンマッチング(正規表現非対応)、複数行ハイライト不可、手動改行でコメント/文字列ルールが崩れる。

この技術はすでに Holograph、@celine/celine、Shaders art、Mdit、構文ハイライト付き textarea コンポーネント、および OpenType TEX ハイライターなどのプロジェクトで使用されています。将来的には harfbuzz‑wasm を用いた実際のパーサーにルックアップ規則を置き換えることで現在の制限を解消できる可能性があります。

Monaspace のソースは SIL v1.1 ライセンス下で配布され、コード例は MIT ライセンスです。小型 sandbox ウェブコンポーネントは GitHub (

https://github.com/hlotvonen/tinybox
) で公開されています。

本文

手書きウェブサイトでの構文ハイライト


問題点

フレームワークやジェネレーター、DOM 操作スクリプトを使わずにウェブサイトを手書きする場合、最も難しい部分は コードスニペットの構文ハイライト です。
典型的な解決策としては Prism や highlight.js のような JavaScript ライブラリがあり、これらはコードを走査して

<span>
タグに CSS クラスを付与します。しかし、その分余計な複雑さとボリュームが増えてしまいます。


アイデア:フォントベースの構文ハイライト

JavaScript でマークアップを注入する代わりに、色付き文字列を カスタムフォント に埋め込む方法です。

  1. COLR テーブル – 各文字ごとに色付きグリフを作成。
  2. コンテキストオルタネート (calt) – 文字列(例:キーワード)をその色付きバージョンで置き換え。

結果として

<pre><code>
内はプレーンテキストのままで、JS は不要。ハイライトできるフォントだけが必要です。


動作原理

機能目的
COLR テーブル各グリフの複数色バージョンを保持。
コンテキストオルタネート周囲文字に応じてグリフを置換(例:
if
i.alt2 f.alt2
)。

キーワード if のハイライト例

sub i' f by i.alt2;
sub i.alt2 f' by f.alt2;

キーワード代替テーブル

ALT_SUBS
で各文字を色付き対応に置換。個別キーワード(例:
console
,
function
)はこのテーブルから構築されます。


より複雑なシンタックスへの対処

構文アプローチ
CSS/HTML タグと属性「長い未知長」ルールを使用:許可された文字クラスを最長名まで繰り返し、トリガー(例
(
)で終了。
コメント/文字列開始デリミタから閉じデリミタまでの範囲を色付けする有限状態機械風ルックアップ。

利点

  • JavaScript 不要 – 純粋な CSS + フォントで実現。
  • 高速レンダリング – テキストエンジンが処理。
  • マークアップがクリーン
    <pre><code>
    内に
    <span>
    を挿入せず。
  • テーマ変更容易
    @override-colors
    で色を上書き(約 94 % のブラウザ対応)。
  • OpenType 対応環境ならどこでも動作 – InDesign、Web、さらには
    <textarea>
    /
    <input>
    まで。
  • 軽量 – ライブラリファイルは不要。

欠点

制限詳細
フォント編集が必要新しい言語やスタイルを追加する場合、フォントを再構築。
OpenType サポート必須PowerPoint など一部プログラムは COLR/calt を非対応。
パターンマッチング制限正規表現は使えず、単純なコンテキストルールのみ。
複数行トークン長いコメントや文字列が改行で途切れるとハイライトが崩れる。
完全解析不可エッジケースでは正しく色付けされない可能性あり。

テーマのカスタマイズ

  1. FontWithASyntaxHighlighter.glyphs
    (112〜120 行)でパレット値を変更。
  2. fontmake
    で再構築。
  3. CSS で色を上書き:
@override-colors {
  --colr-0: #ff8c00; /* 例 */
}

代替ビルトインテーマ

GitHub ページに Night Owl と Light Owl のテーマが用意されています。


フォントの使用方法

<link rel="preload" href="/FontWithASyntaxHighlighter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'FontWithASyntaxHighlighter';
    src: url('/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
  }
  code { font-family: "FontWithASyntaxHighlighter", monospace; }
</style>

これで

<pre><code>
ブロックが自動的にハイライト表示されます。


フォントを利用したプロジェクト

  • Holograph(ビジュアルコーディングツール)
  • @celine/celine(リアクティブ HTML ノートブック)
  • 純 CSS で作るシェーダーアート
  • Mdit(Markdown プレビュー)
  • Tinybox ウェブコンポーネント(ハイライト付き textarea)

今後の展望

  • Harfbuzz‑wasm:実際のパーサを用いて完全な正確性を目指す。
  • より強力な状態機械:複数行トークンを堅牢に処理。

ライセンスとリソース

アイテムライセンス
オリジナル MonaSpace フォントSIL Open Font License v1.1
コード例 / Tinybox コンポーネントMIT
  • GitHub に UFO、Glyphs ソースファイルを公開
  • fontmake
    でフォントビルド
  • OpenType Cookbook と機能ファイル仕様

お問い合わせ・フィードバック

E‑mail: hlotvonen@gmail.com
Mastodon: @hlotvonen

フォントを使ったアイデア、改善提案、あるいはプロジェクトでの利用例があればぜひご連絡ください!

同じ日のほかのニュース

一覧に戻る →

2025/12/24 2:33

ファブリス・ベルラドが MicroQuickJS をリリース

## Japanese Translation: GitHubの最新オファリングは、AI駆動のコード作成、統合開発ワークフロー、および組み込みセキュリティを一つの体験に融合した統一プラットフォームです。 - **AIツール**:CopilotとSparkは開発者がより高品質なコードを書き、プロンプトを管理し、外部サービスへ接続するのを支援します。 - **ワークフロー**:Actionsは任意のワークフローを自動化し、Codespacesは即時にクラウド開発環境を提供します。Issues、Plans、およびCode Reviewはチームが作業を追跡し変更点をレビューできるようにし、すべて単一パイプライン内でハンドオフを減らします。 - **セキュリティ**:Advanced Securityはビルド時に脆弱性をスキャンし、シークレット保護は認証情報の漏洩を事前に防止します。 - **対象ユーザー**:エンタープライズから中小チーム、スタートアップ、非営利団体まで、アプリモダナイゼーション、DevSecOps、DevOps、およびCI/CDなどのユースケースで利用可能です。 - **対応業界**:ヘルスケア、金融サービス、製造、政府機関その他多数。 - **追加リソース**:ドキュメント、ブログ、変更履歴、マーケットプレイス、イベント/ウェビナー、電子書籍/レポート、ビジネスインサイト、スキルトレーニング、サポート、コミュニティフォーラム、Trust Center、およびパートナープログラムがすべて利用可能で、チームの成功を支援します。 - **エンタープライズソリューション**:GitHub Enterprise PlatformにはAdvanced Security、Copilot for Business、プレミアムサポート、24/7 エンタープライズレベルサービスなどのAI駆動開発プラットフォームと追加機能が含まれ、それぞれ階層化された価格モデルで提供されます。 これらの機能を組み合わせることで、あらゆる規模の組織においてコード生成をより迅速かつ安全に行い、ワークフローを効率化します。

2025/12/24 6:54

**X‑ray:PDF 文書における不適切な赤字消去(レダクション)を検出するための Python ライブラリ**

## Japanese Translation: --- ## Summary x‑rayは、PDF文書内の不適切な赤字(黒い四角形が背後にあるテキストを完全に覆えていない)を自動で検出するPythonライブラリです。PyMuPDFでPDFをスキャンし、四角形の形状を特定してページコンテンツ上に重ね合わせ、各形状が実際に隠された情報を遮蔽しているかどうかをテストします。不適切な赤字はJSON(またはPython辞書)として報告され、ページ番号、境界ボックス、および隠されたテキストがリスト化されます。 ### Installation ```bash uv add x-ray # 既存のuvプロジェクトに追加 pip install xray # 標準的なpipインストール ``` インストールせずに実行することも可能です: ```bash uvx --from x-ray xray <PDF_URL> ``` ### Usage *コマンドライン:* ```bash xray path/to/file.pdf xray https://free.law/pdf/example.pdf # バッチURL cat urls.txt | xargs -n 1 xray ``` *Python import:* ```python import xray bad_redactions = xray.inspect("some/path/to/file.pdf") # `inspect` は str、pathlib.Path、URL(https://)、または PDF コンテンツの bytes を受け取ります。 ``` ### Output このツールは、ページ番号をキーとし、不適切な赤字オブジェクトのリストを値とするJSONを出力します。各オブジェクトには `bbox` タプルと隠された `text` が含まれます。モジュールとして使用した場合、同等のPython辞書が返されます。 ### Project context - Free Law Projectで数百万件のPDFを監査し、法的透明性を確保するために使用されています。 - GitHub上でオープンソース化されており、貢献にはCLAへの署名が必要で、issues経由で管理されます。 - リリースはGitHub Actionsで自動化されており、手動リリースでは `CHANGES.md`、`pyproject.toml` の更新、タグ付け、およびPoetryによる公開を行います。 - BSDライセンス(許諾型)で配布されています。 x‑rayの軽量なインストールと明確なレポート機能は、法務テック企業や規制当局、オープンデータイニシアチブが不備のある赤字を迅速に特定し、コンプライアンスと透明性を維持するのに役立ちます。

2025/12/24 4:35

テレンス・マリック『Disciples』

## Japanese Translation: テレンス・マリックの独特な美学―長いモンタージュ、自然光、詩的ナレーション、そして従来の物語構造への拒否――は、そのスタイルを直接模倣せずに採用する新しい映画作家たちの波を呼び起こしました。 代表例としてラメル・ロス監督の『ニッケル・ボーイズ』(2024年)が挙げられます。この作品はコールソン・ホワイトヘッド小説の改編で、ベストピクチャー賞ノミネートを獲得しました。ロスはマリックの『The Tree of Life』に触発され、その制作に関わったプロデューサーの一人が手助けしたといいます。彼は監督のアプローチを第一人称視点と断片的な詩性へと翻訳し、没入型の神話的物語を創造していますが、それでも独自性を保っています。 他の現代映画監督――クロエ・ザオ(『ノマドランド』)、クリント・ベンツリー(『Train Dreams』)、デイヴィッド・ゴードン・グリーン(『ジョージ・ワシントン』)、そしてローラ・ダン――はマリックの視覚言語を響かせますが、表面的な模倣を避けるために自らの感性と融合させる必要があります。A.J. エドワーズ(『The Better Angels』)やデイヴィッド・ロウリー(『Ain’t Them Bodies Saints』)による試みは、スタイルフレームワーク内で真の人間性を捉える難しさを示しています。 マリックのキャリアは、『Badlands』と『Days of Heaven』という初期叙事詩から始まり、20年間の休止期間を経て、『The Thin Red Line』『The New World』『The Tree of Life』などの後期作品へと進化しました。彼の作品は常に精神性・自然・人間存在を探求しつつ、批評家から高い評価を受ける一方で、ボックスオフィスでは稀にしかヒットしません。マリックの総合的な目標――失われた精神性とアメリカ映画を再接続すること――は、芸術的解放とハリウッドの従来の物語期待との間で緊張を生み出します。 この記事では、マリックの美学と制作手法が多くの人々にインスピレーションを与えている一方で、本当の影響力は表面的な技術を単純に模倣するのではなく、それらの要素を自分自身の物語ビジョンへと翻訳することにあると主張しています。

**組み込みシンタックスハイライト機能付きフォント(2024)** | そっか~ニュース