Code 组件

Code 用于展示代码片段，并支持：

• 按 lang 显示语言标签和配色（窄屏自动缩写）。
• lang="mermaid" 时支持主题预设和源码 / 渲染切换。
• 按 path 显示文件路径。
• 标题栏一键复制代码（统一 Toast 反馈）。
• markdown 原生代码块自动套用同一套样式与复制按钮。

显示规则

1. markdown 原生代码块：语言显示在左侧。
2. Code 未传 path：语言显示在左侧。
3. Code 传入 path：语言显示在复制按钮左侧。
4. 最左侧始终显示当前语言 icon（Iconify）。
5. 竖屏或路径过长（>70）时，语言标签自动切换缩写。

基础用法

src/components/link-card.tsTypeScript

export function createCard(title: string, href: string) { return { title, href } } 

<Code
  lang="ts"
  path="src/components/link-card.ts"
>
export function createCard(title: string, href: string) {
  return { title, href }
}
</Code>

使用默认插槽传代码

scripts/math.pyPython

def add(a: int, b: int) -> int: return a + b 

<Code lang="py" path="scripts/math.py">
def add(a: int, b: int) -> int:
    return a + b
</Code>

markdown 原生代码块（同样样式）

export function createCard(title: string, href: string) {
  return { title, href }
}

```ts
export function createCard(title: string, href: string) {
  return { title, href }
}
```

支持的语言

Plain Text · text   Markdown · md   LaTeX · latex

HTML · html   CSS · css   SCSS · scss   Less · less   JavaScript · js   TypeScript · ts   JSX · jsx   TSX · tsx

Vue · vue   React · react / jsx / tsx   Svelte · svelte   Angular · angular   Astro · astro   jQuery · jquery   Django · django   Flutter · flutter   Mermaid · mermaid

JSON · json   YAML · yaml   TOML · toml   XML · xml   INI · ini   Properties · properties

SQL · sql   PostgreSQL · pgsql / postgresql   MySQL · mysql   MariaDB · mariadb   SQLite · sqlite   PL/SQL · plsql   HiveQL · hive   Squirrel · squirrel

Python · py / cpython   C · c   C++ · cpp   Java · java   Go · go   Rust · rs   PHP · php   Ruby · ruby   Dart · dart   Kotlin · kotlin / kt   Swift · swift   Scala · scala   Lua · lua   Haskell · haskell   OCaml · ocaml   Julia · julia   Perl · perl

MATLAB · matlab   Octave · octave   Fortran · fortran   R · r   SAS · sas   Stata · stata   BASIC · basic   Scheme · scheme   Oz · oz   Pascal · pascal   Haxe · haxe   IDL · idl

Assembly · assembly   Makefile · make / makefile   CMake · cmake   Nginx · nginx   .htaccess · htaccess   HTTP · http / https   HXML · hxml   PGP · pgp   PEG.js · pegjs / pegis   Stylus · stylus   Velocity · velocity   Sequence · sequence

Objective-C · objc / objective-c   Verilog · verilog   SystemVerilog · systemverilog   VHDL · vhdl   Visual Basic · vb / visual basic   VBScript · vbscript

Shell · sh   Bash · bash   Zsh · zsh   Fish · fish   Nushell · nu   CMD · cmd   PowerShell · powershell

Markdown 原生 `mermaid` fence 会直接渲染图表，但不支持单图主题指定，也不支持源码 / 渲染切换。

需要主题、切换和组件级控制时，请使用 `Code lang="mermaid"`。

python → py   rust → rs   shellscript → sh   yml → yaml   postgresql → pgsql   objective-c → objc   ps1 / pwsh → powershell

Shell 与 root 用法

对于 sh、bash、zsh、fish、nu 这类 shell 语言：

• 默认会在每行前显示 $
• 如果需要表示必须使用 root 用户执行，可以写成 <语言>-root
• -root 会额外显示一个 root badge，并把每行前缀切换为 #
• 这些前缀是界面装饰，不会被复制按钮或鼠标拖拽复制进剪贴板

Markdown 原生代码块

apt update
apt install -y nginx
systemctl restart nginx

