代码块
一个带有自动语法高亮、文件名和复制按钮的代码块。
用法
代码块由 ProseCode 组件渲染 Nuxt 内容 并且语法高亮由 Shikiji 完成。
默认情况下，对于语法高亮，material-theme-lighter 和 material-theme-palenight VSCode 主题分别用于亮模式和暗模式。 您可以在您的 nuxt.config.ts 中通过 content.highlight 键更改此设置。
Nuxt UI Pro 覆盖了 ProseCode 组件，以添加一些额外的功能，例如复制按钮、文件名和自动图标。
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
modules: ['@nuxt/ui']
})
```ts
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
modules: ['@nuxt/ui']
})
```
名称
使用 CodeBlock 时，您可以指定一个文件名，该文件名将在代码块顶部显示。
nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
modules: ['@nuxt/ui']
})
```ts [nuxt.config.ts]
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
modules: ['@nuxt/ui']
})
```
图标
指定文件名时，将根据扩展名或名称自动显示图标。
默认情况下，一些图标已经定义，但您可以在您的 app.config.ts 中通过 ui.content.prose.code.icon 键添加更多图标。
export default defineAppConfig({
ui: {
content: {
prose: {
code: {
icon: {
terminal: 'i-ph-terminal-window-duotone'
}
}
}
}
}
})
以下是默认映射
{
'package.json': 'vscode-icons:file-type-node',
'tsconfig.json': 'vscode-icons:file-type-tsconfig',
'.npmrc': 'vscode-icons:file-type-npm',
'.editorconfig': 'vscode-icons:file-type-editorconfig',
'.eslintrc': 'vscode-icons:file-type-eslint',
'.eslintrc.cjs': 'vscode-icons:file-type-eslint',
'.eslintignore': 'vscode-icons:file-type-eslint',
'eslint.config.js': 'vscode-icons:file-type-eslint',
'eslint.config.mjs': 'vscode-icons:file-type-eslint',
'eslint.config.cjs': 'vscode-icons:file-type-eslint',
'.gitignore': 'vscode-icons:file-type-git',
'yarn.lock': 'vscode-icons:file-type-yarn',
'.env': 'vscode-icons:file-type-dotenv',
'.env.example': 'vscode-icons:file-type-dotenv',
'.vscode/settings.json': 'vscode-icons:file-type-vscode',
'nuxt': 'vscode-icons:file-type-nuxt',
'.nuxtrc': 'vscode-icons:file-type-nuxt',
'.nuxtignore': 'vscode-icons:file-type-nuxt',
'nuxt.config.js': 'vscode-icons:file-type-nuxt',
'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
'tailwind.config.js': 'vscode-icons:file-type-tailwind',
'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
vue: 'vscode-icons:file-type-vue',
ts: 'vscode-icons:file-type-typescript',
tsx: 'vscode-icons:file-type-typescript',
mjs: 'vscode-icons:file-type-js',
cjs: 'vscode-icons:file-type-js',
js: 'vscode-icons:file-type-js',
jsx: 'vscode-icons:file-type-js',
md: 'vscode-icons:file-type-markdown',
py: 'vscode-icons:file-type-python',
ico: 'vscode-icons:file-type-favicon',
npm: 'vscode-icons:file-type-npm',
pnpm: 'vscode-icons:file-type-pnpm',
npx: 'vscode-icons:file-type-npm',
yarn: 'vscode-icons:file-type-yarn',
bun: 'vscode-icons:file-type-bun',
yml: 'vscode-icons:file-type-yaml',
terminal: 'i-heroicons-command-line'
}
复制
每个代码块都有一个复制按钮，该按钮会将代码复制到您的剪贴板。 您可以在您的 app.config.ts 中通过 ui.content.prose.code.button.icon 键更改图标。
export default defineAppConfig({
ui: {
content: {
prose: {
code: {
button: {
icon: {
copy: 'i-ph-copy-duotone',
copied: 'i-ph-check-square-duotone'
}
}
}
}
}
}
})