Markdown折叠内容

HTML <details> 标签指定了用户可以根据需要打开和关闭的额外细节。

语法：

<details> <summary>Title</summary>
    contents ...
</details>

标签介绍参考如下：

details：折叠语法标签

summary：折叠语法展示的摘要

内容里面可以嵌套使用 Markdown 语法和 HTML 语法

效果

Title

contents ...

在博客园的 Markdown 中，折叠的内容前要插入一空行，否则折叠的内容可能不会正常显示。

如折叠内容为代码，且内容首行头部带有标签时

<details> 
    <summary>View Code</summary>

        code ...
</details>

折叠代码

语法

<details>
  <summary>点我展开看代码</summary>
  # 方式1
  <pre><code>
      code...
  </code></pre>
  # 方式2
    ```编程语言
        code...
    ```
</details>

标签介绍参考如下：
pre：以原有格式显示元素内的文字是已经格式化的文本
code：指定代码块

代码示例

<details>  
    <summary>点我展开看代码</summary>  
    <pre><code>
window.$silence = {
    navbars: [{
        title: '标签',
        url: 'https://www.cnblogs.com/esofar/tag/'
    }}]
};
    </code></pre>
</details>

效果

点我展开看代码

window.$silence = {
    navbars: [{
        title: '标签',
        url: 'https://www.cnblogs.com/esofar/tag/'
    }}]
};
    

注意：以方式1折叠代码块时，当代码块中空行较多，可能会出现折叠内容无法显示或者被拆分成几部分的情况。而方式二不存在这种情况

参考来源

[1] Markdown中折叠代码的方法

[2] Markdown 折叠内容