```bash-root
apt update
apt install -y nginx
systemctl restart nginx
```

Code 组件写法

scripts/bootstrap.zshZshroot

brew update
brew install bun
source ~/.zshrc

<Code
  lang="zsh-root"
  path="scripts/bootstrap.zsh"
  :code="`brew update
brew install bun
source ~/.zshrc`"
/>

Mermaid 渲染与主题

Mermaid 现在分两条能力线：

• Markdown 原生 mermaid fence：直接渲染图表，适合最轻量的文档写法。
• Code lang="mermaid"：支持 mermaidTheme 指定主题预设，支持 mermaidView="code | render" 指定默认视图，并可在“源码 / 渲染”之间切换。

这些主题预设整理自 Nexmoe 的极简主题文章、掘金的主题合集，并按 Mermaid 官方 Theming 文档 接入。需要注意的是：官方只允许在 base 主题上通过 themeVariables 做自定义；handdrawn-pastel 额外使用了 look: 'handDrawn'。

Markdown 原生渲染

Markdown 原生 mermaid fence 会直接渲染为图，而不是普通代码块：

这种写法不支持组件级主题指定，也不支持源码 / 渲染切换。

Code 组件：主题指定与源码 / 渲染切换

docs/diagram/overview.mmdMermaid纯白简约风

flowchart LR
  A[Write] --> B[Build]
  B --> C[Review]
  C --> D[Deploy]

<Code
  lang="mermaid"
  mermaid-theme="pure-white"
  mermaid-view="render"
  path="docs/diagram/overview.mmd"
  :code="`flowchart LR
  A[Write] --> B[Build]
  B --> C[Review]
  C --> D[Deploy]`"
/>

主题预设

下面每个主题都给出真实预览，便于直接对比样式差异。

官方内置

Mermaid

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

官方内置

MermaidNeutral

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

官方内置

MermaidDark

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

官方内置

MermaidForest

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

来源：Nexmoe

Mermaid纯白简约风

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

来源：Nexmoe

Mermaid淡雅商务风

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

来源：掘金

Mermaid马卡龙渐变风

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

来源：掘金

Mermaid手绘彩笔风

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

来源：掘金

Mermaid冰蓝理工风

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

来源：掘金

Mermaid紫气东来梦幻风

flowchart LR
  Client[客户端] --> Gateway{网关}
  Gateway --> ServiceA[服务 A]
  Gateway --> ServiceB[服务 B]
  ServiceA --> DB[(数据库)]
  ServiceB --> DB

如果你只想展示 Mermaid 源码本身，而不是渲染图，可以继续使用 Code 组件的默认行为，或者显式写 mermaid-view="code"：

<Code lang="mermaid" :code="`flowchart LR
  A[Write] --> B[Build]
  B --> C[Deploy]`" />

自动换行与自定义强调色

config/site.jsonJSON

{ "title": "Demo", "description": "A long text for wrapping demo with automatic line wrapping enabled" } 

隐藏行号与禁用复制

TypeScript

const status = 'display-only' console.log(status) 

Props

参数	类型	默认值	说明	示例
lang	string	text	语言标识，会影响标签和强调色。	lang="ts"
path	string	''	显示文件路径。	path="src/utils/math.ts"
title	string	''	未传 path 时可用作标题。	title="示例代码"
code	string	''	代码文本；不传则读取默认插槽。	:code="'const sum = 1 + 2'"
icon	string	''	覆盖默认语言图标。	icon="mdi:code-tags"
wrap	boolean	false	是否自动换行。	:wrap="true"
color	string	''	自定义强调色。	color="#00a7b7"
hideLineNumbers	boolean	false	隐藏左侧行号。	:hide-line-numbers="true"
disableCopy	boolean	false	隐藏复制按钮并禁用复制行为。	:disable-copy="true"
mermaidTheme	string	default	仅 lang="mermaid" 生效，指定 Mermaid 主题预设。	mermaid-theme="tech-ice"
mermaidView	'code' | 'render'	code	仅 lang="mermaid" 生效，指定默认显示源码还是渲染图。	mermaid-view="render"