博客园中markdown折叠内容的实现

前言

我们在写文章的时候，总是会不可避免的引入很多图片或者代码块，这些内容总是会占据很大的位置，尽管有时候他们对某些用户不是那么的重要。那么，我们接下来想说的就是，如何去隐藏它们，只让想看的用户去展开它们。

正文

这里使用了一个HTML5的标签来实现这个效果，很多浏览器现在并不支持这个标签：<details>，目前貌似只有 Chrome 和 Safari 6 支持<details>标签。

代码块的折叠与展开

<details>
<summary>展开源码</summary>

<pre>
<code>
public class Demo {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
</code>
</pre>

</details>

效果是下面这样的：

展开源码

public class Demo {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

图片的折叠与展开

<details>
<summary>展开图片</summary>

![](https://img2020.cnblogs.com/blog/1077174/202101/1077174-20210110180433652-1946064303.png)
</details>

效果是下面这样的：

展开图片

注意

需要注意的地方是 <summary>标签，和下面要折叠的内容中间需要有一个空行。当然如果你不想加空行的话，加一个<p>标签也是可以的 （手动笑哭）