shiki-unocss-transformer v0.0.4

shiki-unocss-transformer

A shiki transformer for css to-unocss.

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:

Install

pnpm add -D shiki-unocss-transformer

Usage

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

Explicit Trigger

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
```