Inspired by a vscode-plugin To Unocss, it is now updated to UoT, and @shikijs/twoslash that the shiki transformer for TypeScript Twoslash.
So with the shiki-unocss-transformer
, let shikijs support the function of to unocss. As follows:
pnpm add -D shiki-unocss-transformer
This package is a transformer addon to Shiki.
import { codeToHtml } from "shiki";
import { transformerToUnocss } from "shiki-unocss-transformer";
const html = await codeToHtml(`console.log()`, {
lang: "ts",
theme: "vitesse-dark",
transformers: [
transformerToUnocss(), // <-- here
// ...
],
});
For not let shiki-unocss-transformer
to run on every code block. you can set explicitTrigger to true to only run on code blocks with unocss
presented in the codeframe.
import { transformerToUnocss } from "shiki-unocss-transformer";
transformerTwoslash({
explicitTrigger: true, // <--
});
In markdown, you can use the following syntax to trigger unocss:
```css
// this is a normal code block
```
```css unocss
// this will run unocss
```