Twoslash Integration

@unocss/twoslash provides twoslash integration for UnoCSS, annotating code blocks with generated CSS output, useful in documentation sites powered by VitePress.

uno.config.ts

import {  } from 'unocss'

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

Installation

npm add @unocss/twoslash

Usage with VitePress

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

Then use twoslash in your fenced code blocks:

<div class=" "></div>

Options

configPath

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

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

preprocess

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

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