Markdown 渲染效果演示

Hexo 使用 Markdown 作为写作语法。本文将展示各种 Markdown 元素在 Hexo 中的渲染效果,帮助你了解如何写出排版精美的文章。

标题层级

Markdown 支持六级标题,对应 HTML 的 <h1><h6>

一级标题 (H1)

二级标题 (H2)

三级标题 (H3)

四级标题 (H4)

五级标题 (H5)
六级标题 (H6)

文本样式

  • 粗体文字:用两个星号包裹
  • 斜体文字:用一个星号包裹
  • 删除线:用波浪线包裹
  • 行内代码:用反引号包裹
  • 超链接:方括号加圆括号

这是一段引用文本。引用通常用于摘录他人的观点或需要特别强调的内容。

支持多行引用。

列表

无序列表

  • 苹果
  • 香蕉
  • 橙子
    • 赣南脐橙
    • 新奇士橙
  • 葡萄

有序列表

  1. 第一步:安装 Node.js
  2. 第二步:安装 Hexo
  3. 第三步:初始化站点
  4. 第四步:创建文章

代码块与高亮

Hexo 内置了 highlight.js 和 PrismJS 两种代码高亮方案。

JavaScript 示例

1
2
3
4
5
6
7
8
9
const hexo = require('hexo');
const blog = new hexo(__dirname, { silent: true });

blog.init().then(() => {
console.log('Hexo 初始化成功!');
return blog.source.process();
}).then(() => {
console.log('文件处理完成');
});

Python 示例

1
2
3
4
5
6
7
8
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)

# 打印前 10 个斐波那契数
for i in range(10):
print(f"F({i}) = {fibonacci(i)}")

Bash 示例

1
2
3
4
5
6
7
8
9
10
# 初始化 Hexo 站点
hexo init my-blog
cd my-blog
npm install

# 创建新文章
hexo new "我的第一篇文章"

# 启动本地服务器
hexo server --open

表格

功能 命令 说明
新建文章 hexo new "标题" _posts 目录下创建
新建页面 hexo new page "标题" source 目录下创建
生成站点 hexo generate 生成静态文件到 public
本地预览 hexo server 默认在 4000 端口启动

水平分割线

上方内容与下方内容的分隔:


任务列表

Hexo 支持 GitHub 风格的任务列表:

  • 安装 Hexo
  • 初始化站点
  • 创建第一篇文章
  • 配置主题
  • 部署到服务器

提示与总结

Markdown 的精髓在于简洁。你不需要记住复杂的 HTML 标签,只需关注内容本身。Hexo 会帮你处理好渲染和排版。

想了解更多 Markdown 语法?推荐参考 Markdown 指南