Twoslash 集成

🌐 Twoslash Integration

@unocss/twoslash 为 UnoCSS 提供了 twoslash 集成，可以在代码块上标注生成的 CSS 输出，这在使用 VitePress 构建的文档网站中很有用。

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

安装

🌐 Installation

npm add @unocss/twoslash

在 VitePress 中使用

🌐 Usage with VitePress

在你的 .vitepress/config.ts 中：

🌐 In your .vitepress/config.ts:

import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
import { createTwoslasher } from '@unocss/twoslash'
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    codeTransformers: [
      transformerTwoslash({
        langs: ['vue', 'html'],
        twoslasher: createTwoslasher(),
      }),
    ],
  },
})

然后在你的代码块里使用 twoslash：

🌐 Then use twoslash in your fenced code blocks:

<div class="p-4 text-red"></div>

选项

🌐 Options

configPath

你的 UnoCSS 配置文件的路径。如果没有提供，它会自动向上搜索目录树。

🌐 Path to your UnoCSS config file. If not provided, it will search up the directory tree automatically.

createTwoslasher({
  configPath: './my-uno.config.ts',
})

preprocess

发送到 UnoCSS 生成之前的自定义代码转换。这不会影响渲染出来的代码。

🌐 Custom code transform before sending to UnoCSS for generation. This does not affect the rendered code.

createTwoslasher({
  preprocess: code => code.replace(/\/\/.*$/gm, ''),
})