【随笔】Markdown 代码块折叠与收起

框架师

发布于 2023-04-17 20:23:34

2.5K0

发布于 2023-04-17 20:23:34

文章被收录于专栏：墨白的Java基地墨白的Java基地

前言

很多时候，文章里面需要的代码块太长，导致文章显得很是臃肿，在 markdown 写的博客内，可以采用 html 语法扩展代码折叠功能！

代码折叠

html 标签：

<datails>
    <summary> 显示的标题 </summary>
    <p>
        ------------------ 测试折叠 ---------------------
    </p>
    <pre><code>title,value,callBack 可以缺省 </code></pre>
</datails>

details：折叠语法标签
summary：折叠语法展示的摘要
pre：以原有格式显示元素内的文字是已经格式化的文本
code：指定代码范例
blockcode：表示程序的代码块

代码块折叠

<details>
  <summary> 点击时的区域标题 </summary>
  ```json
   {
    "name": "hexo-site",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "build": "hexo generate",
      "clean": "hexo clean",
      "deploy": "hexo deploy",
      "server": "hexo server"
   }
  ```
</details>

效果展示

显示的标题

------------------ 测试折叠 ---------------------

title,value,callBack 可以缺省

点击时的区域标题

{
 "name": "hexo-site",
 "version": "0.0.0",
 "private": true,
 "scripts": {
   "build": "hexo generate",
   "clean": "hexo clean",
   "deploy": "hexo deploy",
   "server": "hexo server"
}

hexo matery 主题不支持第一种方式

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-12，如有侵权请联系 cloudcommunity@tencent.com 删除

markdown