jee said
1. Markdown语法元素演示
1.1 标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
1.2 段落
这是一个普通段落,用于展示文本的基本排版。段落之间会有适当的间距,确保内容清晰易读。
这是第二个段落,展示段落之间的分隔效果。
1.3 文本强调
粗体文本
斜体文本
粗斜体文本
删除线文本
1.4 代码
行内代码:const hello = "world";
// JavaScript代码示例
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Markdown"));# Python代码示例
def greet(name):
return f"Hello, {name}!"
print(greet("Markdown"))<!-- HTML代码示例 -->
<div class="example">
<p>Hello, Markdown!</p>
</div>interface HeaderNavItemProps {
menuName: string;
menuLink: string;
menuIcon: string;
}1.5 引用块
这是一个基本引用块,用于展示引用的文本内容。
多层引用
这是嵌套的引用块,展示引用的层级结构。
更深层次的引用
1.6 列表
1.6.1 无序列表
- 列表项 1
- 列表项 2
- 嵌套列表项 2.1
- 嵌套列表项 2.2
- 列表项 3
1.6.2 有序列表
- 第一项
- 第二项
- 嵌套第一项
- 嵌套第二项
- 第三项
1.6.3 任务列表
- 已完成任务
- 未完成任务
- 另一个已完成任务
- 另一个未完成任务
1.7 表格
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 单元格 1 | 单元格 2 | 单元格 3 |
| 单元格 4 | 单元格 5 | 单元格 6 |
| 单元格 7 | 单元格 8 | 单元格 9 |
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| 左文本 | 中文本 | 右文本 |
| 更多内容 | 居中内容 | 右侧内容 |
| 维度 | Markdown (MD) | MDX |
|---|---|---|
| 核心定义 | 纯文本标记语言,仅支持 Markdown 语法 | Markdown + JSX 的超集,支持 Markdown + 任意 JSX/组件 |
| 运行时能力 | 静态解析,无动态逻辑(纯文本渲染) | 支持动态逻辑(变量、函数、组件渲染、状态) |
| 组件嵌入 | 无法直接嵌入 Astro/Vue/React 组件 | 可直接在文本中嵌入任意框架组件(如 <Button />) |
| 解析依赖 | @astrojs/markdown-remark(纯文本解析) | @astrojs/mdx(需解析 JSX + Markdown) |
| 使用场景 | 纯静态文本内容(文档、博客、说明) | 动态内容(带交互的文档、嵌入组件的内容、需逻辑处理的文本) |
1.8 水平分隔线
1.9 链接
1.10 图片
1.11 脚注
这是一个带有脚注的句子1。
这是另一个带有脚注的句子2。
1.12 数学公式
行内数学公式:
块级数学公式:
1.13 上标和下标
上标: X2
下标: H2O
Xi2
X2i
(Xi2 + Yj2)1/2
总结
本演示文件全面展示了当前Markdown解析器支持的所有Markdown语法元素。通过这份演示,可以清晰了解当前Markdown解析能力的范围,为内容创作提供参考。
支持的核心功能包括:
- 完整的标题层级(1-6级)
- 段落和文本强调(粗体、斜体、删除线)
- 代码块和行内代码(支持语法高亮)
- 引用块和嵌套引用
- 有序列表、无序列表和任务列表
- 表格和对齐方式
- 水平分隔线
- 链接和图片
- 脚注
- 数学公式(行内和块级)
- 上标和下标
在实际使用中,建议遵循支持的语法规范,以确保内容能够正确解析和渲染。