シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム

Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ

[cohamucohamu]

CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。

[amd64x64]

DOMから見えない内部データ構造が出来るの危うくないかね。

[teppeis]

[highlight[editor][contenteditable]

[yarumato]

“CSS Custom Highlight APIのブラウザサポート状況：Chrome 105から対応。Custom Highlight APIには制限も。太字やイタリック体には未対応。textareaでは動作しません。テキストを選択するとカラー情報が失われる不具合。”

[prozorec]

firefoxは3年間バグが修正されなくて、プロダクトにはリリースされていない

[daruyanagi]

へぇ、すごいなぁ

[tofu-kun]

知らなかった、これ良さそう