pantoken / markdown-it

markdown-it ​

実験的

@pantoken/markdown-it — :icon: コードをインライン SVG としてレンダリングし、単独のカラー値（#03893D、rgb(…)、oklch(…)）をスウォッチとして表示する markdown-it プラグインで、pantoken アイコンセットを使用します。

@pantoken/rehype と @pantoken/react-markdown のパイプラインを markdown-it に移植します。単一のコアルールが各インライントークンのテキスト子要素を辿り、アイコンとカラーのパターンで分割し、マッチ部分を html_inline トークンに置き換えます。アイコンコードはチェーンで解決されます — まずプラグインの rehype リゾルバ、次に明示的な MarkdownItOptions.resolve、そして組み込みの @pantoken/icons セット、つまりブランドアイコンのプラグインは他の場所と同じように合成されます。

出力されるマークアップは他のレンダラ（pantoken-icon、pantoken-color-swatch）と同じクラス名を使用するので、@pantoken/components を読み込むとスタイルが適用されます。レンダリングされた HTML を .pantoken-prose コンテナ（PROSE_CLASS を参照）でラップすると、プロースレイヤーのスタイルも適用されます。

例 ​

ts
import MarkdownIt from "markdown-it";
import { pantokenMarkdownIt } from "@pantoken/markdown-it";

const md = new MarkdownIt().use(pantokenMarkdownIt);
md.render("Save :check: to lock in #03893D.");

インターフェース ​

変数 ​

関数 ​

参照 ​

default ​

名前を変更して pantokenMarkdownIt を再エクスポートします