JZTXT

Markdown折叠内容

发布时间 2023-07-04 12:33:44作者: hitrying

折叠内容

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

语法：

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

标签介绍参考如下：

details：折叠语法标签

summary：折叠语法展示的摘要

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

效果

Title contents ...

在博客园的 Markdown 中，<details> 标签前面不能为空，要有字符或者空格：

 <details> <summary>View Code</summary>
code ...
</details>

有的 Markdown 中，可能 <summary> 标签与正文间要空一行。比如：

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

code ...

</details>

当然，有空行的话比较方便阅读源码

折叠代码

语法

<details>
  <summary>点我展开看代码</summary>
  <pre><code>
  # 在这里写折叠的代码
  </code></pre>
</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] Markdown中折叠代码的方法

[2] Markdown 折叠内容