pantoken / markdown-it

markdown-it ​

ทดลอง

@pantoken/markdown-it — ปลั๊กอินสำหรับ markdown-it ที่เรนเดอร์โค้ด :icon: เป็น SVG แบบอินไลน์ และ ค่าสีที่เป็นเอกเทศ (#03893D, rgb(…), oklch(…)) เป็นสวอทสี โดยใช้ชุดไอคอน pantoken.

มันพอร์ตพายป์ไลน์ @pantoken/rehype และ @pantoken/react-markdown ไปยัง markdown-it: กฎหลักเดียวจะเดินผ่านลูกข้อความแบบอินไลน์ของแต่ละโทเค็น แยกข้อความตามรูปแบบไอคอนและสี แล้วสลับการจับคู่เป็นโทเค็น html_inline. รหัสไอคอนจะถูกแก้ไขผ่านโซ่ของตัวแก้ไข — ตัวแก้ไขของปลั๊กอิน rehype ก่อน จากนั้น MarkdownItOptions.resolve ที่ระบุไว้ แล้วจึงเป็นชุดมาตรฐาน @pantoken/icons — ดังนั้นปลั๊กอินไอคอนของแบรนด์ก็ประกอบกันได้เหมือนกับที่อื่น ๆ.

มาร์กอัปที่สร้างออกมาจะใช้ชื่อคลาสเดียวกันกับ renderer อื่น ๆ (pantoken-icon, pantoken-color-swatch), ดังนั้นการโหลดสไตล์ @pantoken/components จะทำให้มีสไตล์ ครอบ HTML ที่เรนเดอร์ด้วยคอนเทนเนอร์ .pantoken-prose (ดู PROSE_CLASS) เพื่อให้ได้เลเยอร์ prose ด้วย.

ตัวอย่าง ​

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