标题左侧有个竖线，常见于Markdown或代码块中，如何正确使用竖线实现标题层级区分？

Question

在使用 Markdown 编写文档时，经常会遇到希望用竖线 `|` 来在标题左侧进行层级区分的情况，例如： `| 一级标题` `|| 二级标题` `||| 三级标题` 然而，这种做法并不符合标准 Markdown 的语法规范，可能导致解析错误或样式显示异常。那么问题来了： **如何正确使用竖线 `|` 实现标题层级区分？是否可以结合 HTML 或 CSS 达到类似效果？需要注意哪些兼容性与渲染问题？**

Answer 1

一、问题背景与现象分析

在 Markdown 编写过程中，开发者常常希望使用竖线 | 来表示标题的层级结构，例如：

| 一级标题
|| 二级标题
||| 三级标题

然而，这种做法并不符合标准的 Markdown 语法规范。Markdown 的标题应使用井号 # 符号来定义层级，如：

• # 一级标题
• ## 二级标题
• ### 三级标题

直接使用竖线可能导致解析器无法识别，进而导致文档渲染异常。

二、尝试使用 HTML 实现竖线层级效果

为实现类似竖线区分层级的效果，可以结合 HTML 标签和内联样式进行自定义渲染。例如：

<h1 style="margin-left: 0;">| 一级标题</h1>
<h2 style="margin-left: 1em;">|| 二级标题</h2>
<h3 style="margin-left: 2em;">||| 三级标题</h3>

通过设置不同的 margin-left 值，可以模拟出层级缩进的效果，同时保留竖线符号作为视觉标识。

三、CSS 方案增强可维护性与一致性

更推荐的做法是定义统一的 CSS 类名来控制样式，以提高可维护性和复用性。示例代码如下：

<style>
.title-level-1 { margin-left: 0; padding-left: 10px; border-left: 2px solid #ccc; }
.title-level-2 { margin-left: 1em; padding-left: 10px; border-left: 2px solid #999; }
.title-level-3 { margin-left: 2em; padding-left: 10px; border-left: 2px solid #666; }
</style>

<h1 class="title-level-1">| 一级标题</h1>
<h2 class="title-level-2">|| 二级标题</h2>
<h3 class="title-level-3">||| 三级标题</h3>

这种方式不仅实现了层级区分，还能通过边框颜色或宽度进一步强化视觉层次。

四、兼容性与渲染问题分析

尽管上述方法可以在支持 HTML 和 CSS 的 Markdown 渲染器中正常显示（如 VS Code、Typora、Obsidian 等），但仍需注意以下几点：

1. GitHub Pages、GitLab、Read the Docs 等平台可能限制内联样式或外部 CSS 引入。
2. 部分静态网站生成器（如 Hugo、Jekyll）对 Markdown 转 HTML 的处理方式不同，可能导致样式失效。
3. 某些 Markdown 解析库（如 marked.js、CommonMark）默认不解析 HTML 标签，需启用安全选项。

因此，在跨平台发布前务必进行多环境测试。

五、Mermaid 流程图辅助说明处理流程

graph TD
            A[开始编写Markdown文档] --> B{是否需要竖线层级标题?}
            B -->|否| C[使用标准#标题]
            B -->|是| D[插入HTML标签]
            D --> E[添加CSS样式]
            E --> F[测试多平台渲染]
            F --> G{是否兼容?}
            G -->|是| H[完成]
            G -->|否| I[调整样式或替换方案]

六、替代方案与最佳实践建议

如果目标平台不支持 HTML/CSS，可以考虑以下替代方案：

方案	优点	缺点
使用缩进空格	纯文本，兼容性强	无视觉强调，层级不明显
结合注释标记	便于阅读，不影响解析	非标准格式，依赖人工维护
使用 TOC 自动生成	结构清晰，导航方便	无法体现竖线风格

最终选择应根据团队协作习惯、文档用途及目标渲染环境综合评估。