欢迎体验全能 Markdown 渲染与特异功能系统

这是一篇专为本博客（shijianus-blog）打造的 Markdown 全能语法演示与技术使用手册。本站深度汲取了开源经典 Hexo-Theme-Anzhiyu（安知鱼） 的视觉规范与 Astro 6 现代静态渲染能力，重构并内建了完整的 Markdown 解析体系。

无论是学术级的 LaTeX 数学公式、Mermaid 架构流程图，还是多语言代码切换、Diff 差异对比、GitHub 风格告示框、表格自适应滚动，亦或是前沿的 密码加密弹窗解锁、文字/图片高斯模糊与马赛克、富媒体卡片 等特异功能，均已在此得到原生级支持。

一、数学公式（Math / KaTeX）

本博客内建 remark-math 与 rehype-katex 渲染管线，支持行内公式与块级公式的高性能编译与全设备自适应排版。

1. 行内数学公式（Inline Math）

在文本中直接使用 $ ... $ 包裹 LaTeX 表达式：

质能方程： $E = mc^2$
欧拉恒等式： $e^{i\pi} + 1 = 0$
高斯正态分布密度函数： $f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$
求和极限： $\lim_{n \to \infty} \sum_{k=1}^n \frac{1}{k^2} = \frac{\pi^2}{6}$

2. 块级数学公式（Display Math）

使用 $$ ... $$ 独立成段，支持多行推导与矩阵排版。在移动端下自带水平弹性滚动容器，绝不破坏页面宽度：

\mathcal{L}\{\ddot{x}(t) + 2\zeta\omega_n\dot{x}(t) + \omega_n^2 x(t)\} = X(s)(s^2 + 2\zeta\omega_n s + \omega_n^2)

麦克斯韦方程组（微分形式）：

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

高斯积分与矩阵运算：

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}, \quad \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

二、图表与绘图代码块（Diagrams as Code）

博客原生集成 Mermaid 11 引擎，支持将图表代码实时编译为高清晰度、矢量 SVG 图表，并自动适配明亮/暗黑模式。

1. 业务架构与决策流程图（Flowchart）

graph TD
    A[读者访问文章] --> B{文章是否设置密码?}
    B -->|是| C[弹出安知鱼毛玻璃验证弹窗]
    C --> D{密码核对}
    D -->|正确| E[解密并渲染正文内容]
    D -->|错误| F[触发震动动画与错误提示]
    B -->|否| E
    E --> G[加载 KaTeX 公式与 Mermaid 图表]
    G --> H[呈现完整沉浸式阅读体验]

2. 系统交互时序图（Sequence Diagram）

sequenceDiagram
    autonumber
    actor User as 读者 (User)
    participant Browser as 客户端浏览器
    participant PostPage as 文章渲染引擎
    participant Security as 加密安全模块

    User->>Browser: 点击受保护的加密内容
    Browser->>PostPage: 唤起密码输入对话框
    User->>Browser: 输入访问密钥
    Browser->>Security: 校验口令 Hash
    alt 验证成功
        Security-->>Browser: 返回解锁令牌
        Browser->>PostPage: 解密正文并播放平滑展示动画
    else 验证失败
        Security-->>Browser: 返回密码错误
        Browser->>User: 触发窗口摇晃与红字警示
    end

3. 项目交付甘特图（Gantt Chart）

gantt
    title 博客主题重构工程推进计划
    dateFormat  YYYY-MM-DD
    section 基础架构
    Markdown 扫描引擎升级     :done,    des1, 2026-08-01, 2026-08-07
    表格样式重构与防冲突      :done,    des2, 2026-08-08, 2026-08-14
    section 核心特性
    KaTeX 公式与 Mermaid 接入 :done,    des3, 2026-08-15, 2026-08-20
    加密弹窗与特异功能实现     :active,  des4, 2026-08-21, 2026-08-28
    section 验收交付
    全景压测与视觉审计         :         des5, 2026-08-29, 2026-08-31

4. 统计饼图与版本图（Pie Chart & GitGraph）

pie title 博客技术栈代码占比
    "TypeScript / Astro" : 48
    "React 19 Components" : 26
    "Tailwind 4 & CSS" : 18
    "Markdown & Assets" : 8

gitGraph
   commit id: "Init v1.0"
   branch feature/markdown
   checkout feature/markdown
   commit id: "Add KaTeX & Math"
   commit id: "Fix Table Layout"
   commit id: "Add Admonitions"
   checkout main
   merge feature/markdown id: "Merge MD Enhancement"
   commit id: "Release v2.0" tag: "v2.0.0"

三、告示框与提示块（Admonition / Callout）

基于 GitHub Alert 语法与安知鱼设计美学，支持 9 种不同语义的彩色卡片，并支持 可折叠模式。

1. 标准告示框（Standard Callouts）

[!NOTE] 常规备注（Note）：这是一条标准的背景信息或补充说明，用于提供文章上下文。

[!TIP] 实用技巧（Tip）：使用快捷键 Ctrl + K 可以快速唤起全局文章搜索面板！

[!IMPORTANT] 重要事项（Important）：在部署生产环境前，请务必确认 BLOG_BUILD_TARGET=static 环境变量已正确注入。

[!WARNING] 风险警告（Warning）：请勿在公开仓库中硬编码数据库密钥或云服务私钥。

[!CAUTION] 危险警示（Caution）：执行数据表重构操作具有不可逆性，请先执行 npm run cf:d1:migrate 备份数据！

[!DANGER] 致命危险（Danger）：直接删除生产数据库将导致全部评论与用户资产永久损毁。

[!SUCCESS] 操作成功（Success）：静态构建流程已成功完成，所有 43 个静态路由已就绪！

[!QUESTION] 疑难探讨（Question）：如何在无服务端依赖的环境下实现毫秒级的纯客户端全文检索？

[!QUOTE] 精选引用（Quote）：“优秀的代码不仅能被机器执行，更能像诗歌一样优雅地向人类传达思想。”

2. 可折叠告示框（Collapsible Details Admonitions）

在标记后添加 - 即可生成默认收起的折叠告示框，添加 + 则为默认展开：

[!TIP]- 点击展开查看：生产环境 Nginx 极速缓存配置参考以下是推荐的静态资源长效缓存策略：
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

四、高级代码块功能（Advanced Code Blocks）

我们为文章内的所有代码块赋予了 macOS 拟物交通灯控制条、语言徽章、一键复制、增删行 Diff 对比 以及 超长代码自动折叠 机制。

1. TypeScript 代码示例（带增删行 Diff）

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  site: 'https://shijian.us',
- output: 'server', // 旧的服务端渲染配置
+ output: 'static', // [!code ++] 升级为静态导出模式，提速 300%
  markdown: {
+   remarkPlugins: [remarkMath], // [!code ++]
+   rehypePlugins: [rehypeKatex], // [!code ++]
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark-dimmed',
      },
    },
  },
});

2. 超长代码折叠演示（自动限制高度并提供展开按钮）

{
  "project": "shijianus-blog",
  "version": "2.0.0",
  "author": "shijianus",
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
    "@astrojs/node": "^10.0.6",
    "@astrojs/react": "^5.0.2",
    "@tailwindcss/postcss": "^4.2.4",
    "@tailwindcss/vite": "^4.2.2",
    "astro": "^6.1.3",
    "katex": "^0.16.11",
    "lucide-react": "^0.460.0",
    "mermaid": "^11.4.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.2.2"
  },
  "scripts": {
    "dev": "astro dev --host 0.0.0.0",
    "build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
    "preview": "astro preview",
    "clean": "node scripts/clean.mjs"
  },
  "keywords": [
    "astro",
    "blog",
    "anzhiyu",
    "katex",
    "mermaid",
    "tailwind4"
  ]
}

五、任务列表与表格全能增强（Task Lists & Tables）

1. 交互式 GFM 任务列表（Task Lists）

深度解析 LaTeX 数学公式（remark-math + rehype-katex）
动态加载并渲染 Mermaid 流程图与序列图
修复表格识别冲突，实现自适应响应式横向滚动
注入安知鱼 9 种风格 Alert 告示卡片
实现局部加密内容的毛玻璃密码弹窗解锁
增加文字与图片高斯模糊、马赛克遮罩
支持更多第三方嵌入组件（持续迭代中）

2. 增强型自适应表格（Fixed Table Layout）

表格不再出现单元格挤压变形或外框截断问题，且自带表头主题微光与隔行变色：

模块名称	核心技术支持	交互特性	状态角标
数学公式	KaTeX + AST Compiler	行内/块级自适应渲染，无客户端性能负担	稳定支持
架构图表	Mermaid 11	流程图、时序图、甘特图、暗黑自适应	稳定支持
加密内容	密码弹窗 + Session 存储	毛玻璃对话框、错误震动动画、安全隔离	核心特异
模糊与马赛克	CSS Backdrop Filter	悬浮/点击解除模糊、图片遮罩勋章	交互增强
代码高亮	Shiki + Mac Enhancer	增删 Diff 行、一键复制、超长代码折叠	完善就绪
图片灯箱	Fullscreen Lightbox	大图全屏缩放、暗色遮罩、`Esc` 退出	体验增强

本博客提供超越普通 Markdown 的 局部内容密码保护机制。无需刷新页面，点击即可唤起高颜值安知鱼毛玻璃密码输入对话框！

🔒

此段落为受保护的加密内容

该区域包含私密资源与核心技术参数。请输入授权密码后解锁查看。

🎉 密码验证成功！解密内容已呈现

恭喜您成功解锁了受保护的技术秘密！以下是加密交付数据：

私有代码仓库：git@github.com:shijianus/vip-internal-core.git
API 访问令牌 (Token)：shijian_sec_9988_a1b2c3d4e5f6
专属支持频道：Telegram 私享频道 @shijianus_insiders

解锁状态已保存在您的浏览器会话中，当前页面刷新后无需重复输入。

七、特异功能：高斯模糊、马赛克与剧透隐藏（Blur, Mosaic & Spoilers）

在日常写作中，有时需要对敏感内容、剧情答案或悬念图片进行视觉模糊遮挡。

1. 文字高斯模糊（Gaussian Blur Text）

这是一段被模糊保护的关键剧透文字：其实真正的凶手就是管家，他在第三章就已经偷偷换掉了钥匙！（鼠标悬浮或点击上方文字即可解除模糊）。

2. 马赛克文字（Mosaic Mask Text）

这是一段采用马赛克黑色遮罩的文本：机密数据：SHA256-7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069（悬浮或点击即可查看明文）。

3. 内联剧透与隐藏标记

Discord 风格剧透遮罩：||这是一段使用双竖线包裹的剧透遮罩，点击后永久揭开。||
直接内联隐藏内容：%%这里是使用百分号包裹的内联隐藏内容，点击展开。%%

4. 图片高斯模糊（Blurred Image Protection）

对于涉及版权敏感、悬疑或成人礼的内容，可使用图片模糊保护容器：

👁️ 悬浮或点击揭开迷雾

5. 隐藏内容折叠面板（Hidden Content Box）

对于快速排序（QuickSort），平均时间复杂度为 $\mathcal{O}(n \log n)$，在最坏情况下当每次划分都不均匀时退化为 $\mathcal{O}(n^2)$。通过引入随机化主元（Randomized Pivot）可以将最坏情况概率降至指数级低。

八、折叠与容器组件（Tabs, Steps & Accordions）

1. 多语言包管理选项卡（Interactive Tabs）

使用 pnpm 极速安装并链接依赖：

pnpm install remark-math rehype-katex katex mermaid

使用 npm 标准包管理器：

npm install remark-math rehype-katex katex mermaid

使用 Yarn 现代模式：

yarn add remark-math rehype-katex katex mermaid

使用超高速 Bun 运行时：

bun add remark-math rehype-katex katex mermaid

2. 教程步骤条（Tutorial Steps）

环境准备与依赖安装

在工程根目录下执行安装命令，引入 Astro 6 与 KaTeX、Mermaid 核心依赖包。

配置 Astro Markdown 编译管道

在 astro.config.mjs 中注册 remarkMath 与 rehypeKatex，并配置 Shiki 双主题。

挂载 Enhancer 与样式库

在全局布局 BlogLayout.astro 中引入 markdown-enhancements.css 与特性增强脚本。

九、富媒体与跨平台卡片嵌入（Embeds & Media Cards）

1. GitHub 仓库卡片（GitHub Repo Card）

安知鱼主题 - 简洁、高颜值、功能丰富的 Hexo 博客主题，本博客的前端 UI 与设计灵感源泉。

2. 响应式视频播放卡片（Video Embed）

Bilibili 1080P 视频嵌入演示

3. 音频音乐卡片（Audio Card）

星河漫游 (Starry Wander)

shijianus · 原创环境白噪音

十、脚注与悬浮气泡预览（Footnotes & Hover Tooltips）

在学术或长篇技术文章中，脚注是必不可少的表达形式。本站不仅支持标准的 GFM 脚注跳转，更支持 鼠标悬浮即可弹出释义气泡，无需跳出当前视口即可完成阅读¹。

这里还有第二个关于主题架构的脚注引用²，以及第三个关于数学渲染性能的补充说明³。

十一、富文本行内语法扩展（Inline Typography）

多彩高亮标记（HTML 形式与语法糖）：
- 黄色高亮（重点标注）
- 绿色高亮（成功推荐）
- 蓝色高亮（信息线索）
- 粉色高亮（设计灵感）
- 紫色高亮（深度原理）
- 橙色高亮（操作预警）
- 红色高亮（风险警示）
- 青色高亮（网络协议）
- ==快捷语法糖：green:绿色高亮== 与 ==purple:紫色高亮==
个性下划线：
- 波浪强调下划线（Wavy Underline）
- 虚线注重下划线（Dashed Underline）
按键展示：Ctrl + Shift + P 打开命令面板。
拼音/注音：安知鱼ān zhī yú · 時間shí jiān。
缩略词悬浮说明：CSS 与 HTML。
状态胶囊角标：
- 推荐
- 已通过
- 注意
- 严重
- 提示

