Geekman's Blog

Markdown 功能展示

  • 演示
  • Markdown
  • 功能

这篇文章展示了博客中所有支持的 Markdown 功能。

标题

从 H1 到 H6 的所有标题级别都完全支持，配有精美的排版。

三级标题

四级标题

五级标题
六级标题

文本格式

你可以使用粗体文本、斜体文本，或者粗斜体。你也可以使用删除线文本。

列表

无序列表

  • 第一项
  • 第二项
  • 第三项
    • 嵌套项 1
    • 嵌套项 2
  • 第四项

有序列表

  1. 第一步
  2. 第二步
  3. 第三步
    1. 子步骤 A
    2. 子步骤 B
  4. 第四步

任务列表

  • 已完成任务
  • 未完成任务
  • 另一个待办任务

链接

你可以创建内联链接，也可以使用带标题的链接。

外部链接会自动在新标签页中打开。

代码

内联代码

在文本中使用内联代码，例如：const greeting = "你好世界"。

代码块

这是一个 JavaScript 示例：

// 计算阶乘的函数
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 输出: 120

Python 示例：

def fibonacci(n):
    """生成前 n 项斐波那契数列"""
    fib_sequence = []
    a, b = 0, 1
    
    for _ in range(n):
        fib_sequence.append(a)
        a, b = b, a + b
    
    return fib_sequence

# 生成前 10 个斐波那契数
print(fibonacci(10))

TypeScript 示例：

interface User {
  id: number;
  name: string;
  email: string;
}

const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

Shell 命令：

# 安装依赖
npm install

# 构建项目
npm run build

# 启动开发服务器
npm run dev

引用块

"预测未来的最好方法就是创造它。"

— Alan Kay

你也可以嵌套引用：

这是第一层引用。

这是嵌套的引用。

回到第一层。

表格

功能支持备注
标题✅所有级别 (H1-H6)
列表✅有序、无序、嵌套
代码✅内联和代码块，带高亮
表格✅GitHub Flavored Markdown
图片✅懒加载、响应式
链接✅内部和外部

这是一个更复杂的表格：

语言范式类型系统首次出现
JavaScript多范式动态1995
Python多范式动态1991
TypeScript多范式静态2012
Rust多范式静态2010
Go过程式静态2009

图片

示例图片

图片自动响应式并懒加载

分隔线

你可以这样创建分隔线：

强调

这是强调文本，这是加粗文本。

你也可以使用 下划线表示强调 和 双下划线表示加粗。

嵌套内容

你可以组合多个元素：

  1. 第一点：演示列表中的代码

    const example = "列表中的代码块";

  2. 第二点：列表中的表格：

    列 1列 2
    数据 1数据 2

  3. 第三点：列表中的引用：

    列表中的引用

高级功能

数学公式（未来可添加）

虽然目前未实现，但你可以添加 KaTeX 或 MathJax 来支持数学表达式。

语法高亮

代码块支持多种语言的语法高亮：

  • JavaScript/TypeScript
  • Python
  • Ruby
  • Go
  • Rust
  • Java
  • C/C++
  • Shell/Bash
  • HTML/CSS
  • JSON/YAML
  • 以及更多！

结语

这个展示页面演示了博客全面的 Markdown 渲染能力。样式在亮色和暗色模式下都能完美适配，采用了精心选择的排版和间距以获得最佳可读性。

尽情享受内容创作吧！🚀

Markdown 功能展示 | Geekman的博客