博客扩展语法指南 (MD-Plus)
发布于2026-04-24 · 更新于2026-04-27
#md

为了更好地呈现博客相关的图文、代码与节点逻辑，笔者深度定制了一套基于 Hexo 的 Markdown 扩展语法（MD-Plus）。

以下是所有可用组件的视觉预览与语法说明。

1. 高亮块 (Highlight Block)

用途：用于段落、公式或列表的柔和背景强调，区别于正式的 Note 提示，提供 10 种 Notion 风格的色彩。

语法

1
2
3
{% glk 颜色英文名 %}
支持内部嵌套 Markdown 语法
{% endglk %}

效果预览

这是 default 默认色高亮块。适合做普通的背景承托。

这是 gray 灰色高亮块。

这是 brown 棕色高亮块。

这是 orange 橙色高亮块。

这是 yellow 黄色高亮块，非常适合标记待处理事项。

这是 green 绿色高亮块。

这是 blue 蓝色高亮块。

这是 purple 紫色高亮块。

这是 pink 粉色高亮块。

这是 red 红色高亮块，适合用来标记严重的问题或被废弃的节点。

2. 状态提示栏 (Note)

用途：正式的说明、警告和危险提示组件。

语法

1
2
3
{% note 类型 标题名称 %}
详细的提示内容...
{% endnote %}

效果预览

架构说明

本文主要探讨 Unity URP 下的渲染管线拓展方法。

性能提示

在大规模草地渲染时，请务必开启 GPU Culling 以减少 DrawCall 压力，否则会导致帧率暴降。

3. 代码折叠 (Code Fold)

用途：收纳过长的源文件代码，保持文章主线阅读的整洁，带有拟真 Mac 风格。

语法

1
2
3
4
5
{% fold 📝 ComputeShader.hlsl %}
\```hlsl
// 你的代码
\```
{% endfold %}

效果预览

📝 ComputeShader.hlsl
1
2
3
4
[numthreads(8,8,1)]
void CSMain (uint3 id : SV_DispatchThreadID) {
    // 渲染逻辑
}

4. 分栏对比 (Split View)

用途：左文右图，或者左代码右效果。支持自定义宽度比例（如 4:6, 1:1）。在手机端会自动转为上下堆叠。

语法

1
2
3
4
5
{% split 4:6 %}
左侧文本
|||
右侧图片
{% endsplit %}

效果预览

噪声生成算法

这里我们可以详细解释右侧图中展现的各种噪声（Perlin, Voronoi）是如何通过公式混合到一起的。

  • 支持所有的 MD 语法
  • 极佳的空间利用率

渲染预览

用途：用于展示材质贴图集（如 Albedo、Normal 等）或多图并排。

语法

1
2
3
4
5
6
{% grid 4 %}
![图1](url)
![图2](url)
![图3](url)
![图4](url)
{% endgrid %}

效果预览

AlbedoNormalRoughnessMetallic

6. 交互式图片对比 (Compare Slider)

用途：UE 官方文档风格的图像拉杆组件，用于直观地展示技术开启前/后的画质差异。

语法

1
2
3
4
{% compare BEFORE | AFTER %}
![优化前](url)
![优化后](url)
{% endcompare %}

效果预览

开启前
开启后

7. 资源链接卡片 (Card)

用途：提供明确且美观的外部资源、GitHub 仓库或项目工程下载链接。

语法

1
2
3

{% card 标题 | 描述 | 链接URL | 🎈(Emoji图标) %}

效果预览

方式 A：使用 Emoji 图标

📦
GitHub
这是一个带图标的项目地址
📄
参考文献
SIGGRAPH 2023: Global Illumination in Real-time

方式 B：使用图片预览 (自动识别 URL)

效果演示
效果演示
点击查看高清渲染大图预览

8. 引用注脚与附录

体积云的 Raymarching 优化

在实现基于 Compute Shader 的 Procedural Volumetric Cloud 时，传统的全分辨率 Raymarching 会带来极大的性能开销。为了保证时域上的稳定性，我们通常会引入 Reprojection 技术[1]，并通过低分辨率的交错采样（Interleaved Sampling）配合 Temporal Reconstruction 来还原细节[2]。

… （正文其他内容）…

📚 参考文献与延伸阅读
[1]

[SIGGRAPH 2015] The Real-time Volumetric Cloudscapes of Horizon Zero Dawn - Guerrilla Games

[2]

关于时域重建的详细探讨，可以参考这篇经典的实现分析：Temporal Reprojection Anti-Aliasing，本文的重投影矩阵推导部分也参考了其中的思路。

  1. Physically Based Rendering: From Theory to Implementation (PBRT)
  2. SIGGRAPH 2021 Course: Advances in Real-Time Rendering in Games
  3. Unity URP 官方文档 - GPU Instancing 最佳实践
  4. 本文涉及的完整 Houdini HDA 测试工程已上传至 GitHub。