结语：构建优雅而强大的内容系统

通过本次全量重构与扫描优化，shijianus-blog 在 Markdown 渲染领域已经拥有了媲美甚至超越原生 Hexo/安知鱼主题的综合表现力。

从严谨的技术公式推导，到生动的 Mermaid 业务架构图；从安全的局部密码对话框，到充满趣味的高斯模糊与剧透遮罩——这套系统让每一篇博客文章都能够以最体面、最专业、最富有交互感的形式呈现在读者面前。

Astro 6 架构：采用 Island Architecture（群岛架构），实现默认零 JavaScript 静态交付，极大提升了首屏加载与 SEO 性能。 ↩
安知鱼（Anzhiyu）：Hexo 生态中最具代表性的现代化极客设计主题之一，以精细的微动效与信息层级著称。 ↩
KaTeX 性能：相比于传统 MathJax，KaTeX 在服务端即可完成所有 HTML/MathML 的静态渲染，性能提高 10 倍以上。 ↩

Willkommen beim All-in-One Markdown-Rendering- und Spezialfunktionssystem

Dies ist ein Markdown All-in-One Syntax-Demo- und Technisches Benutzerhandbuch, das speziell für diesen Blog (shijianus-blog) erstellt wurde. Diese Website hat sich tiefgreifend von den visuellen Spezifikationen des Open-Source-Klassikers Hexo-Theme-Anzhiyu und den modernen statischen Rendering-Fähigkeiten von Astro 6 inspirieren lassen, um ein vollständiges Markdown-Parsing-System neu aufzubauen und zu integrieren.

Ob akademische LaTeX-Mathematikformeln, Mermaid-Architekturflussdiagramme, mehrsprachiger Code-Wechsel, Diff-Vergleiche, GitHub-Stil-Hinweisfelder, adaptives Tabellen-Scrolling oder innovative Spezialfunktionen wie passwortverschlüsselte Pop-up-Entsperrung, Gaußsche Unschärfe und Mosaikeffekte für Text/Bilder sowie Rich-Media-Karten – all dies wird hier nativ unterstützt.

I. Mathematische Formeln (Math / KaTeX)

Dieser Blog verfügt über integrierte remark-math- und rehype-katex-Rendering-Pipelines, die eine hochperformante Kompilierung und adaptive Layout-Anpassung für Inline- und Blockformeln auf allen Geräten unterstützen.

1. Inline-Mathematikformeln (Inline Math)

Verwenden Sie $ ... $ direkt im Text, um LaTeX-Ausdrücke einzuschließen:

Masse-Energie-Äquivalenz: $E = mc^2$
Eulers Identität: $e^{i\pi} + 1 = 0$
Gaußsche Normalverteilungsdichtefunktion: $f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$
Summenlimit: $\lim_{n \to \infty} \sum_{k=1}^n \frac{1}{k^2} = \frac{\pi^2}{6}$

2. Block-Mathematikformeln (Display Math)

Verwenden Sie $$ ... $$, um eigenständige Absätze zu bilden, die mehrzeilige Ableitungen und Matrixsatz unterstützen. Auf Mobilgeräten ist ein horizontaler, elastischer Scroll-Container integriert, der die Seitenbreite niemals beeinträchtigt:

\mathcal{L}\{\ddot{x}(t) + 2\zeta\omega_n\dot{x}(t) + \omega_n^2 x(t)\} = X(s)(s^2 + 2\zeta\omega_n s + \omega_n^2)

Maxwell-Gleichungen (Differentialform):

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Gauß-Integral und Matrixoperationen:

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}, \quad \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

II. Diagramme und Zeichen-Codeblöcke (Diagrams as Code)

Der Blog integriert nativ die Mermaid 11-Engine, die die Echtzeit-Kompilierung von Diagrammcode in hochauflösende Vektor-SVG-Diagramme unterstützt und sich automatisch an den Hell-/Dunkelmodus anpasst.

1. Geschäftsarchitektur- und Entscheidungsflussdiagramm (Flowchart)

graph TD
    A[Leser besucht Artikel] --> B{Ist der Artikel passwortgeschützt?}
    B -->|Ja| C[Anzhiyu Milchglas-Verifizierungs-Pop-up erscheint]
    C --> D{Passwortprüfung}
    D -->|Korrekt| E[Inhalt entschlüsseln und rendern]
    D -->|Falsch| F[Vibrationsanimation und Fehlermeldung auslösen]
    B -->|Nein| E
    E --> G[KaTeX-Formeln und Mermaid-Diagramme laden]
    G --> H[Vollständiges immersives Leseerlebnis präsentieren]

2. Systeminteraktions-Sequenzdiagramm (Sequence Diagram)

sequenceDiagram
    autonumber
    actor User as Leser (User)
    participant Browser as Client-Browser
    participant PostPage as Artikel-Rendering-Engine
    participant Security as Verschlüsselungs-Sicherheitsmodul

    User->>Browser: Klickt auf geschützten, verschlüsselten Inhalt
    Browser->>PostPage: Ruft Passwort-Eingabedialog auf
    User->>Browser: Gibt Zugriffsschlüssel ein
    Browser->>Security: Prüft Passwort-Hash
    alt Verifizierung erfolgreich
        Security-->>Browser: Gibt Entsperr-Token zurück
        Browser->>PostPage: Entschlüsselt Text und spielt sanfte Anzeigeanimation ab
    else Verifizierung fehlgeschlagen
        Security-->>Browser: Gibt Passwortfehler zurück
        Browser->>User: Löst Fensterwackeln und rote Warnmeldung aus
    end

3. Projektlieferungs-Gantt-Diagramm (Gantt Chart)

gantt
    title Fortschrittsplan für das Blog-Theme-Refactoring-Projekt
    dateFormat  YYYY-MM-DD
    section Basisinfrastruktur
    Markdown Scan-Engine-Upgrade     :done,    des1, 2026-08-01, 2026-08-07
    Tabellenstil-Refactoring und Konfliktvermeidung      :done,    des2, 2026-08-08, 2026-08-14
    section Kernfunktionen
    KaTeX-Formeln und Mermaid-Integration :done,    des3, 2026-08-15, 2026-08-20
    Verschlüsseltes Pop-up und Implementierung von Spezialfunktionen     :active,  des4, 2026-08-21, 2026-08-28
    section Abnahme und Lieferung
    Umfassender Stresstest und visuelles Audit         :         des5, 2026-08-29, 2026-08-31

4. Statistik-Tortendiagramm und Versionsgraph (Pie Chart & GitGraph)

pie title Codeanteil des Blog-Technologie-Stacks
    "TypeScript / Astro" : 48
    "React 19 Komponenten" : 26
    "Tailwind 4 & CSS" : 18
    "Markdown & Assets" : 8

gitGraph
   commit id: "Init v1.0"
   branch feature/markdown
   checkout feature/markdown
   commit id: "KaTeX & Math hinzufügen"
   commit id: "Tabellenlayout korrigieren"
   commit id: "Hinweisboxen hinzufügen"
   checkout main
   merge feature/markdown id: "MD-Erweiterung zusammenführen"
   commit id: "Release v2.0" tag: "v2.0.0"

Drei. Hinweisboxen und Callouts (Admonition / Callout)

Basierend auf der GitHub Alert-Syntax und der Designästhetik von Anzhiyu werden 9 farbige Karten mit unterschiedlicher Semantik unterstützt, einschließlich eines zusammenklappbaren Modus.

1. Standard-Hinweisboxen (Standard Callouts)

[!NOTE] Allgemeine Anmerkung (Note): Dies ist eine Standard-Hintergrundinformation oder ergänzende Erläuterung, die den Kontext des Artikels liefert.

[!TIP] Praktischer Tipp (Tip): Verwenden Sie die Tastenkombination Strg + K, um schnell das globale Artikelsuchfeld aufzurufen!

[!IMPORTANT] Wichtiger Hinweis (Important): Stellen Sie vor der Bereitstellung in der Produktionsumgebung sicher, dass die Umgebungsvariable BLOG_BUILD_TARGET=static korrekt injiziert wurde.

[!WARNING] Risikowarnung (Warning): Codieren Sie keine Datenbankschlüssel oder private Cloud-Dienstschlüssel in öffentlichen Repositories fest.

[!CAUTION] Gefahrenhinweis (Caution): Das Umstrukturieren von Datentabellen ist irreversibel. Führen Sie zuerst npm run cf:d1:migrate aus, um Daten zu sichern!

[!DANGER] Tödliche Gefahr (Danger): Das direkte Löschen der Produktionsdatenbank führt zum dauerhaften Verlust aller Kommentare und Benutzerressourcen.

[!SUCCESS] Vorgang erfolgreich (Success): Der statische Build-Prozess wurde erfolgreich abgeschlossen, alle 43 statischen Routen sind bereit!

[!QUESTION] Frage zur Diskussion (Question): Wie lässt sich eine millisekundengenaue, rein clientseitige Volltextsuche in einer Umgebung ohne Serverabhängigkeiten realisieren?

[!QUOTE] Ausgewähltes Zitat (Quote): „Guter Code wird nicht nur von Maschinen ausgeführt, sondern vermittelt Ideen auch elegant wie Poesie an Menschen.“

2. Zusammenklappbare Hinweisboxen (Collapsible Details Admonitions)

Durch Hinzufügen von - nach dem Marker wird eine standardmäßig eingeklappte Hinweisbox erzeugt, während + sie standardmäßig ausklappt:

[!TIP]- Zum Ausklappen klicken: Referenz zur Nginx-Schnellcache-Konfiguration für die Produktionsumgebung Im Folgenden finden Sie die empfohlene Strategie für langlebigen Cache statischer Ressourcen:
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

Vier. Erweiterte Codeblock-Funktionen (Advanced Code Blocks)

Wir haben allen Codeblöcken in den Artikeln macOS-Skeuomorphismus-Ampel-Kontrollleisten, Sprach-Badges, Ein-Klick-Kopieren, Diff-Vergleich für hinzugefügte/gelöschte Zeilen und einen automatischen Faltmechanismus für sehr lange Codes hinzugefügt.

1. TypeScript Codebeispiel (mit Diff für hinzugefügte/gelöschte Zeilen)

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  site: 'https://shijian.us',
- output: 'server', // Alte serverseitige Rendering-Konfiguration
+ output: 'static', // [!code ++] Auf statischen Exportmodus aktualisiert, 300% schneller
  markdown: {
+   remarkPlugins: [remarkMath], // [!code ++]
+   rehypePlugins: [rehypeKatex], // [!code ++]
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark-dimmed',
      },
    },
  },
});

2. Demo für das Falten von sehr langem Code (automatische Höhenbegrenzung mit Ausklapp-Button)

{
  "project": "shijianus-blog",
  "version": "2.0.0",
  "author": "shijianus",
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
    "@astrojs/node": "^10.0.6",
    "@astrojs/react": "^5.0.2",
    "@tailwindcss/postcss": "^4.2.4",
    "@tailwindcss/vite": "^4.2.2",
    "astro": "^6.1.3",
    "katex": "^0.16.11",
    "lucide-react": "^0.460.0",
    "mermaid": "^11.4.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.2.2"
  },
  "scripts": {
    "dev": "astro dev --host 0.0.0.0",
    "build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
    "preview": "astro preview",
    "clean": "node scripts/clean.mjs"
  },
  "keywords": [
    "astro",
    "blog",
    "anzhiyu",
    "katex",
    "mermaid",
    "tailwind4"
  ]
}

Fünf. Aufgabenlisten und Tabellen – Allround-Verbesserungen (Task Lists & Tables)

1. Interaktive GFM-Aufgabenlisten (Task Lists)

Tiefenanalyse von LaTeX-Mathematikformeln (remark-math + rehype-katex)
Dynamisches Laden und Rendern von Mermaid-Flussdiagrammen und Sequenzdiagrammen
Behebung von Tabellenerkennungskonflikten, Implementierung von adaptivem responsivem horizontalem Scrollen
Integration von 9 Anzhiyu-Stil-Alert-Benachrichtigungskarten
Implementierung der Entsperrung von lokal verschlüsselten Inhalten über ein Milchglas-Passwort-Popup
Hinzufügen von Gaußschem Weichzeichner und Mosaikmasken für Text und Bilder
Unterstützung weiterer Drittanbieter-Einbettungskomponenten (in kontinuierlicher Iteration)

2. Verbesserte adaptive Tabellen (Fixed Table Layout)

Tabellen zeigen keine Zellkompression, Verformung oder Rahmenabschneidung mehr und verfügen über einen subtilen Glanz im Tabellenkopf und abwechselnde Zeilenfarben:

Modulname	Kerntechnologieunterstützung	Interaktive Merkmale	Status-Badge
Mathematische Formeln	KaTeX + AST Compiler	Inline-/Block-adaptive Darstellung, keine Client-Leistungsbelastung	Stabile Unterstützung
Architekturdiagramme	Mermaid 11	Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Dark-Mode-adaptiv	Stabile Unterstützung
Verschlüsselter Inhalt	Passwort-Popup + Session-Speicherung	Milchglas-Dialog, Fehler-Vibrationsanimation, sichere Isolation	Kernspezifisch
Unschärfe und Mosaik	CSS Backdrop Filter	Hover/Klick zum Aufheben der Unschärfe, Bildmasken-Badge	Interaktionsverbesserung
Code-Hervorhebung	Shiki + Mac Enhancer	Hinzufügen/Löschen von Diff-Zeilen, Ein-Klick-Kopieren, Falten von sehr langem Code	Vollständig bereit
Bilder-Lightbox	Fullscreen Lightbox	Vollbild-Zoom für große Bilder, dunkle Überlagerung, `Esc`-Beenden	Benutzererfahrung verbessert

