三级标题#

2.2 强调#

代码：

1
*斜体*  或 _斜体_
2
**粗体** 或 __粗体__
3
***粗斜体***

效果：

斜体 或 斜体

粗体 或 粗体

粗斜体

2.3 列表#

无序列表 - 代码：

1
- 项目一
2
- 项目二
3
  - 子项目

无序列表 - 效果：

• 项目一
• 项目二
  • 子项目

有序列表 - 代码：

1
1. 第一项
2
2. 第二项

有序列表 - 效果：

1. 第一项
2. 第二项

2.4 链接和图片#

代码：

1
[百度](https://www.baidu.com)
2

3
![图片描述](./567cd43873b1c3b76126d05f0c59c8e23546640216492036.jpg)

效果：

百度

2.5 代码块#

代码：

1
```python
2
print("Hello Markdown")

1
**效果：**
2

3
```python
4
print("Hello Markdown")

2.6 引用#

代码：

1
> 这是一段引用内容
2
> 可以多行

效果：

这是一段引用内容 可以多行

2.7 表格#

代码：

1
| 语法 | 效果 |
2
|------|------|
3
| *斜体* | 倾斜文字 |
4
| **粗体** | 加粗文字 |

效果：

2.8 任务列表#

代码：

1
- [x] 已完成事项
2
- [ ] 未完成事项

效果：

• 已完成事项
• 未完成事项

2.9 分隔线#

代码：

1
---

效果：

3.1 模拟编辑器框架#

通过 frame="editor" 属性，让代码块显示为代码编辑器外观，并支持自定义文件标题。

代码：

1
console.log('标题属性示例');

效果：

1
console.log('标题属性示例');

3.2 模拟终端框架#

通过 frame="terminal" 属性，让代码块显示为终端窗口外观。

代码：

1
Write-Output "这个有标题!"

效果：

1
Write-Output "这个有标题!"

不设标题的终端：

1
echo "此终端框架没有标题"

3.3 覆盖框架类型#

使用 frame="none" 可以移除框架，只显示纯代码块。

代码：

1
console.log('看，没有框架！');

效果：

1
console.log('看，没有框架！');

3.4 标记整行或行范围#

使用 mark、ins（插入）、del（删除）等属性来高亮指定行。

代码：

1
// 第1行 - 通过行号定位
2
// 第2行 - 此行标记为删除
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行 - 此行标记为插入

效果：

1
// 第1行 - 通过行号定位
2
// 第2行 - 此行标记为删除
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行 - 此行标记为插入

标记行范围：

1
// 第1行 - 通过行号定位
2
// 第2行 - 此行标记为删除
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行 - 范围 "5-6" 标记为插入
6
// 第6行 - 范围 "5-6" 标记为插入

3.5 为行标记添加标签#

使用 mark 属性时，可以同时添加自定义标签文字。

代码：

1
// 这一行会有一个"可折叠"标签
2
// 这一行没有标签
3
console.log('正常工作');

3.6 使用类似 Diff 的语法#

使用 + 和 - 符号直观标记新增或删除的行。

代码：

1
此行将标记为已删除
2
此行将标记为已插入
3
这是常规行

效果：

1
此行将标记为已删除
2
此行将标记为已插入
3
这是常规行

结合语法高亮：

1
// 整个块都会以 JavaScript 高亮显示
2
- console.log('要删除的旧代码');
3
+ console.log('新的闪亮代码！');

3.7 标记行内的单独文本#

使用 mark 属性配合正则表达式，高亮行内的特定单词。

代码：

1
function demo() {
2
  // 标记行内的任何给定文本
3
  return '支持给定文本的多个匹配项';
4
}

效果：

1
function demo() {
2
  // 标记行内的任何给定文本
3
  return '支持给定文本的多个匹配项';
4
}

3.8 自动换行#

使用 wrap 属性控制长代码是否自动换行。

开启换行（wrap=true）：

1
// 这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间';
4
}

关闭换行（wrap=false）：

1
// 这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间';
4
}

3.9 可折叠部分#

使用 collapse 属性将长代码或样板代码折叠起来。

代码：

1
// 所有这些样板设置代码将被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate';
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate';
4

