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을 재내보냅니다