Dieser Blog bietet einen lokalen Inhaltspasswortschutzmechanismus, der über normales Markdown hinausgeht. Ohne die Seite neu zu laden, können Sie durch Klicken das ansprechende Anzhiyu-Milchglas-Passwort-Eingabedialogfeld aufrufen!

🔒

Dieser Abschnitt enthält geschützte, verschlüsselte Inhalte

Dieser Bereich enthält private Ressourcen und technische Kernparameter. Bitte geben Sie das autorisierte Passwort ein, um ihn anzuzeigen.

🎉 Passwort erfolgreich verifiziert! Entschlüsselter Inhalt wird angezeigt

Herzlichen Glückwunsch, Sie haben das geschützte technische Geheimnis erfolgreich entsperrt! Hier sind die verschlüsselten Lieferdaten:

Privates Code-Repository: git@github.com:shijianus/vip-internal-core.git
API-Zugriffstoken (Token): shijian_sec_9988_a1b2c3d4e5f6
Exklusiver Support-Kanal: Telegram Privatkanal @shijianus_insiders

Der Entsperrungsstatus wurde in Ihrer Browsersitzung gespeichert. Sie müssen das Passwort nach dem Aktualisieren der aktuellen Seite nicht erneut eingeben.

Sieben. Spezielle Funktionen: Gaußsche Unschärfe, Mosaik und Spoiler-Verbergen (Blur, Mosaic & Spoilers)

Im täglichen Schreiben ist es manchmal notwendig, sensible Inhalte, Plot-Antworten oder spannende Bilder visuell zu verwischen oder zu maskieren.

1. Gaußsche Unschärfe für Text (Gaussian Blur Text)

Dies ist ein wichtiger Spoiler-Text, der durch Unschärfe geschützt ist: Der wahre Mörder ist tatsächlich der Butler, er hat den Schlüssel bereits im dritten Kapitel heimlich ausgetauscht! (Fahren Sie mit der Maus darüber oder klicken Sie auf den Text oben, um die Unschärfe aufzuheben).

2. Mosaik-Text (Mosaic Mask Text)

Dies ist ein Text mit einer schwarzen Mosaikmaske: Vertrauliche Daten: SHA256-7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069 (Fahren Sie mit der Maus darüber oder klicken Sie, um den Klartext anzuzeigen).

3. Inline-Spoiler und versteckte Markierungen

Discord-Stil Spoiler-Maske: ||Dies ist eine Spoiler-Maske, die mit doppelten vertikalen Linien umschlossen ist und nach dem Klicken dauerhaft enthüllt wird.||
Direkt inline versteckter Inhalt: %%Dies ist ein inline versteckter Inhalt, der mit Prozentzeichen umschlossen ist und durch Klicken erweitert wird.%%

4. Bild-Gaußscher Weichzeichner (Blurred Image Protection)

Für Inhalte, die urheberrechtlich sensibel, mysteriös oder für Erwachsene bestimmt sind, kann ein Bild-Weichzeichnerschutz-Container verwendet werden:

Arbeitsplatzbild mit Weichzeichnerschutz

👁️ Überfahren oder klicken, um den Schleier zu lüften

5. Ausklappbares Feld für versteckte Inhalte (Hidden Content Box)

Für QuickSort beträgt die durchschnittliche Zeitkomplexität $\mathcal{O}(n \log n)$, während sie im schlimmsten Fall, wenn jede Partition ungleichmäßig ist, auf $\mathcal{O}(n^2)$ degeneriert. Durch die Einführung eines randomisierten Pivots kann die Wahrscheinlichkeit des schlimmsten Falls exponentiell gesenkt werden.

VIII. Falt- und Container-Komponenten (Tabs, Steps & Accordions)

1. Interaktive Tabs für mehrsprachiges Paketmanagement (Interactive Tabs)

Abhängigkeiten mit **pnpm** blitzschnell installieren und verknüpfen:

pnpm install remark-math rehype-katex katex mermaid

Standard-Paketmanager **npm** verwenden:

npm install remark-math rehype-katex katex mermaid

Modernen **Yarn**-Modus verwenden:

yarn add remark-math rehype-katex katex mermaid

Superschnelle **Bun**-Laufzeit verwenden:

bun add remark-math rehype-katex katex mermaid

2. Tutorial-Schrittleiste (Tutorial Steps)

Umgebungsvorbereitung und Abhängigkeitsinstallation

Führen Sie im Projektstammverzeichnis den Installationsbefehl aus, um Astro 6 sowie die Kernabhängigkeitspakete KaTeX und Mermaid einzubinden.

Astro Markdown Kompilierungspipeline konfigurieren

Registrieren Sie remarkMath und rehypeKatex in astro.config.mjs und konfigurieren Sie das Shiki Dual-Theme.

Enhancer und Stilbibliotheken einbinden

Binden Sie markdown-enhancements.css und die Feature-Erweiterungsskripte in das globale Layout BlogLayout.astro ein.

IX. Rich Media und plattformübergreifende Karten-Einbettungen (Embeds & Media Cards)

1. GitHub Repository-Karte (GitHub Repo Card)

Anzhiyu Theme – Ein minimalistisches, ästhetisch ansprechendes und funktionsreiches Hexo-Blog-Theme, die Quelle der Frontend-UI und des Design-Inspiration für diesen Blog.

2. Responsive Video-Einbettungskarte (Video Embed)

Bilibili 1080P Video-Einbettungsdemo

3. Audio-Musikkarte (Audio Card)

Sternenwanderung (Starry Wander)

shijianus · Originaler atmosphärischer Weißrausch

In akademischen oder langen technischen Artikeln sind Fußnoten eine unverzichtbare Ausdrucksform. Diese Website unterstützt nicht nur standardmäßige GFM-Fußnotensprünge, sondern auch Erläuterungs-Tooltips, die beim Überfahren mit der Maus erscheinen, sodass das Lesen abgeschlossen werden kann, ohne den aktuellen Ansichtsbereich verlassen zu müssen¹.

Hier ist eine zweite Fußnotenreferenz zur Themenarchitektur² und eine dritte ergänzende Anmerkung zur mathematischen Rendering-Leistung³.

11. Inline-Syntaxerweiterungen für Rich Text (Inline Typography)

Mehrfarbige Hervorhebungsmarkierungen (HTML-Form und Syntax-Zucker):
- Gelbe Hervorhebung (wichtige Anmerkung)
- Grüne Hervorhebung (erfolgreiche Empfehlung)
- Blaue Hervorhebung (Informationshinweis)
- Rosa Hervorhebung (Design-Inspiration)
- Lila Hervorhebung (tiefgreifendes Prinzip)
- Orange Hervorhebung (Bedienungswarnung)
- Rote Hervorhebung (Risikowarnung)
- Cyan-Hervorhebung (Netzwerkprotokoll)
- ==Kurz-Syntax-Zucker: green:Grüne Hervorhebung== und ==purple:Lila Hervorhebung==
Individuelle Unterstreichungen:
- Wellenförmige Betonungsunterstreichung (Wavy Underline)
- Gestrichelte Betonungsunterstreichung (Dashed Underline)
Tastenanzeige: Strg + Umschalt + P öffnet die Befehlspalette.
Pinyin/Zhuyin: 安知鱼ān zhī yú · 時間shí jiān.
Abkürzungs-Hover-Erklärung: CSS und HTML.
Status-Pill-Badge:
- Empfohlen
- Bestanden
- Achtung
- Kritisch
- Hinweis

Fazit: Aufbau eines eleganten und leistungsstarken Inhaltssystems

Durch diese vollständige Neugestaltung und Scan-Optimierung hat shijianus-blog im Bereich des Markdown-Renderings eine umfassende Ausdruckskraft erreicht, die der von nativen Hexo/Anzhiyu-Themes ebenbürtig oder sogar überlegen ist.

Von der präzisen Ableitung technischer Formeln bis hin zu lebendigen Mermaid-Geschäftsarchitekturdiagrammen; von sicheren lokalen Passwortdialogen bis hin zu unterhaltsamen Gaußschen Unschärfen und Spoiler-Masken – dieses System ermöglicht es, jeden Blogartikel auf die anständigste, professionellste und interaktivste Weise den Lesern zu präsentieren.

Astro 6 Architektur: Verwendet die Island Architecture (Inselarchitektur), um standardmäßig eine statische Bereitstellung ohne JavaScript zu erreichen, was die Ladezeit der ersten Seite und die SEO-Leistung erheblich verbessert. ↩
Anzhiyu: Eines der repräsentativsten modernen Geek-Design-Themes im Hexo-Ökosystem, bekannt für seine feinen Mikroanimationen und Informationshierarchie. ↩
KaTeX Leistung: Im Vergleich zum traditionellen MathJax kann KaTeX das gesamte statische Rendering von HTML/MathML bereits serverseitig abschließen, was die Leistung um mehr als das 10-fache steigert. ↩

Welcome to the All-in-One Markdown Rendering and Advanced Features System

This is a Comprehensive Markdown Syntax Demonstration and Technical User Manual specifically crafted for this blog (shijianus-blog). This site deeply draws upon the visual specifications of the open-source classic Hexo-Theme-Anzhiyu and the modern static rendering capabilities of Astro 6, having rebuilt and integrated a complete Markdown parsing system.

Whether it’s academic-grade LaTeX mathematical formulas, Mermaid architecture flowcharts, multi-language code switching, Diff comparisons, GitHub-style callout boxes, responsive table scrolling, or cutting-edge advanced features like password-encrypted pop-up unlocking, Gaussian blur and mosaic effects for text/images, and rich media cards, all are now natively supported here.

I. Mathematical Formulas (Math / KaTeX)

This blog integrates remark-math and rehype-katex rendering pipelines, supporting high-performance compilation and adaptive layout across all devices for both inline and block-level formulas.

1. Inline Math

Use $ ... $ directly in text to enclose LaTeX expressions:

Mass-energy equivalence: $E = mc^2$
Euler’s identity: $e^{i\pi} + 1 = 0$
Gaussian normal distribution probability density function: $f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$
Summation limit: $\lim_{n \to \infty} \sum_{k=1}^n \frac{1}{k^2} = \frac{\pi^2}{6}$

2. Display Math

Use $$ ... $$ to create standalone blocks, supporting multi-line derivations and matrix typesetting. On mobile devices, it includes a horizontal elastic scrolling container, ensuring page width is never broken:

\mathcal{L}\{\ddot{x}(t) + 2\zeta\omega_n\dot{x}(t) + \omega_n^2 x(t)\} = X(s)(s^2 + 2\zeta\omega_n s + \omega_n^2)

Maxwell’s Equations (Differential Form):

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Gaussian Integral and Matrix Operations:

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}, \quad \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

II. Diagrams as Code

The blog natively integrates the Mermaid 11 engine, supporting real-time compilation of diagram code into high-definition, vector SVG charts, and automatically adapting to light/dark mode.

1. Business Architecture and Decision Flowcharts (Flowchart)

graph TD
    A[Reader visits post] --> B{Is the post password-protected?}
    B -->|Yes| C[Anzhiyu frosted glass verification pop-up appears]
    C --> D{Password verification}
    D -->|Correct| E[Decrypts and renders content]
    D -->|Incorrect| F[Triggers shake animation and error message]
    B -->|No| E
    E --> G[Loads KaTeX formulas and Mermaid diagrams]
    G --> H[Presents full immersive reading experience]

2. System Interaction Sequence Diagrams (Sequence Diagram)

sequenceDiagram
    autonumber
    actor User as Reader (User)
    participant Browser as Client Browser
    participant PostPage as Article Rendering Engine
    participant Security as Encryption Security Module

    User->>Browser: Clicks protected encrypted content
    Browser->>PostPage: Prompts password input dialog
    User->>Browser: Enters access key
    Browser->>Security: Verifies password Hash
    alt Verification successful
        Security-->>Browser: Returns unlock token
        Browser->>PostPage: Decrypts content and plays smooth display animation
    else Verification failed
        Security-->>Browser: Returns password error
        Browser->>User: Triggers window shake and red text warning
    end

3. Project Delivery Gantt Charts (Gantt Chart)

gantt
    title Blog Theme Refactoring Project Schedule
    dateFormat  YYYY-MM-DD
    section Core Architecture
    Markdown Scanning Engine Upgrade     :done,    des1, 2026-08-01, 2026-08-07
    Table Style Refactoring and Conflict Prevention      :done,    des2, 2026-08-08, 2026-08-14
    section Key Features
    KaTeX Formulas and Mermaid Integration :done,    des3, 2026-08-15, 2026-08-20
    Encrypted Pop-up and Advanced Features Implementation     :active,  des4, 2026-08-21, 2026-08-28
    section Acceptance & Delivery
    Comprehensive Stress Testing and Visual Audit         :         des5, 2026-08-29, 2026-08-31

4. Pie Chart & GitGraph

pie title Blog Tech Stack Code Share
    "TypeScript / Astro" : 48
    "React 19 Components" : 26
    "Tailwind 4 & CSS" : 18
    "Markdown & Assets" : 8

gitGraph
   commit id: "Init v1.0"
   branch feature/markdown
   checkout feature/markdown
   commit id: "Add KaTeX & Math"
   commit id: "Fix Table Layout"
   commit id: "Add Admonitions"
   checkout main
   merge feature/markdown id: "Merge MD Enhancement"
   commit id: "Release v2.0" tag: "v2.0.0"

III. Admonition / Callout Blocks

Based on GitHub Alert syntax and Anzhiyu’s design aesthetics, supporting 9 different semantic color cards, and also supporting collapsible mode.

1. Standard Callouts

[!NOTE] Note: This is a standard background information or supplementary explanation, used to provide context for the article.

[!TIP] Tip: Use the shortcut Ctrl + K to quickly bring up the global article search panel!

