createShikiPlugin()

建立一個以 Shiki 為核心的語法高亮外掛。這是一個非同步函式，會初始化 Shiki 高亮器並回傳一個內含 HAST 轉換的 UnifastPlugin。

import { createShikiPlugin } from "@unifast/shiki";

函式簽名

async function createShikiPlugin(
  options?: ShikiTransformerOptions,
): Promise<UnifastPlugin>

參數

options?

Shiki 設定（佈景主題與語言）

屬性型別預設值說明
themesBundledTheme[]["github-dark"]要載入的 Shiki 佈景主題
defaultThemeBundledThemethemes 中的第一個主題渲染時使用的預設主題
langsBundledLanguage[][]要載入的語言。只有已載入的語言會被高亮處理。

用法

import { compile } from "@unifast/node";
import { createShikiPlugin } from "@unifast/shiki";

const shiki = await createShikiPlugin({
  themes: ["github-dark", "github-light"],
  defaultTheme: "github-dark",
  langs: ["typescript", "rust", "json", "html", "css"],
});

const result = compile(md, {
  plugins: [shiki],
});

console.log(result.output);
// Code blocks are highlighted with Shiki-generated <span> elements

範例

單一佈景主題

import { compile } from "@unifast/node";
import { createShikiPlugin } from "@unifast/shiki";

const shiki = await createShikiPlugin({
  themes: ["github-dark"],
  langs: ["typescript"],
});

const result = compile("```ts\nconst x = 1;\n```", {
  plugins: [shiki],
});

console.log(result.output);
// <pre> with Shiki-highlighted <span> elements

多個佈景主題

import { createShikiPlugin } from "@unifast/shiki";

const shiki = await createShikiPlugin({
  themes: ["github-dark", "github-light", "dracula"],
  defaultTheme: "github-dark",
  langs: ["typescript", "rust", "python"],
});

// Use with compile() — defaultTheme is applied to code blocks

搭配其他外掛

import { compile, gfm, frontmatter } from "@unifast/node";
import { createShikiPlugin } from "@unifast/shiki";

const shiki = await createShikiPlugin({
  themes: ["github-dark"],
  langs: ["typescript"],
});

const result = compile(md, {
  plugins: [gfm(), frontmatter(), shiki],
});