createShikiPlugin()

Создаёт плагин подсветки синтаксиса на основе Shiki. Асинхронная функция, инициализирующая подсветчик Shiki и возвращающая UnifastPlugin с HAST-преобразованием.

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

Сигнатура

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

Параметры

options?

Конфигурация Shiki (темы, языки)

СвойствоТипПо умолчаниюОписание
themesBundledTheme[]["github-dark"]Темы Shiki для загрузки
defaultThemeBundledThemeПервая тема из themesТема по умолчанию для отрисовки
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);
// Блоки кода подсвечиваются элементами <span>, сгенерированными Shiki

Примеры

Одна тема

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> с элементами <span>, подсвеченными через Shiki

Несколько тем

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

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

// Использовать с compile() — defaultTheme применяется к блокам кода

С другими плагинами

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],
});