[!IMPORTANT] Important: Before deploying to a production environment, please ensure that the BLOG_BUILD_TARGET=static environment variable is correctly injected.

[!WARNING] Warning: Do not hardcode database keys or cloud service private keys in public repositories.

[!CAUTION] Caution: Data table refactoring operations are irreversible. Please perform npm run cf:d1:migrate to back up data first!

[!DANGER] Danger: Directly deleting the production database will result in the permanent loss of all comments and user assets.

[!SUCCESS] Success: The static build process has been successfully completed, and all 43 static routes are ready!

[!QUESTION] Question: How can one achieve millisecond-level pure client-side full-text search in an environment without server-side dependencies?

[!QUOTE] Quote: “Good code is not only executable by machines but also elegantly conveys ideas to humans like poetry.”

2. Collapsible Details Admonitions

Adding - after the tag generates a collapsible admonition that is closed by default, while + makes it expanded by default:

[!TIP]- Click to expand: Production Environment Nginx High-Speed Cache Configuration Reference The following is the recommended long-term caching strategy for static resources:
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

IV. Advanced Code Block Features

All code blocks within our articles are equipped with macOS skeuomorphic traffic light control bars, language badges, one-click copy, added/deleted line Diff comparison, and automatic folding for overly long code mechanisms.

1. TypeScript Code Example (with Added/Deleted Line Diff)

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  site: 'https://shijian.us',
- output: 'server', // Old server-side rendering configuration
+ output: 'static', // [!code ++] Upgraded to static export mode, speeding up by 300%
  markdown: {
+   remarkPlugins: [remarkMath], // [!code ++]
+   rehypePlugins: [rehypeKatex], // [!code ++]
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark-dimmed',
      },
    },
  },
});

2. Overly Long Code Folding Demo (Automatically limits height and provides an expand button)

{
  "project": "shijianus-blog",
  "version": "2.0.0",
  "author": "shijianus",
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
    "@astrojs/node": "^10.0.6",
    "@astrojs/react": "^5.0.2",
    "@tailwindcss/postcss": "^4.2.4",
    "@tailwindcss/vite": "^4.2.2",
    "astro": "^6.1.3",
    "katex": "^0.16.11",
    "lucide-react": "^0.460.0",
    "mermaid": "^11.4.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.2.2"
  },
  "scripts": {
    "dev": "astro dev --host 0.0.0.0",
    "build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
    "preview": "astro preview",
    "clean": "node scripts/clean.mjs"
  },
  "keywords": [
    "astro",
    "blog",
    "anzhiyu",
    "katex",
    "mermaid",
    "tailwind4"
  ]
}

V. Task Lists & Enhanced Tables

1. Interactive GFM Task Lists

Deeply parse LaTeX math formulas (remark-math + rehype-katex)
Dynamically load and render Mermaid flowcharts and sequence diagrams
Fix table recognition conflicts, enable adaptive responsive horizontal scrolling
Inject Anzhiyu’s 9 styles of Alert notification cards
Implement frosted glass password modal unlock for partially encrypted content
Add Gaussian blur and mosaic masks for text and images
Support more third-party embedded components (continuously iterating)

2. Enhanced Adaptive Tables (Fixed Table Layout)

Tables no longer suffer from cell compression, deformation, or frame truncation issues, and come with a subtle header glow and alternating row colors:

Module Name	Core Technology Support	Interactive Features	Status Badge
Math Formulas	KaTeX + AST Compiler	Inline/block adaptive rendering, no client-side performance burden	Stable Support
Architecture Diagrams	Mermaid 11	Flowcharts, sequence diagrams, Gantt charts, dark mode adaptive	Stable Support
Encrypted Content	Password Modal + Session Storage	Frosted glass dialog, error shake animation, secure isolation	Core Feature
Blur & Mosaic	CSS Backdrop Filter	Hover/click to unblur, image mask badge	Interactive Enhancement
Code Highlighting	Shiki + Mac Enhancer	Add/delete Diff lines, one-click copy, long code folding	Fully Ready
Image Lightbox	Fullscreen Lightbox	Full-screen zoom for large images, dark overlay, `Esc` to exit	Experience Enhancement

This blog offers a partial content password protection mechanism that goes beyond standard Markdown. No page refresh needed; simply click to bring up the elegant Anzhiyu frosted glass password input dialog!

🔒

This paragraph contains protected encrypted content

This area contains private resources and core technical parameters. Please enter the authorization password to unlock and view.

🎉 Password verification successful! Decrypted content is now displayed

Congratulations, you have successfully unlocked the protected technical secret! Below is the encrypted delivery data:

Private Code Repository: git@github.com:shijianus/vip-internal-core.git
API Access Token (Token): shijian_sec_9988_a1b2c3d4e5f6
Exclusive Support Channel: Telegram Private Channel @shijianus_insiders

The unlocked status has been saved in your browser session; no need to re-enter after refreshing the current page.

VII. Special Feature: Blur, Mosaic & Spoilers

In daily writing, it’s sometimes necessary to visually obscure sensitive content, plot answers, or suspenseful images with blur.

1. Gaussian Blur Text

This is a critical spoiler text protected by blur: Actually, the real murderer is the butler; he secretly swapped the keys in chapter three! (Hover or click the text above to remove the blur).

2. Mosaic Mask Text

This is text with a mosaic black mask: Confidential Data: SHA256-7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069 (Hover or click to view plain text).

3. Inline Spoilers & Hidden Markers

Discord-style spoiler mask: ||This is a spoiler mask enclosed by double vertical bars; click to reveal permanently.||
Direct inline hidden content: %%This is inline hidden content enclosed by percent signs; click to expand.%%

4. Blurred Image Protection

For content involving copyright sensitivity, suspense, or coming-of-age themes, a blurred image protection container can be used:

👁️ Hover or click to reveal

5. Hidden Content Box

For QuickSort, the average time complexity is $\mathcal{O}(n \log n)$, degrading to $\mathcal{O}(n^2)$ in the worst case when partitions are consistently uneven. By introducing a Randomized Pivot, the probability of the worst case can be reduced to exponentially low levels.

VIII. Collapsible & Container Components (Tabs, Steps & Accordions)

1. Multi-Language Package Management Tabs (Interactive Tabs)

Use **pnpm** for lightning-fast installation and dependency linking:

pnpm install remark-math rehype-katex katex mermaid

Use the standard **npm** package manager:

npm install remark-math rehype-katex katex mermaid

Use **Yarn** in modern mode:

yarn add remark-math rehype-katex katex mermaid

Use the ultra-fast **Bun** runtime:

bun add remark-math rehype-katex katex mermaid

2. Tutorial Steps

Environment Setup and Dependency Installation

Execute the installation command in the project root directory to introduce Astro 6 and core dependencies like KaTeX, Mermaid.

Configure Astro Markdown Compilation Pipeline

Mount Enhancer and Style Library

Introduce `markdown-enhancements.css` and feature enhancement scripts in the global layout `BlogLayout.astro`.

IX. Rich Media & Cross-Platform Card Embeds

1. GitHub Repository Card

Anzhiyu Theme - A concise, high-aesthetic, feature-rich Hexo blog theme, the source of this blog's frontend UI and design inspiration.

2. Responsive Video Embed Card

Bilibili 1080P Video Embed Demo

3. Audio Music Card

Starry Wander (Starry Wander)

shijianus · Original Ambient White Noise

X. Footnotes & Hover Tooltips

Footnotes are an indispensable form of expression in academic or long-form technical articles. This site not only supports standard GFM footnote jumps but also pop-up explanation bubbles on mouse hover, allowing you to read without leaving the current viewport¹.

Here is a second footnote reference about the theme architecture², and a third supplementary note on mathematical rendering performance³.

XI. Rich Text Inline Syntax Extensions

Colorful Highlight Markers (HTML Form and Syntactic Sugar):
- Yellow Highlight (Key Annotation)
- Green Highlight (Successful Recommendation)
- Blue Highlight (Information Clue)
- Pink Highlight (Design Inspiration)
- Purple Highlight (In-depth Principle)
- Orange Highlight (Operation Warning)
- Red Highlight (Risk Alert)
- Cyan Highlight (Network Protocol)
- ==Syntactic Sugar Shortcut: green:Green Highlight== and ==purple:Purple Highlight==
Custom Underlines:
- Wavy Emphasis Underline (Wavy Underline)
- Dashed Emphasis Underline (Dashed Underline)
Key Display: Ctrl + Shift + P to open the command palette.
Pinyin/Zhuyin: Anzhiyuān zhī yú · Timeshí jiān.
Acronym Hover Explanations: CSS and HTML.
Status Capsule Badges:
- Recommended
- Passed
- Note
- Critical
- Hint

Conclusion: Building an Elegant and Powerful Content System

Through this comprehensive refactoring and scanning optimization, shijianus-blog now boasts overall performance in Markdown rendering that rivals or even surpasses native Hexo/Anzhiyu themes.

From rigorous technical formula derivations to vivid Mermaid business architecture diagrams; from secure localized password dialogs to engaging Gaussian blur and spoiler overlays—this system enables every blog post to be presented to readers in the most polished, professional, and interactive manner possible.

Astro 6 Architecture: Adopts Island Architecture, achieving zero JavaScript static delivery by default, significantly improving first-screen loading and SEO performance. ↩
Anzhiyu: One of the most representative modern geek design themes in the Hexo ecosystem, known for its refined micro-animations and information hierarchy. ↩
KaTeX Performance: Compared to traditional MathJax, KaTeX can complete all HTML/MathML static rendering on the server side, improving performance by more than 10 times. ↩

Bienvenido al sistema de renderizado Markdown todo en uno y funciones especiales

Este es un manual de uso técnico y demostración de sintaxis Markdown completa creado específicamente para este blog (shijianus-blog). Este sitio ha absorbido profundamente las especificaciones visuales del clásico de código abierto Hexo-Theme-Anzhiyu y las capacidades de renderizado estático moderno de Astro 6, reconstruyendo e integrando un sistema completo de análisis de Markdown.

Ya sean fórmulas matemáticas LaTeX de nivel académico, diagramas de flujo de arquitectura Mermaid, cambio de código multilingüe, comparación de diferencias Diff, cuadros de notificación estilo GitHub, desplazamiento adaptable de tablas, o funciones especiales de vanguardia como desbloqueo de ventanas emergentes con contraseña cifrada, desenfoque gaussiano y mosaico de texto/imágenes, y tarjetas de medios enriquecidos, todo ha recibido soporte nativo aquí.

I. Fórmulas Matemáticas (Math / KaTeX)

Este blog integra las tuberías de renderizado remark-math y rehype-katex, que soportan la compilación de alto rendimiento y el diseño adaptable a todos los dispositivos para fórmulas en línea y en bloque.

1. Fórmulas Matemáticas en Línea (Inline Math)

Utilice $ ... $ directamente en el texto para envolver expresiones LaTeX:

Ecuación de masa-energía: $E = mc^2$
Identidad de Euler: $e^{i\pi} + 1 = 0$
Función de densidad de probabilidad normal gaussiana: $f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$
Límite de la suma: $\lim_{n \to \infty} \sum_{k=1}^n \frac{1}{k^2} = \frac{\pi^2}{6}$

2. Fórmulas Matemáticas en Bloque (Display Math)

Utilice $$ ... $$ para crear bloques independientes, soportando derivaciones de varias líneas y diseño de matrices. En dispositivos móviles, incluye un contenedor de desplazamiento horizontal elástico para no romper el ancho de la página:

\mathcal{L}\{\ddot{x}(t) + 2\zeta\omega_n\dot{x}(t) + \omega_n^2 x(t)\} = X(s)(s^2 + 2\zeta\omega_n s + \omega_n^2)

Ecuaciones de Maxwell (forma diferencial):

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Integral de Gauss y operaciones matriciales:

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}, \quad \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

II. Diagramas y Bloques de Código de Dibujo (Diagrams as Code)

El blog integra de forma nativa el motor Mermaid 11, que soporta la compilación en tiempo real de código de diagramas en gráficos SVG vectoriales de alta definición, y se adapta automáticamente a los modos claro/oscuro.

1. Diagrama de Flujo de Arquitectura de Negocio y Decisión (Flowchart)

graph TD
    A[Lector visita el artículo] --> B{¿El artículo tiene contraseña?}
    B -->|Sí| C[Abre ventana emergente de verificación de cristal esmerilado Anzhiyu]
    C --> D{Verificación de contraseña}
    D -->|Correcto| E[Desencripta y renderiza el contenido del cuerpo]
    D -->|Incorrecto| F[Activa animación de vibración y mensaje de error]
    B -->|No| E
    E --> G[Carga fórmulas KaTeX y diagramas Mermaid]
    G --> H[Presenta una experiencia de lectura inmersiva completa]

2. Diagrama de Secuencia de Interacción del Sistema (Sequence Diagram)

sequenceDiagram
    autonumber
    actor User as Lector (User)
    participant Browser as Navegador Cliente
    participant PostPage as Motor de Renderizado de Artículos
    participant Security as Módulo de Seguridad de Cifrado

    User->>Browser: Clic en contenido cifrado protegido
    Browser->>PostPage: Abre diálogo de entrada de contraseña
    User->>Browser: Introduce clave de acceso
    Browser->>Security: Verifica Hash de la contraseña
    alt Verificación exitosa
        Security-->>Browser: Devuelve token de desbloqueo
        Browser->>PostPage: Desencripta el cuerpo del texto y reproduce animación de visualización suave
    else Verificación fallida
        Security-->>Browser: Devuelve error de contraseña
        Browser->>User: Activa vibración de ventana y advertencia en rojo
    end

3. Diagrama de Gantt de Entrega del Proyecto (Gantt Chart)

