Markdown 代码

Markdown 提供了多种方式来展示代码，从简单的行内代码到复杂的代码块，满足不同场景下的代码展示需求。

行内代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：

markdown

`printf()` 函数

显示效果：

printf() 函数

常见用法示例：

函数名：使用 console.log() 输出信息
变量名：将值赋给 userName 变量
命令行：运行 npm install 安装依赖
键盘按键：按 Ctrl+C 复制内容
文件名：编辑 index.html 文件

显示效果：

函数名：使用 console.log() 输出信息
变量名：将值赋给 userName 变量
命令行：运行 npm install 安装依赖
键盘按键：按 Ctrl+C 复制内容
文件名：编辑 index.html 文件

特殊字符转义

当需要在行内代码中显示反引号或其他特殊字符时，需要进行转义处理。

显示反引号的方法：

使用双反引号包围单反引号：

markdown

``使用 `反引号` 包围代码``

显示效果：

使用 `反引号` 包围代码

使用多个反引号包围：

markdown

```包含 `` 双反引号的代码```

显示效果：

包含 `` 双反引号的代码

其他特殊字符处理：

HTML 标签：<div> 元素
数学符号：计算 x + y = z
特殊符号：使用表示空格

代码区块

缩进式代码块

代码区块使用 4 个空格或者一个制表符（Tab 键）。

语法格式：

markdown

正常文本段落

    这是缩进式代码块
    每行前面有四个空格
    保持代码的原始格式
    
继续正常文本

显示效果：

正常文本段落

这是缩进式代码块
每行前面有四个空格
保持代码的原始格式

继续正常文本

实例如下：

markdown

    '<?php'
    echo "Hello World!";
    '?>'

显示效果：

<?php
echo "Hello World!";
?>

三反引号代码块

你也可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定）：

markdown

    ```
    多行代码内容
    可以包含空行
    保持原有缩进
    ```

显示效果：

多行代码内容
可以包含空行
保持原有缩进

