پرش به محتوا

هایلایت کد بدون جاوااسکریپت با Shiki

۲ دقیقه مطالعهshikiperformancemarkdown

رنگ‌آمیزی کد نباید برای کاربر هزینه‌ای داشته باشد. ارسال یک هایلایتر به مرورگر یعنی دانلود موتور گرامر و پردازش دوبارهٔ هر بلوک کد در هر بازدید، برای محتوایی که پس از استقرار هرگز تغییر نمی‌کند.

یک بار در زمان ساخت رنگ‌آمیزی کن

ترفند این است که Shiki را داخل مرحلهٔ کامپایل MDX اجرا کنیم. بدنهٔ مارک‌داون به رشته‌ای از HTML رنگ‌آمیزی‌شده کامپایل می‌شود و کاربر فقط مارکاپ خام دریافت می‌کند:

src/lib/mdx/rehype-shiki.tstypescript
const root = highlighter.codeToHast(source, {
  lang,
  themes: { light: 'github-light', dark: 'github-dark' },
  defaultColor: false,
})

نه highlight.js، نه گرامر WebAssembly، نه جاوااسکریپت تم. باندل برای این قابلیت حتی یک بایت هم سنگین‌تر نمی‌شود.

دو تم بدون رندر دوباره

به‌جای پختن رنگ‌های یک تم در HTML، Shiki متغیرهای CSS را برای هر دو پالت منتشر می‌کند. هر توکن --shiki-light و --shiki-dark را حمل می‌کند و یک قانون ساده آن‌ها را جابه‌جا می‌کند:

src/styles/app.csscss
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

تغییر تم فقط یک کلاس روی <html> است — نه رنگ‌آمیزی دوباره، نه جابه‌جایی چیدمان.

نتیجه کد رنگ‌آمیزی‌شده‌ای است که فوری رندر می‌شود و جابه‌جایی بین تم‌های روشن و تاریک آن رایگان است.