Markdown 全格式渲染测试
本文用于检测博客系统对各种 Markdown 语法的支持情况。
一、代码高亮（Chroma）
每个代码块左上角应显示语言标签。
CSS
1.site-header {
2 position: fixed;
3 top: 0;
4 width: 100%;
5 z-index: 999;
6 background: rgba(255, 255, 255, 0.92);
7 backdrop-filter: blur(12px);
8 transition: background 0.3s ease;
9}
10[data-theme="dark"] .site-header {
11 background: rgba(15, 15, 26, 0.9);
12}
JavaScript
1var ThemeToggle = (function() {
2 var toggle, html, key, transitioning;
3 var DURATION = 1000;
4
5 function commitTheme(next) {
6 html.setAttribute('data-theme', next);
7 localStorage.setItem(key, next);
8 }
9
10 function switchTheme() {
11 if (transitioning) return;
12 transitioning = true;
13 var cur = html.getAttribute('data-theme') || 'light';
14 var next = cur === 'dark' ? 'light' : 'dark';
15 console.log('[Theme] Switch: ' + cur + ' -> ' + next);
16 setTimeout(function() { commitTheme(next); }, DURATION * 0.42);
17 setTimeout(function() { transitioning = false; }, DURATION + 500);
18 }
19
20 return { init: function() { /* ... */ } };
21})();
Python
1import asyncio
2from dataclasses import dataclass
3from typing import List
4
5
6@dataclass
7class Article:
8 title: str
9 content: str
10 tags: List[str]
11 is_draft: bool = False
12
13 def word_count(self) -> int:
14 return len(self.content.split())
15
16 async def render(self) -> str:
17 await asyncio.sleep(0.1)
18 return f"<h1>{self.title}</h1><p>{self.content}</p>"
19
20
21async def main():
22 articles = [
23 Article("Hello World", "这是第一篇文章", ["test"]),
24 Article("Python 入门", "print('Hello')", ["python"]),
25 ]
26 for article in articles:
27 html = await article.render()
28 print(f"[{article.title}] 字数: {article.word_count()}")
29
30
31if __name__ == "__main__":
32 asyncio.run(main())
Bash / SSH
1#!/bin/bash
2SERVER="user@192.168.1.100"
3REMOTE_PATH="/var/www/blog"
4echo "Deploying Hugo site..."
5hugo --minify || exit 1
6rsync -avz --delete -e "ssh -p 22" ./public/ $SERVER:$REMOTE_PATH/
7echo "Done!"
SQL
1SELECT
2 c.name AS category,
3 COUNT(p.id) AS article_count,
4 AVG(LENGTH(p.content)) AS avg_length,
5 MAX(p.date) AS latest_post
6FROM categories c
7LEFT JOIN posts p ON p.category_id = c.id
8WHERE p.draft = FALSE
9GROUP BY c.id, c.name
10HAVING COUNT(p.id) > 0
11ORDER BY article_count DESC
12LIMIT 10;
JSON
1{
2 "name": "hugo-theme-lumin",
3 "version": "2.5.0",
4 "features": [
5 "dark-light-mode",
6 "code-highlight",
7 "katex-math",
8 "mermaid-diagrams"
9 ],
10 "dependencies": {
11 "fontawesome": "^6.4.0",
12 "mermaid": "^11.0.0",
13 "katex": "^0.16.0"
14 }
15}
二、数学公式（KaTeX）
行内公式：$E = mc^2$，其中 $c \approx 2.998 \times 10^8 \text{ m/s}$。
欧拉恒等式：$e^{i\pi} + 1 = 0$
正态分布：$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$
$$ \int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi} $$
$$ \nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t} $$
$$\begin{pmatrix} a_{11} & a_{12} \ a_{21} & a_{22} \end{pmatrix} \times \begin{pmatrix} x_1 \ x_2 \end{pmatrix} = \begin{pmatrix} b_1 \ b_2 \end{pmatrix}$$
三、Mermaid 图表
1graph TD
2 A[用户访问页面] --> B{是否登录?}
3 B -->|是| C[加载个人内容]
4 B -->|否| D[显示登录按钮]
5 C --> E[渲染完成]
6 D --> F[跳转登录页]
7 F --> A
1sequenceDiagram
2 participant U as 用户浏览器
3 participant S as Hugo Server
4 participant CDN as 本地资源
5 U->>S: 请求文章页面
6 S-->>U: 返回 HTML
7 U->>CDN: 加载 KaTeX/Mermaid
8 CDN-->>U: 零延迟返回
9 U->>U: 渲染公式和图表
1pie title 代码语言占比
2 "JavaScript" : 35
3 "CSS" : 25
4 "Python" : 15
5 "Go" : 10
6 "Shell" : 8
7 "其他" : 7
四、Goldmark 扩展语法
任务列表
- 代码高亮 — 支持 180+ 语言，带语言标签
- 数学公式 — 行内 + 块级，本地加载
- Mermaid 图表 — 流程图、时序图、饼图
- Font Awesome 图标 — 本地化零延迟
- PlantUML 图表 — 待实现
脚注
Hugo 是最快的静态网站生成器1，由 Steve Francia 创建2，使用 Go 语言编写3。
删除线
这段文字应该有删除线效果 表示已废弃内容。
表格
| 功能 | 状态 | 本地化 |
|---|---|---|
| 代码高亮 | ✅ 正常 | Chroma 内置 |
| KaTeX 公式 | ✅ 已改本地 | CSS+JS+字体 |
| Mermaid 图表 | ✅ 已改本地 | 3.2MB |
| Font Awesome | ✅ 已改本地 | CSS+7字体 |
| 搜索功能 | ✅ 已修复 | IIFE 重构 |
五、HTML 原生支持
说明 Goldmark unsafe HTML 渲染已正常启用！
六、化学公式（KaTeX + mhchem）
行内化学式：水分子 $\ce{H2O}$，二氧化碳 $\ce{CO2}$，硫酸根离子 $\ce{SO4^2-}$。
化学反应方程式（块级）：
$$\ce{CO2 + C ->[\Delta] 2CO}$$
$$\ce{2H2 + O2 ->[\text{点燃}] 2H2O}$$
$$\ce{CaCO3 ->[\Delta] CaO + CO2 ^}$$
氧化还原反应：
$$\ce{MnO4- + 8H+ + 5Fe^{2+} -> Mn^{2+} 5Fe^{3+} + 4H2O}$$
七、Markdown 增强样式
高亮标记（mark）
这是一段普通文字，其中 重点内容 应该有黄色高亮背景。支持 行内标记 和整句高亮显示效果。
键盘按键（kbd）
常用快捷键：Ctrl + C 复制，Ctrl + V 粘贴，Ctrl + S 保存，Alt + F4 关闭窗口。
上下标（sup / sub）
勾股定理：a2 + b2 = c2
水的化学式：H2O，二氧化碳：CO2
爱因斯坦公式：E = mc2
可折叠区域（details / summary）
点击展开查看更多内容
这里是折叠区域的内容，可以放置代码、长文本或补充说明。
1console.log('折叠区内的代码块也能正常高亮');
支持嵌套任何 Markdown 内容。
缩写（abbr）
HTML 是网页的骨架， CSS 负责样式， JS 提供交互能力。 鼠标悬停可看完整含义。
插入与删除（ins / del）
这是新增的内容（绿色背景），
这是已删除的废弃内容（红色背景）。
KaTeX 定界符说明
推荐使用 $...$（行内）和 $$...$$（块级）定界符，已验证支持矩阵/积分/化学公式等全部 KaTeX + mhchem 语法。注意：$$...$$ 块内必须保持单行（不能有空行），否则 Goldmark 会在空行处插入 <p> 标签导致渲染失败。
$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$
检查清单：请逐项确认以上内容是否正确显示（含化学公式、灯箱、增强样式）。
八、Lightbox 图片灯箱测试
点击下方任意图片测试全屏放大效果（毛玻璃背景 + 左右切换 + 键盘导航）。
基本点击放大
多图切换模式（5 张 Banner）
不同格式图片
JPG：
PNG：
WebP：
竖向构图
小图标（不应触发灯箱）
留言评论
期待你的想法评论加载中