5
// 直到块末尾的所有代码将再次被折叠
6
function main() {
7
  console.log('实际业务代码');
8
}

效果：

1
// 所有这些样板设置代码将被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate';
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate';
4

5
// 直到块末尾的所有代码将再次被折叠
6
function main() {
7
  console.log('实际业务代码');
8
}

3.10 显示行号#

使用 showLineNumbers 属性开启行号显示。

代码：

1
// 此代码块将显示行号
2
console.log('来自第2行的问候！');
3
console.log('我在第3行');

效果：

1
// 此代码块将显示行号
2
console.log('来自第2行的问候！');
3
console.log('我在第3行');

更改起始行号：

1
// 此行显示为第5行
2
console.log('来自第6行的问候！');

3.11 如何启用 Expressive Code#

Expressive Code 是 Astro 生态的插件。如果你的博客基于 Astro 或 Starlight，可以按以下步骤集成：

1. 安装：

1
npm install expressive-code

2. 配置（astro.config.mjs）：

1
import { defineConfig } from 'astro/config';
2
import expressiveCode from 'expressive-code';
3

4
export default defineConfig({
5
  integrations: [expressiveCode()],
6
});

3. 使用：

之后在 Markdown 或 MDX 文件中，即可通过上述语法使用所有功能。

更详细的安装与配置选项，建议查阅 Expressive Code 官方文档。

Markdown 基础语法#

本文中 Markdown 基础语法部分参考自以下官方文档和资料：

1. Microsoft Learn - Markdown 是什么？

   • 说明：Markdown 基础语法官方教程，涵盖标题、强调、列表、链接、代码块、表格、任务列表等
   • 链接：https://learn.microsoft.com/zh-cn/training/modules/communicate-using-markdown/2-what-is-markdown

2. Microsoft Learn - Markdown 最佳做法

   • 说明：Markdown 编写规范与最佳实践，包括标题规则、列表格式、链接规范等
   • 链接：https://learn.microsoft.com/zh-cn/powershell/scripting/community/contributing/general-markdown

3. 阿里云文档中心 - Markdown 使用指南

   • 说明：Markdown 基本语法与使用示例，包含标题、强调、列表、链接、图片、表格、任务列表等
   • 链接：https://help.aliyun.com/zh/mobi/markdown-usage-guide

4. 阿里云开发者社区 - MarkDown 语法手册

   • 说明：完整的 Markdown 语法整理，涵盖斜体粗体、标题、超链接、锚点、列表、引用、代码等
   • 链接：https://developer.aliyun.com/article/75499

5. 腾讯云开发者社区 - Markdown简要语法规则

   • 说明：Markdown 常用语法速查
   • 链接：https://cloud.tencent.cn/developer/article/2563180

6. 百度开发者中心 - Markdown中如何添加参考文献和引用

   • 说明：Markdown 中添加引用和参考文献的方法
   • 链接：https://developer.baidu.com/article/details/2970779

Expressive Code 扩展功能#

本文中 Expressive Code 部分参考自以下官方文档：

7. Expressive Code 官方文档 - Text & Line Markers

   • 说明：行标记与文本标记功能的详细用法
   • 链接：https://expressive-code.com/key-features/text-markers/

8. Expressive Code 官方文档 - Editor & Terminal Frames

   • 说明：编辑器框架与终端框架功能的详细用法
   • 链接：https://expressive-code.com/key-features/frames/

9. Expressive Code 官方文档 - Configuration

   • 说明：配置 Expressive Code 的方式与选项
   • 链接：https://expressive-code.com/reference/configuration/

10. Expressive Code GitHub 仓库

    • 说明：项目源码、贡献指南、包结构说明
    • 链接：https://github.com/expressive-code/expressive-code

11. @expressive-code/core - npm 包

    • 说明：Expressive Code 核心引擎的安装与使用示例
    • 链接：https://www.npmjs.com/package/@expressive-code/core

扩展阅读#

• Expressive Code 官方文档首页：https://expressive-code.com/
• Astro 集成文档：https://docs.astro.build/en/guides/integrations-guide/expressive-code/
• 《了不起的 Markdown》- 毕小朋著，电子工业出版社，2025
  • 说明：Markdown 标准语法与扩展技巧，从基础写作到智能知识管理的完整指南