Markdown 代码
Markdown 提供了多种方式来展示代码,从简单的行内代码到复杂的代码块,满足不同场景下的代码展示需求。
行内代码
如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:
`printf()` 函数
显示结果如下:
常见用法示例:
- 函数名:使用
console.log()
输出信息 - 变量名:将值赋给
userName
变量 - 命令行:运行
npm install
安装依赖 - 键盘按键:按
Ctrl+C
复制内容 - 文件名:编辑
index.html
文件
特殊字符转义
当需要在行内代码中显示反引号或其他特殊字符时,需要进行转义处理。
显示反引号的方法:
使用双反引号包围单反引号:
``使用 `反引号` 包围代码``
渲染效果:
使用多个反引号包围:
```包含 `` 双反引号的代码```
渲染效果:
其他特殊字符处理:
- HTML 标签:
<div>
元素 - 数学符号:计算
x + y = z
- 特殊符号:使用
表示空格
代码区块
缩进式代码块
代码区块使用 4 个空格或者一个制表符(Tab 键)。
语法格式:
正常文本段落 这是缩进式代码块 每行前面有四个空格 保持代码的原始格式 继续正常文本
实例如下:
显示结果如下:
三反引号代码块
你也可以用 ``` 包裹一段代码,并指定一种语言(也可以不指定):
``` 多行代码内容 可以包含空行 保持原有缩进 ```
三反引号(```)是最常用的代码块语法,支持语法高亮和多行代码展示。
```javascript $(document).ready(function () { alert('RUNOOB'); }); ```
显示结果如下:
注意事项:
- 缩进式代码块前后需要空行分隔
- 所有代码行必须保持一致的缩进
- 不支持语法高亮
- 在列表中使用时需要8个空格缩进
语言标识和语法高亮
在三反引号后添加语言标识符可以启用语法高亮功能。
常用语言标识符列表:
javascript
/js
- JavaScriptpython
/py
- Pythonhtml
- HTMLcss
- CSSsql
- SQLjson
- JSONxml
- XMLyaml
/yml
- YAMLbash
/shell
- Shell脚本java
- Javacpp
/c++
- C++csharp
/c#
- C#php
- PHPruby
/rb
- Rubygo
- Go语言rust
- Rusttypescript
/ts
- TypeScript
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 渲染器支持显示行号,通过特定的语法或配置实现。
语法示例(部分支持):
```javascript {.line-numbers} function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } console.log(fibonacci(10)); ```
或者使用:
```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}`); ```
代码差异对比
用于显示代码的添加、删除或修改,常用于展示版本控制中的变更。
Diff 语法:
```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 风格的差异显示:
```diff @@ -1,5 +1,8 @@ function greetUser(name) { - console.log("Hello " + name); + if (!name) { + throw new Error("Name is required"); + } + console.log(`Hello, ${name}!`); } ```
语言特定的差异对比:
```javascript // 之前的代码 const oldFunction = () => { var x = 10; // ❌ 使用 var console.log("Value: " + x); // ❌ 字符串拼接 } // 改进后的代码 const newFunction = () => { const x = 10; // ✅ 使用 const console.log(`Value: ${x}`); // ✅ 模板字符串 } ```