Markdown中的可折叠标题到html

Posted 2023-03-24

【中文标题】Markdown中的可折叠标题到html

【英文标题】：Collapsible header in Markdown to html

【发布时间】：2015-10-12 07:03:43

【问题描述】：

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

Markdown 有这个展开/折叠/折叠功能吗？

【参考方案1】：

试试：

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

【讨论】：

适用于 Chrome 和 ios Safari，但不适用于 Firefox 或 IE。对我来说已经足够了，真的。

【参考方案2】：

简短回答：不，Markdown 不直接提供类似的功能，但通过一些工作，您可能能够构建一些有效的东西。

要使这样的功能正常工作，您需要一些 CSS 和/或 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 来折叠各个部分。但是，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 解析器的扩展。但是，如果有任何有关您工作环境的信息，为您指明正确的方向会有点困难。此外，*** 不应该是一个工具推荐网站。但是，通过观察其他人如何解决问题（在我指出的示例中），您应该能够找到类似的解决方案。

一旦你正确地包装了这些部分，然后用一点 JavaScript 来折叠/折叠各个部分，剩下的就可以处理了。但是，这是一个单独的问题，已在此处多次询问和回答。有关该部分问题的解决方案，请参阅侧栏上列出的一些“相关”问题。

甚至有可能存在一些 JavaScript 库，它们将采用纯 HTML 内容，进行部分包装并实现折叠/折叠功能。但是，这样的库可能有点笨重并且会降低您的网站速度，因此请继续使用阳离子。

【讨论】：

太好了，感谢您的回答！通常我使用 R 编写 markdown 文件，然后我只需将 .md 文件上传到 git-lab 存储库。但在这种情况下，当我在 wiki 中发帖时，我只是在浏览器中工作并保存页面。

想知道现在，4.5 年后是否有一种简单的方法可以将所有标题转换为 html 中的折叠部分？ :)

【参考方案3】：

存在一个 github 存储库可以满足您的需求：szhielelp/md-post-header-collapse。

一个 jquery 工具，可以在 markdown post 中使标题可折叠

https://szhshp.org/tech/2016/08/23/jekyllmdpostcollapse.html 是文档，你可以看看那个插件做了什么。

基本思想是每次单击标题时反转所有标题的子元素显示/隐藏状态。

    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)