# 代码块

编写代码示例，并设置代码块的语言。

import ContentEditor from '@/components/editor/ContentEditor.astro';

## 编写代码示例

通过 `/` 插入代码块，在块内编辑代码，通过语言控件设置对应语言。代码块中的文字按代码编辑，不会应用正文的文字格式。

## 可视化编辑

直接编辑代码块，再切换到源码查看语言和元数据。

<ContentEditor content="code-block" />

````markdown
```javascript title="src/editor.ts" frame="code" {1}
const title = '开始使用';
console.log(title);
```
````

## 代码元数据

Starlight 和 Prosefly 使用 `title`、`frame` 和高亮行等 Expressive Code 元数据。Fumadocs 使用自己的元数据语法，包括 `lineNumbers`、`tab` 和 `tab-group`。Generic 保留普通 Markdown 代码围栏，特定 profile 的元数据可以在源码模式中修改。

Prosefly 不会执行示例代码。网站的语法高亮和其他代码处理由网站构建流程完成。绘制图表的代码块见 [Mermaid](/docs/zh-cn/editor/markdown/mermaid/)。