gantt
    title Plan de Progreso del Proyecto de Reestructuración del Tema del Blog
    dateFormat  YYYY-MM-DD
    section Arquitectura Base
    Actualización del motor de escaneo Markdown     :done,    des1, 2026-08-01, 2026-08-07
    Reestructuración de estilos de tabla y prevención de conflictos      :done,    des2, 2026-08-08, 2026-08-14
    section Características Principales
    Integración de fórmulas KaTeX y Mermaid :done,    des3, 2026-08-15, 2026-08-20
    Implementación de ventanas emergentes cifradas y funciones especiales     :active,  des4, 2026-08-21, 2026-08-28
    section Aceptación y Entrega
    Pruebas de estrés completas y auditoría visual         :         des5, 2026-08-29, 2026-08-31

4. Gráfico de Pastel y Gráfico de Versiones (Pie Chart & GitGraph)

pie title Proporción de Código por Pila Tecnológica del Blog
    "TypeScript / Astro" : 48
    "React 19 Components" : 26
    "Tailwind 4 & CSS" : 18
    "Markdown & Assets" : 8

gitGraph
   commit id: "Inicio v1.0"
   branch feature/markdown
   checkout feature/markdown
   commit id: "Añadir KaTeX y Matemáticas"
   commit id: "Corregir Diseño de Tabla"
   commit id: "Añadir Advertencias"
   checkout main
   merge feature/markdown id: "Fusionar Mejora de MD"
   commit id: "Lanzamiento v2.0" tag: "v2.0.0"

Tres. Cuadros de Aviso y Bloques de Sugerencia (Admonition / Callout)

Basado en la sintaxis de Alerta de GitHub y la estética de diseño de Anzhiyu, soporta 9 tipos de tarjetas de colores con diferentes semánticas, y también soporta el modo plegable.

1. Cuadros de Aviso Estándar (Standard Callouts)

[!NOTA] Nota General (Note): Esta es una información de fondo estándar o una aclaración complementaria, utilizada para proporcionar contexto al artículo.

[!CONSEJO] Consejo Práctico (Tip): ¡Usa el atajo de teclado Ctrl + K para abrir rápidamente el panel de búsqueda global de artículos!

[!IMPORTANTE] Asunto Importante (Important): Antes de desplegar en un entorno de producción, asegúrate de que la variable de entorno BLOG_BUILD_TARGET=static se haya inyectado correctamente.

[!ADVERTENCIA] Advertencia de Riesgo (Warning): No codifiques directamente claves de bases de datos o claves privadas de servicios en la nube en repositorios públicos.

[!PRECAUCIÓN] Advertencia de Peligro (Caution): La operación de refactorización de tablas de datos es irreversible, ¡ejecuta primero npm run cf:d1:migrate para hacer una copia de seguridad de los datos!

[!PELIGRO] Peligro Mortal (Danger): Eliminar directamente la base de datos de producción resultará en la pérdida permanente de todos los comentarios y activos de usuario.

[!ÉXITO] Operación Exitosa (Success): ¡El proceso de construcción estática se ha completado con éxito, todas las 43 rutas estáticas están listas!

[!PREGUNTA] Pregunta de Discusión (Question): ¿Cómo implementar una búsqueda de texto completo puramente del lado del cliente en milisegundos en un entorno sin dependencias de servidor?

[!CITA] Cita Destacada (Quote): “El buen código no solo puede ser ejecutado por máquinas, sino que también puede transmitir ideas a los humanos con la elegancia de la poesía.”

2. Cuadros de Aviso Plegables (Collapsible Details Admonitions)

Añade - después de la etiqueta para generar un cuadro de aviso plegable que se cierra por defecto, y + para que se expanda por defecto:

[!CONSEJO]- Haz clic para expandir: Referencia de Configuración de Caché Ultrarrápida de Nginx en Entorno de Producción A continuación se presenta la estrategia recomendada para el almacenamiento en caché a largo plazo de recursos estáticos:
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

Cuatro. Funcionalidades Avanzadas de Bloques de Código (Advanced Code Blocks)

Hemos dotado a todos los bloques de código dentro de los artículos con barras de control de semáforo de macOS (skeuomorphic), insignias de lenguaje, copia con un clic, comparación Diff de líneas añadidas/eliminadas y un mecanismo de plegado automático para código muy largo.

1. Ejemplo de Código TypeScript (con Diff de Líneas Añadidas/Eliminadas)

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  site: 'https://shijian.us',
- output: 'server', // Antigua configuración de renderizado del lado del servidor
+ output: 'static', // [!code ++] Actualizado a modo de exportación estática, acelera un 300%
  markdown: {
+   remarkPlugins: [remarkMath], // [!code ++]
+   rehypePlugins: [rehypeKatex], // [!code ++]
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark-dimmed',
      },
    },
  },
});

2. Demostración de Plegado de Código Muy Largo (con Altura Limitada Automáticamente y Botón de Expandir)

{
  "project": "shijianus-blog",
  "version": "2.0.0",
  "author": "shijianus",
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
    "@astrojs/node": "^10.0.6",
    "@astrojs/react": "^5.0.2",
    "@tailwindcss/postcss": "^4.2.4",
    "@tailwindcss/vite": "^4.2.2",
    "astro": "^6.1.3",
    "katex": "^0.16.11",
    "lucide-react": "^0.460.0",
    "mermaid": "^11.4.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.2.2"
  },
  "scripts": {
    "dev": "astro dev --host 0.0.0.0",
    "build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
    "preview": "astro preview",
    "clean": "node scripts/clean.mjs"
  },
  "keywords": [
    "astro",
    "blog",
    "anzhiyu",
    "katex",
    "mermaid",
    "tailwind4"
  ]
}

V. Mejora Completa de Listas de Tareas y Tablas (Task Lists & Tables)

1. Listas de Tareas GFM Interactivas (Task Lists)

Análisis profundo de fórmulas matemáticas LaTeX (remark-math + rehype-katex)
Carga y renderizado dinámico de diagramas de flujo y secuencia Mermaid
Corrección de conflictos de reconocimiento de tablas, implementación de desplazamiento horizontal responsivo y adaptativo
Inyección de 9 estilos de tarjetas de notificación de alerta An Zhi Yu
Implementación de desbloqueo de contenido cifrado parcial con ventana emergente de contraseña de efecto cristal esmerilado
Adición de desenfoque gaussiano y máscara de mosaico para texto e imágenes
Soporte para más componentes incrustados de terceros (en iteración continua)

2. Tablas Adaptativas Mejoradas (Fixed Table Layout)

Las tablas ya no presentan problemas de compresión o truncamiento de celdas, y vienen con un sutil brillo en el encabezado y alternancia de color en las filas:

Nombre del Módulo	Soporte Tecnológico Clave	Características Interactivas	Estado
Fórmulas Matemáticas	KaTeX + Compilador AST	Renderizado adaptativo en línea/bloque, sin carga de rendimiento para el cliente	Soporte Estable
Diagramas de Arquitectura	Mermaid 11	Diagramas de flujo, de secuencia, de Gantt, adaptativos al modo oscuro	Soporte Estable
Contenido Cifrado	Ventana emergente de contraseña + Almacenamiento de Sesión	Diálogo de cristal esmerilado, animación de vibración de error, aislamiento seguro	Característica Clave
Desenfoque y Mosaico	Filtro de Fondo CSS	Desenfoque al pasar el ratón/clic, insignia de máscara de imagen	Mejora Interactiva
Resaltado de Código	Shiki + Mac Enhancer	Líneas Diff de adición/eliminación, copiar con un clic, plegado de código largo	Listo y Completo
Lightbox de Imágenes	Lightbox de Pantalla Completa	Zoom de imagen grande a pantalla completa, superposición oscura, salir con `Esc`	Mejora de Experiencia

Este blog ofrece un mecanismo de protección de contenido parcial con contraseña que va más allá del Markdown ordinario. ¡Sin necesidad de recargar la página, un clic puede activar el elegante cuadro de diálogo de entrada de contraseña de cristal esmerilado de An Zhi Yu!

🔒

Este párrafo contiene contenido cifrado protegido

Esta área contiene recursos privados y parámetros técnicos clave. Ingrese la contraseña autorizada para desbloquear y ver.

🎉 ¡Verificación de contraseña exitosa! Contenido descifrado presentado

¡Felicidades! Ha desbloqueado con éxito el secreto técnico protegido. A continuación, se presentan los datos de entrega cifrados:

Repositorio de Código Privado: git@github.com:shijianus/vip-internal-core.git
Token de Acceso a la API (Token): shijian_sec_9988_a1b2c3d4e5f6
Canal de Soporte Exclusivo: Canal privado de Telegram @shijianus_insiders

El estado de desbloqueo se ha guardado en su sesión del navegador; no es necesario volver a introducirlo después de actualizar la página actual.

VII. Función Especial: Desenfoque Gaussiano, Mosaico y Ocultación de Spoilers (Blur, Mosaic & Spoilers)

En la escritura diaria, a veces es necesario aplicar un desenfoque visual o una máscara a contenido sensible, respuestas de la trama o imágenes de suspenso.

1. Texto con Desenfoque Gaussiano (Gaussian Blur Text)

Este es un texto clave de spoiler protegido por desenfoque: ¡En realidad, el verdadero asesino es el mayordomo, quien ya había cambiado la llave en secreto en el tercer capítulo! (Pase el ratón o haga clic en el texto de arriba para eliminar el desenfoque).

2. Texto con Máscara de Mosaico (Mosaic Mask Text)

Este es un texto con una máscara de mosaico negro: Datos confidenciales: SHA256-7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069 (Pase el ratón o haga clic para ver el texto sin formato).

3. Spoilers en Línea y Marcadores Ocultos

Máscara de spoiler estilo Discord: ||Este es un spoiler oculto entre dobles barras verticales, haga clic para revelarlo permanentemente.||
Contenido oculto en línea directo: %%Aquí hay contenido oculto en línea envuelto en signos de porcentaje, haga clic para expandir.%%

4. Protección de Imagen Borrosa (Blurred Image Protection)

Para contenido sensible a derechos de autor, de suspense o para adultos, se puede usar un contenedor de protección de imagen borrosa:

Imagen de banco de trabajo con protección borrosa

👁️ Pasa el ratón o haz clic para desvelar

5. Caja de Contenido Oculto (Hidden Content Box)

Para el algoritmo de ordenación rápida (QuickSort), la complejidad temporal promedio es $\mathcal{O}(n \log n)$, y en el peor de los casos, cuando cada partición es desigual, degenera a $\mathcal{O}(n^2)$. Al introducir un pivote aleatorio (Randomized Pivot), la probabilidad del peor caso puede reducirse exponencialmente.

Ocho. Componentes de Plegado y Contenedor (Tabs, Steps & Accordions)

1. Pestañas Interactivas (Interactive Tabs)

Usa pnpm para instalar y enlazar dependencias rápidamente:

pnpm install remark-math rehype-katex katex mermaid

Usa el gestor de paquetes estándar npm:

npm install remark-math rehype-katex katex mermaid

Usa el modo moderno de Yarn:

yarn add remark-math rehype-katex katex mermaid

Usa el entorno de ejecución ultrarrápido Bun:

bun add remark-math rehype-katex katex mermaid

2. Pasos del Tutorial (Tutorial Steps)

Preparación del Entorno e Instalación de Dependencias

Ejecuta el comando de instalación en el directorio raíz del proyecto para incluir Astro 6 y los paquetes de dependencias principales de KaTeX y Mermaid.

Configuración del Pipeline de Compilación Markdown de Astro

Registra remarkMath y rehypeKatex en astro.config.mjs, y configura los dos temas de Shiki.

Montaje del Mejorador y la Biblioteca de Estilos

Incluye markdown-enhancements.css y los scripts de mejora de características en el diseño global BlogLayout.astro.

Nueve. Incrustaciones y Tarjetas Multimedia (Embeds & Media Cards)

1. Tarjeta de Repositorio de GitHub

Tema Anzhiyu - Un tema de blog Hexo conciso, estéticamente agradable y rico en funciones, la interfaz de usuario frontend y la fuente de inspiración de diseño de este blog.

2. Tarjeta de Video Responsiva (Embed)

Demostración de incrustación de video Bilibili 1080P

3. Tarjeta de Audio Musical

Viaje Estelar (Starry Wander)

shijianus · Ruido blanco ambiental original

Diez. Notas al Pie y Vistas Previas de Burbujas Flotantes

En artículos académicos o técnicos extensos, las notas al pie son una forma de expresión indispensable. Este sitio no solo admite los saltos de nota al pie estándar de GFM, sino que también permite que aparezcan burbujas de definición al pasar el ratón sobre ellas, lo que permite la lectura sin salir de la vista actual¹.

Aquí hay una segunda referencia a una nota al pie sobre la arquitectura del tema², y una tercera nota complementaria sobre el rendimiento de la renderización matemática³.

Once. Extensiones de Sintaxis en Línea de Texto Enriquecido

Marcadores de Resaltado Multicolor (Formato HTML y Azúcar Sintáctico):
- Resaltado amarillo (énfasis)
- Resaltado verde (recomendación exitosa)
- Resaltado azul (pista de información)
- Resaltado rosa (inspiración de diseño)
- Resaltado morado (principio profundo)
- Resaltado naranja (advertencia de operación)
- Resaltado rojo (advertencia de riesgo)
- Resaltado cian (protocolo de red)
- ==Azúcar sintáctico rápido: green:Resaltado verde== y ==purple:Resaltado morado==
Subrayados Personalizados:
- Subrayado ondulado de énfasis (Wavy Underline)
- Subrayado de énfasis con línea discontinua (Dashed Underline)
Visualización de Teclas: Ctrl + Shift + P para abrir el panel de comandos.
Pinyin/Zhuyin: 安知鱼ān zhī yú · 時間shí jiān。
Explicación Flotante de Abreviaturas: CSS y HTML.
Insignias de Estado en Cápsula:
- Recomendado
- Aprobado
- Atención
- Grave
- Sugerencia

