Markdown 代码

在 Markdown 中显示代码是非常常见的场景，无论是技术文档、教程还是代码示例，都需要用到代码块的展示。本章将详细介绍 Markdown 中代码的各种用法。

行内代码

基本语法

使用单个反引号 ` 包裹代码：

markdown

这是一段包含 `console.log()` 的文本。

效果：

这是一段包含 console.log() 的文本。

多个词组

markdown

使用 `git commit` 命令提交代码。
在 JavaScript 中使用 `const` 和 `let` 声明变量。

效果：

使用 git commit 命令提交代码。在 JavaScript 中使用 const 和 let 声明变量。

包含特殊字符

反引号内的特殊字符不需要转义：

markdown

使用 `*` 表示乘法。
HTML 标签 `<div>` 是块级元素。

效果：

使用 * 表示乘法。 HTML 标签 <div> 是块级元素。

转义反引号

如果代码本身包含反引号，需要使用双反引号包裹：

markdown

`` 使用 `code` 标记代码 ``

效果：

使用 code 标记代码

代码块

基本代码块

使用三个反引号 ``` 创建代码块：

markdown

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

效果：

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

缩进代码块

使用 4 个空格或 1 个 Tab 缩进也可以创建代码块：

markdown

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

效果：

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

语法高亮

指定语言

在三个反引号后添加语言标识符，可以获得语法高亮效果：

markdown

```python
def greet(name):
    return f"Hello, {name}!"


**效果：**

```python
def greet(name):
    return f"Hello, {name}!"

常见语言标识符

语言	标识符
JavaScript	`javascript` 或 `js`
Python	`python` 或 `py`
Java	`java`
C/C++	`c` 或 `cpp`
Go	`go`
Rust	`rust`
Ruby	`ruby`
PHP	`php`
HTML	`html`
CSS	`css`
SQL	`sql`
Shell/Bash	`bash` 或 `sh`
JSON	`json`
YAML	`yaml`
Markdown	`markdown` 或 `md`

各种语言示例

JavaScript

javascript

const greet = (name) => {
    return `Hello, ${name}!`;
};

console.log(greet("World"));

Python

python

class Person:
    def __init__(self, name):
        self.name = name
    
    def say_hello(self):
        print(f"Hello, I'm {self.name}")

person = Person("Alice")
person.say_hello()

HTML

html

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <h1>欢迎</h1>
    <p>这是一个段落。</p>
</body>
</html>

CSS

css

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

SQL

sql

SELECT 
    id, 
    name, 
    email 
FROM users 
WHERE status = 'active' 
ORDER BY created_at DESC;

JSON

json

{
    "name": "张三",
    "age": 30,
    "skills": ["Python", "JavaScript", "Go"],
    "address": {
        "city": "北京",
        "district": "朝阳区"
    }
}

YAML

yaml

database:
  host: localhost
  port: 5432
  name: myapp
  
server:
  port: 8080
  mode: production
  
features:
  - auth
  - api
  - cache

代码块高级功能

行号

部分编辑器支持显示行号：

markdown

```python {1,3-5}
def hello():
    print("第一行")
    print("第二行")
    print("第三行")
    print("第四行")
    print("第五行")


**效果：**

```python {1,3-5}
def hello():
    print("第一行")
    print("第二行")
    print("第三行")
    print("第四行")
    print("第五行")

代码块标题

markdown

```python title="greet.py"
def greet(name):
    print(f"Hello, {name}!")


### 折叠代码块

```markdown
```python fold
def long_function():
    # 大量代码
    pass


## 特殊字符处理

### 转义反引号

在行内代码中，如果代码包含反引号：

```markdown
使用 `` `code` `` 来标记代码。

效果：

使用 `code` 来标记代码。

使用 HTML 实体

markdown

使用 &lt;div&gt; 创建 div 元素。

效果：

使用 <div> 创建 div 元素。

代码块最佳实践

1. 始终指定语言

markdown

