jee said

Markdown语法全面演示

unclejee & AI
1460 words
8min read
Markdown语法全面演示

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. 第一项
  2. 第二项
    1. 嵌套第一项
    2. 嵌套第二项
  3. 第三项

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级)
  • 段落和文本强调(粗体、斜体、删除线)
  • 代码块和行内代码(支持语法高亮)
  • 引用块和嵌套引用
  • 有序列表、无序列表和任务列表
  • 表格和对齐方式
  • 水平分隔线
  • 链接和图片
  • 脚注
  • 数学公式(行内和块级)
  • 上标和下标

在实际使用中,建议遵循支持的语法规范,以确保内容能够正确解析和渲染。

Footnotes

  1. 这是第一个脚注的内容。

  2. 这是第二个脚注的内容,可以包含多行文本。