Conclusión: Construyendo un sistema de contenido elegante y potente

Gracias a esta refactorización completa y optimización de escaneo, shijianus-blog ha logrado una capacidad comparable e incluso superior a los temas nativos de Hexo/Anzhiyu en el ámbito de la renderización de Markdown.

Desde rigurosas derivaciones de fórmulas técnicas hasta vívidos diagramas de arquitectura de negocio con Mermaid; desde diálogos de contraseña locales seguros hasta el divertido desenfoque gaussiano y las máscaras de spoiler, este sistema permite que cada artículo del blog pueda presentarse a los lectores de la manera más digna, profesional y con mayor interactividad.

Arquitectura Astro 6: Adopta la Arquitectura de Islas (Island Architecture), logrando una entrega estática predeterminada sin JavaScript, lo que mejora significativamente la carga de la primera pantalla y el rendimiento SEO. ↩
Anzhiyu: Uno de los temas de diseño geek modernos más representativos en el ecosistema Hexo, conocido por sus microanimaciones refinadas y su jerarquía de información. ↩
Rendimiento de KaTeX: En comparación con el MathJax tradicional, KaTeX puede completar toda la renderización estática de HTML/MathML en el lado del servidor, mejorando el rendimiento en más de 10 veces. ↩

Bienvenue dans le système de rendu Markdown tout-en-un et de fonctionnalités spéciales

Ceci est un manuel de démonstration de la syntaxe Markdown tout-en-un et d’utilisation technique conçu spécifiquement pour ce blog (shijianus-blog). Ce site s’est profondément inspiré des spécifications visuelles du classique open source Hexo-Theme-Anzhiyu et des capacités de rendu statique moderne d’Astro 6, reconstruisant et intégrant un système complet d’analyse Markdown.

Qu’il s’agisse de formules mathématiques LaTeX de niveau académique, de diagrammes de flux d’architecture Mermaid, de commutation de code multilingue, de comparaison de différences Diff, de boîtes de notification de style GitHub, de défilement adaptatif des tableaux, ou encore de fonctionnalités avancées telles que le déverrouillage par fenêtre contextuelle de mot de passe chiffré, le flou gaussien et la mosaïque de texte/images, et les cartes multimédia enrichies, toutes sont désormais prises en charge nativement ici.

I. Formules mathématiques (Math / KaTeX)

Ce blog intègre les pipelines de rendu remark-math et rehype-katex, prenant en charge la compilation haute performance des formules en ligne et en bloc, ainsi que la mise en page adaptative sur tous les appareils.

1. Formules mathématiques en ligne (Inline Math)

Utilisez $ ... $ directement dans le texte pour encadrer les expressions LaTeX :

Équation masse-énergie : $E = mc^2$
Identité d’Euler : $e^{i\pi} + 1 = 0$
Fonction de densité de la distribution normale de Gauss : $f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$
Limite de la somme : $\lim_{n \to \infty} \sum_{k=1}^n \frac{1}{k^2} = \frac{\pi^2}{6}$

2. Formules mathématiques en bloc (Display Math)

Utilisez $$ ... $$ pour créer des paragraphes indépendants, prenant en charge les dérivations multilignes et la mise en page matricielle. Sur les appareils mobiles, un conteneur de défilement horizontal élastique est intégré, garantissant de ne jamais rompre la largeur de la page :

\mathcal{L}\{\ddot{x}(t) + 2\zeta\omega_n\dot{x}(t) + \omega_n^2 x(t)\} = X(s)(s^2 + 2\zeta\omega_n s + \omega_n^2)

Équations de Maxwell (forme différentielle) :

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Intégrale de Gauss et opérations matricielles :

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}, \quad \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

II. Diagrammes et blocs de code de dessin (Diagrams as Code)

Le blog intègre nativement le moteur Mermaid 11, prenant en charge la compilation en temps réel du code de diagramme en diagrammes SVG vectoriels haute définition, et s’adaptant automatiquement aux modes clair/sombre.

1. Diagramme de flux d’architecture métier et de décision (Flowchart)

graph TD
    A[Lecteur visite l'article] --> B{L'article est-il protégé par un mot de passe ?}
    B -->|Oui| C[Fenêtre contextuelle de vérification Anzhiyu en verre dépoli apparaît]
    C --> D{Vérification du mot de passe}
    D -->|Correct| E[Décrypter et rendre le contenu du corps]
    D -->|Incorrect| F[Déclencher l'animation de vibration et le message d'erreur]
    B -->|Non| E
    E --> G[Charger les formules KaTeX et les diagrammes Mermaid]
    G --> H[Présenter une expérience de lecture immersive complète]

2. Diagramme de séquence d’interaction système (Sequence Diagram)

sequenceDiagram
    autonumber
    actor User as Lecteur (Utilisateur)
    participant Browser as Navigateur client
    participant PostPage as Moteur de rendu d'article
    participant Security as Module de sécurité de chiffrement

    User->>Browser: Clique sur le contenu chiffré protégé
    Browser->>PostPage: Ouvre la boîte de dialogue de saisie du mot de passe
    User->>Browser: Saisit la clé d'accès
    Browser->>Security: Vérifie le hachage du mot de passe
    alt Vérification réussie
        Security-->>Browser: Renvoie le jeton de déverrouillage
        Browser->>PostPage: Décrypte le corps et joue l'animation d'affichage fluide
    else Vérification échouée
        Security-->>Browser: Renvoie une erreur de mot de passe
        Browser->>User: Déclenche l'agitation de la fenêtre et l'alerte en rouge
    end

3. Diagramme de Gantt de livraison de projet (Gantt Chart)

gantt
    title Plan d'avancement de la refonte du thème du blog
    dateFormat  YYYY-MM-DD
    section Architecture de base
    Mise à niveau du moteur d'analyse Markdown     :done,    des1, 2026-08-01, 2026-08-07
    Refonte du style des tableaux et prévention des conflits      :done,    des2, 2026-08-08, 2026-08-14
    section Fonctionnalités clés
    Intégration des formules KaTeX et de Mermaid :done,    des3, 2026-08-15, 2026-08-20
    Implémentation des pop-ups chiffrés et des fonctions spéciales     :active,  des4, 2026-08-21, 2026-08-28
    section Acceptation et livraison
    Tests de charge complets et audit visuel         :         des5, 2026-08-29, 2026-08-31

4. Graphique circulaire et GitGraph

pie title Proportion du code par pile technologique du blog
    "TypeScript / Astro" : 48
    "Composants React 19" : 26
    "Tailwind 4 & CSS" : 18
    "Markdown & Actifs" : 8

gitGraph
   commit id: "Init v1.0"
   branch feature/markdown
   checkout feature/markdown
   commit id: "Ajout KaTeX & Math"
   commit id: "Correction de la mise en page des tableaux"
   commit id: "Ajout d'encadrés"
   checkout main
   merge feature/markdown id: "Fusion Amélioration MD"
   commit id: "Publication v2.0" tag: "v2.0.0"

III. Encadrés et blocs d’appel (Admonition / Callout)

Basé sur la syntaxe GitHub Alert et l’esthétique de conception d’Anzhiyu, il prend en charge 9 types de cartes colorées avec des sémantiques différentes, ainsi que le mode pliable.

1. Encadrés standards (Standard Callouts)

[!NOTE] Remarque (Note) : Il s’agit d’une information de fond standard ou d’une explication complémentaire, utilisée pour fournir le contexte de l’article.

[!TIP] Astuce (Tip) : Utilisez le raccourci clavier Ctrl + K pour afficher rapidement le panneau de recherche global d’articles !

[!IMPORTANT] Important (Important) : Avant de déployer en environnement de production, assurez-vous que la variable d’environnement BLOG_BUILD_TARGET=static a été correctement injectée.

[!WARNING] Avertissement (Warning) : Ne codez pas en dur les clés de base de données ou les clés privées de services cloud dans des dépôts publics.

[!CAUTION] Attention (Caution) : L’exécution d’opérations de refactoring de table de données est irréversible. Veuillez d’abord exécuter npm run cf:d1:migrate pour sauvegarder les données !

[!DANGER] Danger mortel (Danger) : La suppression directe de la base de données de production entraînera la perte permanente de tous les commentaires et actifs des utilisateurs.

[!SUCCESS] Opération réussie (Success) : Le processus de construction statique est terminé avec succès, toutes les 43 routes statiques sont prêtes !

[!QUESTION] Question (Question) : Comment réaliser une recherche plein texte côté client pur en millisecondes dans un environnement sans dépendance côté serveur ?

[!QUOTE] Citation sélectionnée (Quote) : « Un bon code n’est pas seulement exécutable par une machine, il transmet aussi élégamment des idées aux humains, comme un poème. »

2. Encadrés pliables (Collapsible Details Admonitions)

Ajoutez - après le marqueur pour générer un encadré pliable fermé par défaut, et + pour un encadré ouvert par défaut :

[!TIP]- Cliquez pour développer : Référence de configuration de cache Nginx ultra-rapide pour l’environnement de production Voici la stratégie de cache longue durée recommandée pour les ressources statiques :
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

IV. Fonctionnalités avancées des blocs de code (Advanced Code Blocks)

Nous avons doté tous les blocs de code des articles des mécanismes suivants : barre de contrôle de feux de circulation macOS skeuomorphique, badge de langue, copie en un clic, comparaison Diff des lignes ajoutées/supprimées et pliage automatique du code très long.

1. Exemple de code TypeScript (avec Diff des lignes ajoutées/supprimées)

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  site: 'https://shijian.us',
- output: 'server', // Ancienne configuration de rendu côté serveur
+ output: 'static', // [!code ++] Mise à niveau vers le mode d'exportation statique, accélération de 300 %
  markdown: {
+   remarkPlugins: [remarkMath], // [!code ++]
+   rehypePlugins: [rehypeKatex], // [!code ++]
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark-dimmed',
      },
    },
  },
});

2. Démonstration de pliage de code très long (hauteur limitée automatiquement avec bouton d’extension)

{
  "project": "shijianus-blog",
  "version": "2.0.0",
  "author": "shijianus",
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
    "@astrojs/node": "^10.0.6",
    "@astrojs/react": "^5.0.2",
    "@tailwindcss/postcss": "^4.2.4",
    "@tailwindcss/vite": "^4.2.2",
    "astro": "^6.1.3",
    "katex": "^0.16.11",
    "lucide-react": "^0.460.0",
    "mermaid": "^11.4.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.2.2"
  },
  "scripts": {
    "dev": "astro dev --host 0.0.0.0",
    "build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
    "preview": "astro preview",
    "clean": "node scripts/clean.mjs"
  },
  "keywords": [
    "astro",
    "blog",
    "anzhiyu",
    "katex",
    "mermaid",
    "tailwind4"
  ]
}

V. Améliorations complètes des listes de tâches et des tableaux (Task Lists & Tables)

1. Listes de tâches GFM interactives (Task Lists)

Analyse approfondie des formules mathématiques LaTeX (remark-math + rehype-katex)
Chargement et rendu dynamiques des organigrammes et diagrammes de séquence Mermaid
Correction des conflits de reconnaissance de tableau, implémentation du défilement horizontal adaptatif et réactif
Injection de 9 styles de cartes d’alerte An Zhiyu
Implémentation du déverrouillage par fenêtre modale de mot de passe en verre dépoli pour le contenu chiffré local
Ajout de flou gaussien et de masques mosaïques pour le texte et les images
Prise en charge de plus de composants intégrés tiers (en itération continue)

2. Tableaux adaptatifs améliorés (Fixed Table Layout)

Les tableaux ne présentent plus de problèmes de compression ou de troncation des cellules, et sont livrés avec un léger thème d’en-tête et une coloration alternée des lignes :

Nom du module	Support technique clé	Caractéristiques interactives	Badge d’état
Formules mathématiques	KaTeX + Compilateur AST	Rendu adaptatif en ligne/bloc, sans charge de performance côté client	Support stable
Diagrammes d’architecture	Mermaid 11	Organigrammes, diagrammes de séquence, diagrammes de Gantt, adaptation au mode sombre	Support stable
Contenu chiffré	Fenêtre modale de mot de passe + Stockage de session	Boîte de dialogue en verre dépoli, animation de vibration d’erreur, isolation sécurisée	Fonctionnalité clé
Flou et mosaïque	Filtre d’arrière-plan CSS	Désactivation du flou au survol/clic, badge de masquage d’image	Amélioration interactive
Mise en évidence du code	Shiki + Mac Enhancer	Lignes Diff ajoutées/supprimées, copie en un clic, pliage de code long	Prêt et complet
Visionneuse d’images	Visionneuse plein écran	Zoom plein écran pour les grandes images, masque sombre, sortie par `Esc`	Amélioration de l’expérience

Ce blog offre un mécanisme de protection par mot de passe pour le contenu local qui va au-delà du Markdown ordinaire. Sans avoir à rafraîchir la page, un simple clic suffit pour faire apparaître la magnifique boîte de dialogue de saisie de mot de passe en verre dépoli d’An Zhiyu !

🔒

Ce paragraphe contient du contenu chiffré et protégé

Cette zone contient des ressources privées et des paramètres techniques clés. Veuillez entrer le mot de passe autorisé pour déverrouiller et afficher.

🎉 Vérification du mot de passe réussie ! Le contenu déchiffré est affiché

Félicitations, vous avez déverrouillé avec succès le secret technique protégé ! Voici les données de livraison chiffrées :

Dépôt de code privé : git@github.com:shijianus/vip-internal-core.git
Jeton d'accès API (Token) : shijian_sec_9988_a1b2c3d4e5f6
Canal de support exclusif : Canal privé Telegram @shijianus_insiders

L'état de déverrouillage est enregistré dans votre session de navigateur ; il n'est pas nécessaire de le saisir à nouveau après avoir rafraîchi la page actuelle.

