為博客園markdown代碼塊添加折疊

引言：

當我們在文章某段代碼中寫太多內容時，進行適當的內容折疊是非常有必要的。

請嘗試點擊一下Code👇

Show 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的知識短短幾行即可完成。

update 19/04/21

<details> <summary><font size="4" color="orange">Show Code</font></summary> <pre><code class="language-cpp">這里填充代碼</code></pre> </details>

下面這個是老版本樣式

<details>
<summary>Code</summary>
<pre><code class="language-cpp">
被折疊的代碼塊或者文章內容,內部不可以有空行
</code></pre>
</details>

利用上方的HTML樣式即可輕松完成代碼在markdown中實現折疊

核心是利用 datails 標簽描述文檔或文檔某個部分的細節。

與<summary>標簽 配合使用可以為 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details。

好了，理解本質以后再看看最開始的 Code中的所有代碼吧

<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>

注意事項：

對於 <>的特殊符號應該用 < > 代替，不然會顯示錯誤。(只需要修改 < 替換為 < 即可）

<code>必須緊貼代碼開頭（避免多出首行），</code>需單獨一行（避免少了尾行）

---

折疊代碼樣式更新 (填充代碼至Code標簽即可)

<details class="custom-block details" style="display: block; position: relative; border-radius: 2px; margin: 1.6em 0px; padding: 1.6em; background-color: rgb(238, 238, 238); color: rgb(44, 62, 80); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><summary style="outline: none; cursor: pointer;">Code (C++)</summary><pre><code class="language-cpp">代碼放置區</code></pre></details>

實際樣式

Code (C++)

代碼放置區

參考：

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