为博客园markdown代码块添加折叠

请尝试点击一下Code👇

int found(int a[],int left,int right,int x) {
while (left < right) {
int mid = (right + left) >> 1;
if (a[mid] < x) left = mid + 1;
else right = mid;
}
return left;
}

点开上面的Code就出现折叠的代码是不是很有意思？

其实实现这个功能的原理很简单、利用HTML的知识短短几行即可完成。

<details>
<summary>Code</summary>
<pre><code class="language-cpp">
被折叠的代码块或者文章内容,内部不可以有空行
</code></pre>
</details>

利用上方的HTML样式即可轻松完成代码在markdown中实现折叠

核心是利用

datails

与<summary>标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

<details>
<summary>Code</summary>
<pre><code class="language-cpp">int found(int a[],int left,int right,int x) {
while (left < right) {
int mid = (right + left) >> 1;
if (a[mid] < x) left = mid + 1;
else right = mid;
}
return left;
}</code></pre>
</details>

<

>

参考：

https://www.w3school.com.cn/tags/tag_details.asp