代码块 #

概述 #

代码块用于展示多行代码，支持语法高亮和行号显示。

基本语法 #

使用三个反引号 #

markdown

代码内容

text

使用四个空格缩进 #

markdown

    代码内容
    每行缩进4个空格

围栏式代码块 #

基本格式 #

使用三个反引号包裹：

markdown

```
function hello() {
    console.log('Hello, World!');
}
```

渲染效果：

text

function hello() {
    console.log('Hello, World!');
}

指定语言 #

在开头的反引号后指定语言：

markdown

```javascript
function hello() {
    console.log('Hello, World!');
}
```

代码块 vs 缩进代码块 #

特性	围栏式	缩进式
语法高亮	支持	不支持
指定语言	支持	不支持
可读性	好	一般
推荐程度	推荐	不推荐

常用语言标识 #

前端语言 #

标识	语言
`javascript` / `js`	JavaScript
`typescript` / `ts`	TypeScript
`html`	HTML
`css`	CSS
`jsx`	JSX
`tsx`	TSX
`vue`	Vue

后端语言 #

标识	语言
`python` / `py`	Python
`java`	Java
`go`	Go
`rust`	Rust
`php`	PHP
`ruby`	Ruby
`c`	C
`cpp`	C++

数据格式 #

标识	格式
`json`	JSON
`xml`	XML
`yaml` / `yml`	YAML
`toml`	TOML
`csv`	CSV

Shell 和配置 #

标识	用途
`bash` / `shell` / `sh`	Shell 脚本
`powershell` / `ps1`	PowerShell
`dockerfile`	Dockerfile
`nginx`	Nginx 配置
`ini`	INI 配置

数据库 #

标识	语言
`sql`	SQL
`mysql`	MySQL
`postgresql` / `pgsql`	PostgreSQL
`mongodb`	MongoDB

其他 #

标识	用途
`markdown` / `md`	Markdown
`text` / `plaintext`	纯文本
`diff`	差异对比
`graphql`	GraphQL
`regex`	正则表达式

代码块中的转义 #

显示反引号 #

当代码中包含三个反引号时，使用更多反引号：

markdown

````markdown
```
代码块中的代码块
```
````

转义示例 #

markdown

```markdown
使用 \``` 创建代码块
```

代码块嵌套 #

使用更多反引号嵌套：

markdown

````javascript
```javascript
const x = 1;
```
````

实际应用 #

安装说明 #

markdown

## 安装

```bash
# 克隆仓库
git clone https://github.com/user/repo.git

# 进入目录
cd repo

# 安装依赖
npm install
```

代码示例 #

markdown

## 使用示例

```javascript
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
```

配置文件 #

markdown

## 配置

创建 `.env` 文件：

```env
NODE_ENV=development
PORT=3000
DATABASE_URL=mongodb://localhost:27017/mydb
```

API 响应 #

markdown

## 响应示例

```json
{
  "code": 200,
  "message": "success",
  "data": {
    "id": 1,
    "name": "John"
  }
}
```

代码块最佳实践 #

1. 始终指定语言 #

markdown

好的：
```javascript
const x = 1;

不好的：

text

const x = 1;

text


### 2. 代码简洁

```markdown
好的：展示关键代码
不好的：粘贴整个文件

3. 添加注释 #

markdown

```javascript
// 获取用户信息
const user = await fetchUser(id);

// 处理数据
const processed = processData(user);

// 返回结果
return processed;
```

4. 代码块前后空行 #

markdown

说明文字...

```javascript
const x = 1;

更多说明…

text


## 常见问题

### 问题1：语言标识不生效

确保语言标识紧跟反引号：

```markdown
正确：```javascript
错误：``` javascript（有空格）

问题2：代码块不闭合 #

确保开头和结尾的反引号数量一致：

markdown

正确：
```javascript
code

错误：

javascript

code

text


### 问题3：缩进问题

代码块内的缩进会保留：

```markdown
```javascript
function test() {
    console.log('Hello');  // 缩进保留
}

text


## 下一步

继续学习 [语法高亮](/docs/markdown/syntax-highlighting)！