```python
def hello():
    print("Hello")


指定语言可以获得语法高亮和更好的可读性。

### 2. 保持代码简洁

选择最有代表性的代码片段，避免过长的代码块。

### 3. 添加注释

```markdown
```python
# 计算斐波那契数列
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)


### 4. 合理使用缩进

保持一致的代码缩进风格。

### 5. 避免过长的行

```markdown
```python
# 不推荐
result = some_long_function_name(argument1, argument2, argument3, argument4, argument5)

# 推荐
result = some_long_function_name(
    argument1, 
    argument2, 
    argument3
)


## 代码块在文档中的布局

### 段落之间

```markdown
这是一段文字。

```python
print("代码块")

这是另一段文字。


### 在列表中

```markdown
- 项目 1
- 项目 2（包含代码）：
  
  ```python
  def hello():
      print("Hello")

项目 3


**效果：**

- 项目 1
- 项目 2（包含代码）：
  
  ```python
  def hello():
      print("Hello")

项目 3

在引用块中

markdown

> 这是一个引用块：
> 
> ```python
> print("代码在引用中")
> ```

效果：

这是一个引用块：
python
print("代码在引用中")

键盘快捷键

使用 HTML 标签显示键盘快捷键：

html

<kbd>Ctrl</kbd> + <kbd>C</kbd>
<kbd>Cmd</kbd> + <kbd>S</kbd>
<kbd>Shift</kbd> + <kbd>Enter</kbd>

效果：

Ctrl + CCmd + SShift + Enter

代码块的导出和分享

GitHub Gist

将代码分享为 Gist，然后嵌入到 Markdown：

markdown

```js gist:1234567890


### 外部链接

```markdown
查看完整代码：[GitHub 仓库](https://github.com/username/repo)

不同平台的代码支持

GitHub/GitLab

完整支持语法高亮
支持多种语言
自动检测语言

Notion

基本语法高亮
支持常见语言
可以复制代码块

VS Code

使用插件预览 Markdown
完整的语法高亮
支持自定义主题

Typora

实时预览
完整语法高亮
可切换代码主题

实战示例

技术文档

markdown

## 安装依赖

使用 npm 安装必要的包：

```bash
npm install express mongoose cors

配置应用

javascript

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World');
});

app.listen(3000);


### 代码对比

```markdown
### 旧版本

```javascript
function hello(name) {
    return "Hello " + name;
}

新版本

javascript

const hello = (name) => `Hello ${name}`;


## 小结

本章详细介绍了 Markdown 中代码的显示方法：

- **行内代码**：使用单个反引号
- **代码块**：使用三个反引号
- **语法高亮**：通过语言标识符实现
- **高级功能**：行号、标题、折叠等
- **最佳实践**：指定语言、保持简洁、添加注释

掌握代码块的用法，可以让你的技术文档更加专业和易读。

**下一步：** 学习 [Markdown 链接](./links) 的使用方法。

Markdown 代码 ​

行内代码 ​

基本语法 ​

多个词组 ​

包含特殊字符 ​

转义反引号 ​

代码块 ​

基本代码块 ​

缩进代码块 ​

语法高亮 ​

指定语言 ​

常见语言标识符 ​

各种语言示例 ​

JavaScript ​

Python ​

HTML ​

CSS ​

SQL ​

JSON ​

YAML ​

代码块高级功能 ​

行号 ​

代码块标题 ​

使用 HTML 实体 ​

代码块最佳实践 ​

1. 始终指定语言 ​

在引用块中 ​

键盘快捷键 ​

代码块的导出和分享 ​

GitHub Gist ​

不同平台的代码支持 ​

GitHub/GitLab ​

Notion ​

VS Code ​

Typora ​

实战示例 ​

技术文档 ​

配置应用 ​

新版本 ​

Markdown 代码

行内代码

基本语法

多个词组

包含特殊字符

转义反引号

代码块

基本代码块

缩进代码块

语法高亮

指定语言

常见语言标识符

各种语言示例

JavaScript

Python

HTML

CSS

SQL

JSON

YAML

代码块高级功能

行号

代码块标题

使用 HTML 实体

代码块最佳实践

1. 始终指定语言

在引用块中

键盘快捷键

代码块的导出和分享

GitHub Gist

不同平台的代码支持

GitHub/GitLab

Notion

VS Code

Typora

实战示例

技术文档

配置应用

新版本