CodePreview

GitHub
通过预览和源码展示代码示例，使文档更加清晰。

用法

使用 code-preview 组件包裹任何内容，即可在旁边显示实时预览及其源代码，源代码使用 code 插槽。

行内代码

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

API

属性

属性默认值类型
ui

{ root?: ClassNameValue; preview?: ClassNameValue; code?: ClassNameValue; }

插槽

插槽类型
default

{}

代码

{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codePreview: {
        slots: {
          root: 'my-5',
          preview: 'flex justify-center border border-muted relative p-4 rounded-md',
          code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
        },
        variants: {
          code: {
            true: {
              preview: 'border-b-0 rounded-b-none'
            }
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codePreview: {
            slots: {
              root: 'my-5',
              preview: 'flex justify-center border border-muted relative p-4 rounded-md',
              code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
            },
            variants: {
              code: {
                true: {
                  preview: 'border-b-0 rounded-b-none'
                }
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

CodeGroup

将多个代码示例分组到标签页界面中，方便比较。

CodeTree

可视化文件和文件夹结构，并带有语法高亮的代码。