VII. Fonctionnalité spécifique : Flou gaussien, mosaïque et masquage de spoilers (Blur, Mosaic & Spoilers)

Dans la rédaction quotidienne, il est parfois nécessaire de masquer visuellement du contenu sensible, des réponses d’intrigue ou des images à suspense par un flou.

1. Texte avec flou gaussien (Gaussian Blur Text)

Ceci est un texte spoiler clé protégé par un flou : En fait, le véritable meurtrier est le majordome, il avait déjà secrètement échangé les clés au chapitre trois ! (Passez la souris ou cliquez sur le texte ci-dessus pour annuler le flou).

2. Texte en mosaïque (Mosaic Mask Text)

Ceci est un texte utilisant un masque noir en mosaïque : Données confidentielles : SHA256-7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069 (Passez la souris ou cliquez pour voir le texte en clair).

3. Spoilers en ligne et balises de masquage

Masque de spoiler de style Discord : ||Ceci est un masque de spoiler entouré de doubles barres verticales, qui se révèle définitivement après un clic.||
Contenu masqué directement en ligne : %%Ceci est un contenu masqué en ligne entouré de signes de pourcentage, cliquez pour développer.%%

4. Flou Gaussien d’Image (Protection d’Image Floue)

Pour le contenu sensible au droit d’auteur, suspens ou pour adultes, un conteneur de protection d’image floue peut être utilisé :

👁️ Survolez ou cliquez pour révéler

5. Panneau de Contenu Masqué (Boîte de Contenu Caché)

Pour le tri rapide (QuickSort), la complexité temporelle moyenne est de $\mathcal{O}(n \log n)$, et dans le pire des cas, lorsque chaque partition est inégale, elle dégénère en $\mathcal{O}(n^2)$. L'introduction d'un pivot aléatoire (Randomized Pivot) peut réduire la probabilité du pire des cas à un niveau exponentiellement bas.

VIII. Composants Pliables et Conteneurs (Onglets, Étapes & Accordéons)

1. Onglets de Gestion de Paquets (Onglets Interactifs)

Utilisez pnpm pour installer et lier les dépendances ultra-rapidement :

pnpm install remark-math rehype-katex katex mermaid

Utilisez le gestionnaire de paquets standard npm :

npm install remark-math rehype-katex katex mermaid

Utilisez le mode moderne de Yarn :

yarn add remark-math rehype-katex katex mermaid

Utilisez le runtime ultra-rapide Bun :

bun add remark-math rehype-katex katex mermaid

2. Étapes du Tutoriel (Étapes de Tutoriel)

Préparation de l'environnement et installation des dépendances

Exécutez la commande d'installation à la racine du projet pour introduire Astro 6 et les dépendances principales de KaTeX, Mermaid.

Configuration du pipeline de compilation Astro Markdown

Enregistrez remarkMath et rehypeKatex dans astro.config.mjs, et configurez le double thème Shiki.

Montage de l'Enhancer et de la bibliothèque de styles

Introduisez markdown-enhancements.css et les scripts d'amélioration des fonctionnalités dans la mise en page globale BlogLayout.astro.

IX. Intégrations de Médias Riches et Cartes Multiplateformes (Embeds & Media Cards)

1. Carte de dépôt GitHub (GitHub Repo Card)

Thème Anzhiyu - Un thème de blog Hexo simple, esthétique et riche en fonctionnalités, source d'inspiration pour l'interface utilisateur et le design de ce blog.

2. Carte de lecture vidéo responsive (Video Embed)

Démonstration d'intégration vidéo Bilibili 1080P

3. Carte audio musicale (Audio Card)

Voyage stellaire (Starry Wander)

shijianus · Bruit blanc ambiant original

Dix. Notes de bas de page et aperçus de bulles au survol (Footnotes & Hover Tooltips)

Dans les articles académiques ou techniques longs, les notes de bas de page sont une forme d’expression indispensable. Ce site prend non seulement en charge les sauts de note de bas de page GFM standard, mais permet également aux bulles d’explication d’apparaître au survol de la souris, permettant une lecture complète sans quitter la fenêtre d’affichage actuelle¹.

Voici une deuxième référence de note de bas de page concernant l’architecture du thème², ainsi qu’une troisième note complémentaire sur les performances de rendu mathématique³.

Onze. Extensions de syntaxe en ligne de texte enrichi (Inline Typography)

Marquage en surbrillance multicolore (forme HTML et sucre syntaxique) :
- Surlignage jaune (mise en évidence)
- Surlignage vert (recommandation réussie)
- Surlignage bleu (indice d’information)
- Surlignage rose (inspiration design)
- Surlignage violet (principe approfondi)
- Surlignage orange (alerte d’opération)
- Surlignage rouge (avertissement de risque)
- Surlignage cyan (protocole réseau)
- ==Sucre syntaxique rapide : green:Surlignage vert== et ==purple:Surlignage violet==
Soulignements personnalisés :
- Soulignement ondulé (Wavy Underline)
- Soulignement en pointillés (Dashed Underline)
Affichage des touches : Ctrl + Shift + P pour ouvrir le panneau de commandes.
Pinyin/Zhuyin : 安知鱼ān zhī yú · 時間shí jiān.
Explication au survol des acronymes : CSS et HTML.
Badges de statut :
- Recommandé
- Approuvé
- Attention
- Grave
- Indice

Conclusion : Construire un système de contenu élégant et puissant

Grâce à cette refonte complète et à l’optimisation par balayage, shijianus-blog a désormais une capacité à rivaliser, voire à surpasser, les thèmes natifs Hexo/Anzhiyu en termes de performances globales dans le domaine du rendu Markdown.

Des dérivations rigoureuses de formules techniques aux diagrammes d’architecture métier Mermaid vivants ; des boîtes de dialogue de mot de passe locales sécurisées aux flous gaussien et masques anti-spoiler amusants — ce système permet à chaque article de blog d’être présenté aux lecteurs de la manière la plus digne, la plus professionnelle et la plus interactive.

Architecture Astro 6 : Adopte l’architecture en îlots (Island Architecture) pour une livraison statique par défaut sans JavaScript, améliorant considérablement le chargement initial de la page et les performances SEO. ↩
Anzhiyu : L’un des thèmes de design geek modernes les plus représentatifs de l’écosystème Hexo, réputé pour ses micro-animations délicates et sa hiérarchie d’informations. ↩
Performances de KaTeX : Comparé à MathJax traditionnel, KaTeX peut effectuer tout le rendu statique HTML/MathML côté serveur, améliorant les performances de plus de 10 fois. ↩

歡迎體驗全能 Markdown 渲染與特異功能系統

這是一篇專為本部落格（shijianus-blog）打造的 Markdown 全能語法演示與技術使用手冊。本站深度汲取了開源經典 Hexo-Theme-Anzhiyu（安知魚） 的視覺規範與 Astro 6 現代靜態渲染能力，重構並內建了完整的 Markdown 解析體系。

無論是學術級的 LaTeX 數學公式、Mermaid 架構流程圖，還是多語言程式碼切換、Diff 差異對比、GitHub 風格告示框、表格自適應捲動，抑或是前沿的 密碼加密彈窗解鎖、文字/圖片高斯模糊與馬賽克、富媒體卡片 等特異功能，均已在此得到原生級支援。

一、數學公式（Math / KaTeX）

本部落格內建 remark-math 與 rehype-katex 渲染管線，支援行內公式與區塊級公式的高性能編譯與全設備自適應排版。

1. 行內數學公式（Inline Math）

在文本中直接使用 $ ... $ 包裹 LaTeX 表達式：

質能方程： $E = mc^2$
歐拉恆等式： $e^{i\pi} + 1 = 0$
高斯常態分佈密度函數： $f(x) = \frac{1}{\sigma \sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$
求和極限： $\lim_{n \to \infty} \sum_{k=1}^n \frac{1}{k^2} = \frac{\pi^2}{6}$

2. 區塊級數學公式（Display Math）

使用 $$ ... $$ 獨立成段，支援多行推導與矩陣排版。在行動裝置下自帶水平彈性捲動容器，絕不破壞頁面寬度：

\mathcal{L}\{\ddot{x}(t) + 2\zeta\omega_n\dot{x}(t) + \omega_n^2 x(t)\} = X(s)(s^2 + 2\zeta\omega_n s + \omega_n^2)

馬克士威方程組（微分形式）：

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

高斯積分與矩陣運算：

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}, \quad \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{bmatrix}

二、圖表與繪圖程式碼區塊（Diagrams as Code）

部落格原生整合 Mermaid 11 引擎，支援將圖表程式碼即時編譯為高清晰度、向量 SVG 圖表，並自動適配明亮/暗黑模式。

1. 業務架構與決策流程圖（Flowchart）

graph TD
    A[讀者造訪文章] --> B{文章是否設定密碼?}
    B -->|是| C[彈出安知魚毛玻璃驗證視窗]
    C --> D{密碼核對}
    D -->|正確| E[解密並渲染正文內容]
    D -->|錯誤| F[觸發震動動畫與錯誤提示]
    B -->|否| E
    E --> G[載入 KaTeX 公式與 Mermaid 圖表]
    G --> H[呈現完整沉浸式閱讀體驗]

2. 系統互動時序圖（Sequence Diagram）

sequenceDiagram
    autonumber
    actor User as 讀者 (User)
    participant Browser as 用戶端瀏覽器
    participant PostPage as 文章渲染引擎
    participant Security as 加密安全模組

    User->>Browser: 點擊受保護的加密內容
    Browser->>PostPage: 喚起密碼輸入對話框
    User->>Browser: 輸入存取金鑰
    Browser->>Security: 校驗口令 Hash
    alt 驗證成功
        Security-->>Browser: 返回解鎖令牌
        Browser->>PostPage: 解密正文並播放平滑展示動畫
    else 驗證失敗
        Security-->>Browser: 返回密碼錯誤
        Browser->>User: 觸發視窗搖晃與紅字警示
    end

3. 專案交付甘特圖（Gantt Chart）

gantt
    title 部落格主題重構工程推進計畫
    dateFormat  YYYY-MM-DD
    section 基礎架構
    Markdown 掃描引擎升級     :done,    des1, 2026-08-01, 2026-08-07
    表格樣式重構與防衝突      :done,    des2, 2026-08-08, 2026-08-14
    section 核心特性
    KaTeX 公式與 Mermaid 接入 :done,    des3, 2026-08-15, 2026-08-20
    加密彈窗與特異功能實現     :active,  des4, 2026-08-21, 2026-08-28
    section 驗收交付
    全景壓力測試與視覺審計         :         des5, 2026-08-29, 2026-08-31

4. 統計圓餅圖與版本圖（Pie Chart & GitGraph）

pie title 部落格技術棧程式碼佔比
    "TypeScript / Astro" : 48
    "React 19 Components" : 26
    "Tailwind 4 & CSS" : 18
    "Markdown & Assets" : 8

gitGraph
   commit id: "初始化 v1.0"
   branch 功能/Markdown
   checkout 功能/Markdown
   commit id: "新增 KaTeX 與數學公式"
   commit id: "修正表格佈局"
   commit id: "新增告示框"
   checkout main
   merge 功能/Markdown id: "合併 Markdown 增強功能"
   commit id: "發佈 v2.0" tag: "v2.0.0"

三、告示框與提示塊（Admonition / Callout）

基於 GitHub Alert 語法與安知魚設計美學，支援 9 種不同語義的彩色卡片，並支援 可摺疊模式。

1. 標準告示框（Standard Callouts）

[!NOTE] 常規備註（Note）：這是一條標準的背景資訊或補充說明，用於提供文章上下文。

[!TIP] 實用技巧（Tip）：使用快捷鍵 Ctrl + K 可以快速喚起全域文章搜尋面板！

[!IMPORTANT] 重要事項（Important）：在部署生產環境前，請務必確認 BLOG_BUILD_TARGET=static 環境變數已正確注入。

[!WARNING] 風險警告（Warning）：請勿在公開儲存庫中硬編碼資料庫金鑰或雲端服務私鑰。

[!CAUTION] 危險警示（Caution）：執行資料表重構操作具有不可逆性，請先執行 npm run cf:d1:migrate 備份資料！

[!DANGER] 致命危險（Danger）：直接刪除生產資料庫將導致全部評論與使用者資產永久損毀。

[!SUCCESS] 操作成功（Success）：靜態建構流程已成功完成，所有 43 個靜態路由已就緒！

[!QUESTION] 疑難探討（Question）：如何在無伺服器端依賴的環境下實現毫秒級的純客戶端全文檢索？

[!QUOTE] 精選引用（Quote）：「優秀的程式碼不僅能被機器執行，更能像詩歌一樣優雅地向人類傳達思想。」

2. 可摺疊告示框（Collapsible Details Admonitions）

在標記後添加 - 即可生成預設收起的摺疊告示框，添加 + 則為預設展開：

[!TIP]- 點擊展開查看：生產環境 Nginx 極速快取配置參考以下是推薦的靜態資源長效快取策略：
location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    access_log off;
}

四、進階程式碼區塊功能（Advanced Code Blocks）

我們為文章內的所有程式碼區塊賦予了 macOS 擬物交通燈控制條、語言徽章、一鍵複製、增刪行 Diff 對比 以及 超長程式碼自動摺疊 機制。

1. TypeScript 程式碼範例（帶增刪行 Diff）

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  site: 'https://shijian.us',
- output: 'server', // 舊的伺服器端渲染配置
+ output: 'static', // [!code ++] 升級為靜態匯出模式，提速 300%
  markdown: {
+   remarkPlugins: [remarkMath], // [!code ++]
+   rehypePlugins: [rehypeKatex], // [!code ++]
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark-dimmed',
      },
    },
  },
});

2. 超長程式碼摺疊演示（自動限制高度並提供展開按鈕）

