Skip to content

pantoken / markdown-it

markdown-it

Experimentell

@pantoken/markdown-it — ein markdown-it-Plugin, das :icon:-Codes als inline-SVG rendert und einzelne Farbwerte (#03893D, rgb(…), oklch(…)) als Farbfelder darstellt, wobei das pantoken-Iconset verwendet wird.

Es portiert die @pantoken/rehype- und @pantoken/react-markdown-Pipelines auf markdown-it: Eine einzige Kernregel durchläuft die Text-Kinder jedes Inline-Tokens, teilt sie an Icon- und Farbmustern auf und ersetzt die Treffer durch html_inline-Tokens. Icon-Codes werden über eine Kette aufgelöst — zuerst Plugin-rehype-Resolver, dann eine explizite MarkdownItOptions.resolve und schließlich das eingebaute @pantoken/icons-Set — sodass Marken-Icon-Plugins sich genauso komponieren wie an anderen Stellen.

Das erzeugte Markup verwendet dieselben Klassennamen wie die anderen Renderer (pantoken-icon, pantoken-color-swatch), sodass das Laden von @pantoken/components es stylt. Das gerenderte HTML in einen .pantoken-prose-Container einwickeln (siehe PROSE_CLASS), um ebenfalls die Prosa-Schicht zu übernehmen.

Beispiel

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.");

Schnittstellen

Variablen

Funktionen

Referenzen

default

Benennt um und exportiert neu pantokenMarkdownIt