---
url: https://ain.hmgf.hxcn.space/contribution/project-components/code.md
description: 使用 Code 组件展示代码块，支持语言标签、Mermaid 主题、文件路径和一键复制。
---

# Code 组件

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

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

## 显示规则

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

## 基础用法

\<Code
lang="ts"
path="src/components/link-card.ts"

>

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


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

## 使用默认插槽传代码

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

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

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

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

## 支持的语言

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

## Shell 与 root 用法

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

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

### Markdown 原生代码块

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

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

### `Code` 组件写法

```md
<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 的极简主题文章](https://nexmoe.com/zh/posts/mermaid-theme/)、[掘金的主题合集](https://juejin.cn/post/7525324923222818826)，并按 [Mermaid 官方 Theming 文档](https://mermaid.js.org/config/theming.html) 接入。需要注意的是：官方只允许在 `base` 主题上通过 `themeVariables` 做自定义；`handdrawn-pastel` 额外使用了 `look: 'handDrawn'`。

### Markdown 原生渲染

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

```mermaid
flowchart LR
  A[Write] --> B[Build]
  B --> C[Deploy]
```

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

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

```md
<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]`"
/>
```

### 主题预设

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

\<Accordion
type="multiple"
:default-value="\['mermaid-pure-white', 'mermaid-business-soft', 'mermaid-handdrawn-pastel', 'mermaid-tech-ice']"

>

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

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

## 自动换行与自定义强调色

\<Code
lang="json"
path="config/site.json"
:wrap="true"
color="#00a7b7"

>

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


## 隐藏行号与禁用复制

## 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"` |