{
  "project": "shijianus-blog",
  "version": "2.0.0",
  "author": "shijianus",
  "dependencies": {
    "@astrojs/mdx": "^5.0.3",
    "@astrojs/node": "^10.0.6",
    "@astrojs/react": "^5.0.2",
    "@tailwindcss/postcss": "^4.2.4",
    "@tailwindcss/vite": "^4.2.2",
    "astro": "^6.1.3",
    "katex": "^0.16.11",
    "lucide-react": "^0.460.0",
    "mermaid": "^11.4.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.2.2"
  },
  "scripts": {
    "dev": "astro dev --host 0.0.0.0",
    "build": "BLOG_BUILD_TARGET=static PUBLIC_STATIC_EXPORT=1 astro build",
    "preview": "astro preview",
    "clean": "node scripts/clean.mjs"
  },
  "keywords": [
    "astro",
    "blog",
    "anzhiyu",
    "katex",
    "mermaid",
    "tailwind4"
  ]
}

五、任務列表與表格全能增強（Task Lists & Tables）

1. 互動式 GFM 任務列表（Task Lists）

深度解析 LaTeX 數學公式（remark-math + rehype-katex）
動態載入並渲染 Mermaid 流程圖與序列圖
修復表格識別衝突，實現自適應響應式橫向捲動
注入安知魚 9 種風格 Alert 告示卡片
實現局部加密內容的毛玻璃密碼彈窗解鎖
增加文字與圖片高斯模糊、馬賽克遮罩
支援更多第三方嵌入元件（持續迭代中）

2. 增強型自適應表格（Fixed Table Layout）

表格不再出現儲存格擠壓變形或外框截斷問題，且自帶表頭主題微光與隔行變色：

模組名稱	核心技術支援	互動特性	狀態角標
數學公式	KaTeX + AST Compiler	行內/塊級自適應渲染，無客戶端效能負擔	穩定支援
架構圖表	Mermaid 11	流程圖、時序圖、甘特圖、暗黑自適應	穩定支援
加密內容	密碼彈窗 + Session 儲存	毛玻璃對話框、錯誤震動動畫、安全隔離	核心特異
模糊與馬賽克	CSS Backdrop Filter	懸浮/點擊解除模糊、圖片遮罩勳章	互動增強
程式碼高亮	Shiki + Mac Enhancer	增刪 Diff 行、一鍵複製、超長程式碼摺疊	完善就緒
圖片燈箱	Fullscreen Lightbox	大圖全螢幕縮放、暗色遮罩、`Esc` 退出	體驗增強

本部落格提供超越普通 Markdown 的 局部內容密碼保護機制。無需重新整理頁面，點擊即可喚起高顏值安知魚毛玻璃密碼輸入對話框！

🔒

此段落為受保護的加密內容

該區域包含私密資源與核心技術參數。請輸入授權密碼後解鎖查看。

🎉 密碼驗證成功！解密內容已呈現

恭喜您成功解鎖了受保護的技術秘密！以下是加密交付資料：

私有程式碼儲存庫：git@github.com:shijianus/vip-internal-core.git
API 存取令牌 (Token)：shijian_sec_9988_a1b2c3d4e5f6
專屬支援頻道：Telegram 私享頻道 @shijianus_insiders

解鎖狀態已保存在您的瀏覽器會話中，目前頁面重新整理後無需重複輸入。

七、特異功能：高斯模糊、馬賽克與劇透隱藏（Blur, Mosaic & Spoilers）

在日常寫作中，有時需要對敏感內容、劇情答案或懸念圖片進行視覺模糊遮擋。

1. 文字高斯模糊（Gaussian Blur Text）

這是一段被模糊保護的關鍵劇透文字：其實真正的兇手就是管家，他在第三章就已經偷偷換掉了鑰匙！（滑鼠懸浮或點擊上方文字即可解除模糊）。

2. 馬賽克文字（Mosaic Mask Text）

這是一段採用馬賽克黑色遮罩的文本：機密資料：SHA256-7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069（懸浮或點擊即可查看明文）。

3. 內聯劇透與隱藏標記

Discord 風格劇透遮罩：||這是一段使用雙豎線包裹的劇透遮罩，點擊後永久揭開。||
直接內聯隱藏內容：%%這裡是使用百分號包裹的內聯隱藏內容，點擊展開。%%

4. 圖片高斯模糊（Blurred Image Protection）

對於涉及版權敏感、懸疑或成人禮的內容，可使用圖片模糊保護容器：

👁️ 懸浮或點擊揭開迷霧

5. 隱藏內容折疊面板（Hidden Content Box）

對於快速排序（QuickSort），平均時間複雜度為 $\mathcal{O}(n \log n)$，在最壞情況下當每次劃分都不均勻時退化為 $\mathcal{O}(n^2)$。透過引入隨機化主元（Randomized Pivot）可以將最壞情況機率降至指數級低。

八、折疊與容器組件（Tabs, Steps & Accordions）

1. 多語言套件管理選項卡（Interactive Tabs）

使用 pnpm 極速安裝並連結依賴：

pnpm install remark-math rehype-katex katex mermaid

使用 npm 標準套件管理器：

npm install remark-math rehype-katex katex mermaid

使用 Yarn 現代模式：

yarn add remark-math rehype-katex katex mermaid

使用超高速 Bun 執行時：

bun add remark-math rehype-katex katex mermaid

2. 教學步驟條（Tutorial Steps）

環境準備與依賴安裝

在工程根目錄下執行安裝命令，引入 Astro 6 與 KaTeX、Mermaid 核心依賴套件。

配置 Astro Markdown 編譯管道

在 astro.config.mjs 中註冊 remarkMath 與 rehypeKatex，並配置 Shiki 雙主題。

掛載 Enhancer 與樣式庫

在全域佈局 BlogLayout.astro 中引入 markdown-enhancements.css 與特性增強腳本。

九、富媒體與跨平台卡片嵌入（Embeds & Media Cards）

1. GitHub 儲存庫卡片（GitHub Repo Card）

安知魚主題 - 簡潔、高顏值、功能豐富的 Hexo 部落格主題，本部落格的前端 UI 與設計靈感來源。

2. 響應式影片播放卡片（Video Embed）

Bilibili 1080P 影片嵌入示範

3. 音訊音樂卡片（Audio Card）

星河漫遊 (Starry Wander)

shijianus · 原創環境白噪音

十、註腳與懸浮氣泡預覽（Footnotes & Hover Tooltips）

在學術或長篇技術文章中，註腳是不可或缺的表達形式。本站不僅支援標準的 GFM 註腳跳轉，更支援 滑鼠懸浮即可彈出釋義氣泡，無需跳出當前視窗即可完成閱讀¹。

這裡還有第二個關於主題架構的註腳引用²，以及第三個關於數學渲染效能的補充說明³。

十一、富文字行內語法擴展（Inline Typography）

多彩高亮標記（HTML 形式與語法糖）：
- 黃色高亮（重點標註）
- 綠色高亮（成功推薦）
- 藍色高亮（資訊線索）
- 粉色高亮（設計靈感）
- 紫色高亮（深度原理）
- 橙色高亮（操作預警）
- 紅色高亮（風險警示）
- 青色高亮（網路協定）
- ==快捷語法糖：green:綠色高亮== 與 ==purple:紫色高亮==
個性化底線：
- 波浪強調底線（Wavy Underline）
- 虛線強調底線（Dashed Underline）
按鍵展示：Ctrl + Shift + P 開啟命令面板。
拼音/注音：安知魚ān zhī yú · 時間shí jiān。
縮略詞懸浮說明：CSS 與 HTML。
狀態膠囊標籤：
- 推薦
- 已通過
- 注意
- 嚴重
- 提示

結語：建構優雅而強大的內容系統

透過本次全面重構與掃描最佳化，shijianus-blog 在 Markdown 渲染領域已具備媲美甚至超越原生 Hexo/安知魚主題的綜合表現力。

從嚴謹的技術公式推導，到生動的 Mermaid 業務架構圖；從安全的局部密碼對話框，到充滿趣味的高斯模糊與劇透遮罩——這套系統讓每一篇部落格文章都能夠以最體面、最專業、最富有互動感的形式呈現在讀者面前。

Astro 6 架構：採用 Island Architecture（群島架構），實現預設零 JavaScript 靜態交付，極大提升了首頁載入與 SEO 效能。 ↩
安知魚（Anzhiyu）：Hexo 生態中最具代表性的現代化極客設計主題之一，以精細的微動效與資訊層級著稱。 ↩
KaTeX 效能：相較於傳統 MathJax，KaTeX 在伺服器端即可完成所有 HTML/MathML 的靜態渲染，效能提高 10 倍以上。 ↩

Markdown 全语法与特异功能全景指南：数学公式、图表、告警框、加密解密、模糊马赛克与现代排版

欢迎体验全能 Markdown 渲染与特异功能系统

一、数学公式（Math / KaTeX）

1. 行内数学公式（Inline Math）

2. 块级数学公式（Display Math）

二、图表与绘图代码块（Diagrams as Code）

1. 业务架构与决策流程图（Flowchart）

2. 系统交互时序图（Sequence Diagram）

3. 项目交付甘特图（Gantt Chart）

4. 统计饼图与版本图（Pie Chart & GitGraph）

三、告示框与提示块（Admonition / Callout）

1. 标准告示框（Standard Callouts）

2. 可折叠告示框（Collapsible Details Admonitions）

四、高级代码块功能（Advanced Code Blocks）

1. TypeScript 代码示例（带增删行 Diff）

2. 超长代码折叠演示（自动限制高度并提供展开按钮）

五、任务列表与表格全能增强（Task Lists & Tables）

1. 交互式 GFM 任务列表（Task Lists）

2. 增强型自适应表格（Fixed Table Layout）

六、特异功能：加密内容与密码弹窗解锁（Encryption & Password Modal）

七、特异功能：高斯模糊、马赛克与剧透隐藏（Blur, Mosaic & Spoilers）

1. 文字高斯模糊（Gaussian Blur Text）

2. 马赛克文字（Mosaic Mask Text）

3. 内联剧透与隐藏标记

4. 图片高斯模糊（Blurred Image Protection）

5. 隐藏内容折叠面板（Hidden Content Box）

八、折叠与容器组件（Tabs, Steps & Accordions）

1. 多语言包管理选项卡（Interactive Tabs）

2. 教程步骤条（Tutorial Steps）

环境准备与依赖安装

配置 Astro Markdown 编译管道

挂载 Enhancer 与样式库

九、富媒体与跨平台卡片嵌入（Embeds & Media Cards）

1. GitHub 仓库卡片（GitHub Repo Card）

2. 响应式视频播放卡片（Video Embed）

3. 音频音乐卡片（Audio Card）

十、脚注与悬浮气泡预览（Footnotes & Hover Tooltips）

十一、富文本行内语法扩展（Inline Typography）

结语：构建优雅而强大的内容系统

Footnotes

Willkommen beim All-in-One Markdown-Rendering- und Spezialfunktionssystem

I. Mathematische Formeln (Math / KaTeX)

1. Inline-Mathematikformeln (Inline Math)

2. Block-Mathematikformeln (Display Math)

II. Diagramme und Zeichen-Codeblöcke (Diagrams as Code)

1. Geschäftsarchitektur- und Entscheidungsflussdiagramm (Flowchart)

2. Systeminteraktions-Sequenzdiagramm (Sequence Diagram)

3. Projektlieferungs-Gantt-Diagramm (Gantt Chart)

4. Statistik-Tortendiagramm und Versionsgraph (Pie Chart & GitGraph)

Drei. Hinweisboxen und Callouts (Admonition / Callout)

1. Standard-Hinweisboxen (Standard Callouts)

2. Zusammenklappbare Hinweisboxen (Collapsible Details Admonitions)

Vier. Erweiterte Codeblock-Funktionen (Advanced Code Blocks)

1. TypeScript Codebeispiel (mit Diff für hinzugefügte/gelöschte Zeilen)

2. Demo für das Falten von sehr langem Code (automatische Höhenbegrenzung mit Ausklapp-Button)

Fünf. Aufgabenlisten und Tabellen – Allround-Verbesserungen (Task Lists & Tables)

1. Interaktive GFM-Aufgabenlisten (Task Lists)

2. Verbesserte adaptive Tabellen (Fixed Table Layout)

Sechs. Spezielle Funktion: Verschlüsselter Inhalt und Passwort-Popup-Entsperrung (Encryption & Password Modal)

Sieben. Spezielle Funktionen: Gaußsche Unschärfe, Mosaik und Spoiler-Verbergen (Blur, Mosaic & Spoilers)

1. Gaußsche Unschärfe für Text (Gaussian Blur Text)

2. Mosaik-Text (Mosaic Mask Text)

3. Inline-Spoiler und versteckte Markierungen

4. Bild-Gaußscher Weichzeichner (Blurred Image Protection)

5. Ausklappbares Feld für versteckte Inhalte (Hidden Content Box)

VIII. Falt- und Container-Komponenten (Tabs, Steps & Accordions)

1. Interaktive Tabs für mehrsprachiges Paketmanagement (Interactive Tabs)

2. Tutorial-Schrittleiste (Tutorial Steps)

Umgebungsvorbereitung und Abhängigkeitsinstallation

Astro Markdown Kompilierungspipeline konfigurieren

Enhancer und Stilbibliotheken einbinden

IX. Rich Media und plattformübergreifende Karten-Einbettungen (Embeds & Media Cards)

1. GitHub Repository-Karte (GitHub Repo Card)

2. Responsive Video-Einbettungskarte (Video Embed)

3. Audio-Musikkarte (Audio Card)

10. Fußnoten und Hover-Tooltip-Vorschauen (Footnotes & Hover Tooltips)

11. Inline-Syntaxerweiterungen für Rich Text (Inline Typography)

Fazit: Aufbau eines eleganten und leistungsstarken Inhaltssystems

Footnotes

Welcome to the All-in-One Markdown Rendering and Advanced Features System