三反引号（```）是最常用的代码块语法，支持语法高亮和多行代码展示。

markdown

    ```javascript
    $(document).ready(function () {
        alert('RUNOOB');
    });
    ```

显示效果：

javascript

$(document).ready(function () {
    alert('RUNOOB');
});

注意事项：

缩进式代码块前后需要空行分隔
所有代码行必须保持一致的缩进
不支持语法高亮
在列表中使用时需要8个空格缩进

语言标识和语法高亮

在三反引号后添加语言标识符可以启用语法高亮功能。

常用语言标识符列表：

javascript / js - JavaScript
python / py - Python
html - HTML
css - CSS
sql - SQL
json - JSON
xml - XML
yaml / yml - YAML
bash / shell - Shell脚本
java - Java
cpp / c++ - C++
csharp / c# - C#
php - PHP
ruby / rb - Ruby
go - Go语言
rust - Rust
typescript / ts - TypeScript

JavaScript:

markdown

    ```javascript
    const users = [
        { name: "Alice", age: 25 },
        { name: "Bob", age: 30 }
    ];
    
    const adults = users.filter(user => user.age >= 18);
    console.log(adults);
    ```

Python:

markdown

    ```python
    def calculate_area(radius):
        """计算圆的面积"""
        import math
        return math.pi * radius ** 2
    
    # 使用函数
    area = calculate_area(5)
    print(f"圆的面积是: {area:.2f}")
    ```

SQL:

markdown

    ```sql
    SELECT u.name, u.email, COUNT(o.id) as order_count
    FROM users u
    LEFT JOIN orders o ON u.id = o.user_id
    WHERE u.created_at >= '2024-01-01'
    GROUP BY u.id, u.name, u.email
    ORDER BY order_count DESC
    LIMIT 10;
    ```

显示效果：

JavaScript:

javascript

const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);

Python:

python

def calculate_area(radius):
    """计算圆的面积"""
    import math
    return math.pi * radius ** 2

# 使用函数
area = calculate_area(5)
print(f"圆的面积是: {area:.2f}")

SQL:

sql

SELECT u.name, u.email, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.name, u.email
ORDER BY order_count DESC
LIMIT 10;

代码块的高级特性

行号显示

某些 Markdown 渲染器支持显示行号，通过特定的语法或配置实现。 语法示例（部分支持）：

markdown

    ```javascript {.line-numbers}
    function fibonacci(n) {
        if (n <= 1) return n;
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
    
    console.log(fibonacci(10));
    ```

显示效果：

javascript

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));

或者使用：

markdown

    ```javascript showLineNumbers
    const numbers = [1, 2, 3, 4, 5];
    const doubled = numbers.map(x => x * 2);
    const sum = doubled.reduce((a, b) => a + b, 0);
    console.log(`总和: ${sum}`);
    ```

显示效果：

javascript

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = doubled.reduce((a, b) => a + b, 0);
console.log(`总和: ${sum}`);

代码差异对比

用于显示代码的添加、删除或修改，常用于展示版本控制中的变更。

Diff 语法：

markdown

    ```diff
    function calculateTotal(items) {
    -   let total = 0;
    +   let total = 0.0;
        
        for (let item of items) {
    -       total += item.price;
    +       total += parseFloat(item.price);
        }
        
    +   // 保留两位小数
    +   total = Math.round(total * 100) / 100;
        return total;
    }
    ```

显示效果：

diff

function calculateTotal(items) {
-   let total = 0;
+   let total = 0.0;
    
    for (let item of items) {
-       total += item.price;
+       total += parseFloat(item.price);
    }
    
+   // 保留两位小数
+   total = Math.round(total * 100) / 100;
    return total;
}

Git 风格的差异显示：

markdown

    ```diff
    @@ -1,5 +1,8 @@
     function greetUser(name) {
    -    console.log("Hello " + name);
    +    if (!name) {
    +        throw new Error("Name is required");
    +    }
    +    console.log(`Hello, ${name}!`);
     }
    ```

显示效果：

diff

@@ -1,5 +1,8 @@
 function greetUser(name) {
-    console.log("Hello " + name);
+    if (!name) {
+        throw new Error("Name is required");
+    }
+    console.log(`Hello, ${name}!`);
 }

语言特定的差异对比：

markdown

    ```javascript
    // 之前的代码
    const oldFunction = () => {
        var x = 10;  // &#x274c; 使用 var
        console.log("Value: " + x);  // &#x274c; 字符串拼接
    }
    
    // 改进后的代码  
    const newFunction = () => {
        const x = 10;  // &#x2705; 使用 const
        console.log(`Value: ${x}`);  // &#x2705; 模板字符串
    }
    ```

显示效果：

javascript

// 之前的代码
const oldFunction = () => {
    var x = 10;  // &#x274c; 使用 var
    console.log("Value: " + x);  // &#x274c; 字符串拼接
}

// 改进后的代码  
const newFunction = () => {
    const x = 10;  // &#x2705; 使用 const
    console.log(`Value: ${x}`);  // &#x2705; 模板字符串
}

Markdown 代码 ​

行内代码 ​

常见用法示例： ​

特殊字符转义 ​

使用双反引号包围单反引号： ​

使用多个反引号包围： ​

其他特殊字符处理： ​

代码区块 ​

缩进式代码块 ​

语法格式： ​

实例如下： ​

三反引号代码块 ​

注意事项： ​

语言标识和语法高亮 ​

常用语言标识符列表： ​

JavaScript: ​

Python: ​

SQL: ​

代码块的高级特性 ​

行号显示 ​

代码差异对比 ​

Diff 语法： ​

Git 风格的差异显示： ​

语言特定的差异对比： ​

Markdown 代码

行内代码

常见用法示例：

特殊字符转义

使用双反引号包围单反引号：

使用多个反引号包围：

其他特殊字符处理：

代码区块

缩进式代码块

语法格式：

实例如下：

三反引号代码块

注意事项：

语言标识和语法高亮

常用语言标识符列表：

JavaScript:

Python:

SQL:

代码块的高级特性

行号显示

代码差异对比

Diff 语法：

Git 风格的差异显示：

语言特定的差异对比：