借用 blockquote 在 Markdown 中实现折叠嵌套

最初是使用标签来实现多层级嵌套，但当层级太多的时候，如果无法折叠，不便于浏览，便去查找资料，发现可以借用 HTML 中的 <details> 元素实现折叠效果，暂时解决问题。

但是在后续的使用过程中发现这个方法是无法直接嵌套的，这个问题断断续续的折磨了我几个月，一直没有较为完美的实现方式，直到最近，借用 CSS 暂时的解决了这个问题。因前后折腾许久，故记录之。

折叠效果

在说如何嵌套之前，先说明一下折叠的解决方法。<details> 元素是 HTML 中一个展示的标签，而 <summary> 元素则可以为这个标签提供一个简要说明，这两个元素配合使用便能在 Markdown 实现折叠效果：

1
<details>
2
  <summary>点击展开</summary>
3

4
  默认折叠，点击后展开 - 可使用 Markdown 语法
5
</details>

1
<details open>
2
  <summary>默认展开</summary>
3

4
  details 标签默认是折叠状态，如果想默认为展开的话，可以添加一个 `open` 属性：
5
</details>

折叠嵌套

要实现嵌套折叠，需要借助 HTML 中的 <blockquote> 块级引用元素，它可以实现为引用的内容实现缩进（默认情况下）：

1
<details>
2
  <summary>TestA1</summary>
3
  <blockquote>
4
    <details open>
5
      <summary>TestB1</summary>
6
      <blockquote>- Test B1</blockquote>
7
    </details>
8

9
    <details open>
10
      <summary>TestB2</summary>
11
      <blockquote>
12
        <details open>
13
          <summary>TestC1</summary>
14
          <blockquote>- Test C1</blockquote>
15
        </details>
16
      </blockquote>
17
    </details>
18
  </blockquote>
19
</details>

实际效果主要是依据当前 CSS 引用标签的处理，在本博客中，使用引用标签时，最前面有两个双引号。具体效果可参见：Life of Py

最后

不同主题对 CSS 的定义并不相同，所以效果也因 CSS 而异。我是在 Bitcron 平台使用 Page，直接在 MD 文件中增加了以下 CSS：

1
blockquote {
2
    border-left: 0.4em solid #fff;
3
    margin: 0.4em 0;
4
    color: #434343;
5
    min-height: 0;

当然使用标签让 Markdown 复杂了许多，有违 Markdown 的设计初衷，所以至于是否使用，依个人需要吧。

• 另：也可以使用 ui 来达到类似的效果，有兴趣的可以自行研究：

  • 使用 ul 实现

    • 提示：可使用 list-style:none 隐藏圆点；
    • 缺点么，缩进不是很完美，而且较 blockquote 代码层级更多

参考

• details | MDN
• blockquote：块级引用元素 | MDN