在 Markdown 中可折叠 header 至 html

Question

我们的内部 git-lab wiki 使用 Markdown。我做了几篇文章的总结，想 post 在我们的 wiki 中，这样如果我点击 header，它应该展开并且文本应该变得可见，基本上就像这样 example

Markdown 有这个expand/collapse/fold功能吗？

Answer 1

简短回答：不，Markdown 不直接提供这样的功能，但通过一些工作，您也许可以构建一些有用的东西。

要实现这样的功能，您需要 CSS and/or JavaScript 来控制动画等。虽然您可能能够实现这样的功能在任何 HTML 上，在 Markdown 输出上都不是特别容易。

理想情况下，每个可折叠部分都将包裹在 div:

<div id="section1">
  <h1>Section 1</h1>
  <p>Section 1 content</p>
  <div id="section1-1">
    <h2>Section1-1</h2>
    <p>section 1-1 content</p>
  </div>
    <div id="section1-2">
    <h2>Section1-2</h2>
    <p>section 1-2 content</p>
  </div>
</div>

然后您可以使用一些 CSS/JavaScript 来折叠 indiv 中的部分。但是，Markdown 没有节的概念。而不是上面的，Markdown 会给你这个平面文档：

<h1>Section 1</h1>
<p>Section 1 content</p>
<h2>Section1-1</h2>
<p>section 1-1 content</p>
<h2>Section1-2</h2>
<p>section 1-2 content</p>

一个解决方案需要遍历整个文档，将其分解为各个部分并将每个部分包装在 div 中。您可以找到 couple examples 作为 Python-Markdown 解析器的扩展。但是，根据有关您工作环境的任何信息，要为您指明正确的方向会有点困难。此外，Whosebug 不应该是一个工具推荐网站。但是，通过观察其他人如何解决问题（在我指出的示例中），您应该能够得出类似的解决方案。

一旦您正确包装了这些部分，然后 JavaScript 到 fold/collapse individual 部分将处理其余部分。但是，这是一个单独的问题，在这里已被多次询问和回答。请参阅侧边栏中列出的一些 "Related" 问题，了解该部分问题的解决方案。

甚至有可能存在一些 JavaScript 库，它们将采用普通的 HTML 内容、进行节换行并实现 fold/collapse 功能，这些功能合而为一。不过，这样的库可能有点重，会拖慢你的网站速度，所以继续cation吧。

Answer 2

尝试：

<details>
  <summary>Your header here! (Click to expand)</summary>
  Your content here...
  > markup like blockquote's should even work on github!
  more content here...
</details>

您可以在此处尝试此类操作：

    <details>
      <summary>Your header here! (Click to expand)</summary>
      Your content here...</br>
      (markup only where supported)</br>
      more content here...</br>
    </details>

这适用于我的 Chrome，但可能不适用于其他浏览器。还有一些related posts at github.

Answer 3

存在一个 github 回购做你想做的事：szhielelp/md-post-header-collapse。

A jquery tool to make header collapsible in markdown post

https://szhshp.org/tech/2016/08/23/jekyllmdpostcollapse.html是文档，你可以看看那个插件的作用。

基本思路是在每次单击 header 时反转所有 header 的 children 元素 show/hide 状态。

    let collapse = function (headerElem) {

        let isShow = headerElem.hasClass('headerCollapsed') ? true : false;
        if (isShow) {
            // collapsed
            headerElem.removeClass('headerCollapsed');
        } else {
            headerElem.addClass('headerCollapsed');
        }

        /* collapse all header's children */
        headerCollapse(headerElem, headerElem.next(), isShow);
    }

    let headerCollapse = function (headerElem, currentElem, isShow) {
            /* I remove the end condition  */
            if (isShow) {
                currentElem.show(400);

                /* reset status */
                currentElem.removeClass('headerCollapsed')
            } else {
                currentElem.hide(400);
            }

            headerCollapse(headerElem, currentElem.next(), isShow)
        }
    }

在 Markdown 中可折叠 header 至 html

Collapsible header in Markdown to html

markdown

wiki

fold

collapse