Markdown 中的可折叠标题到 html

Question

我们的内部 git-lab wiki 使用 Markdown。

我做了几篇文章的摘要，并想将它们发布在我们的维基中，这样，如果我单击标题，它应该展开并且文本应该变得可见，基本上就像这个示例。

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

Answer 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，但可能不适用于其他浏览器。 github 上有一些相关帖子。

Answer 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 中。您可以找到其中的对示例作为Python-Markdown解析器的扩展。然而，有了有关您所工作环境的任何信息，为您指明正确的方向就有点困难了。此外，Stackoverflow 不应该是一个工具推荐网站。但是，通过观察其他人如何解决问题（在我指出的示例中），您应该能够找出类似的解决方案。

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

甚至可能存在一些 JavaScript 库，它们将获取纯 HTML 内容、进行部分换行并实现折叠/折叠功能。但是，这样的库可能有点重并且会减慢您的网站速度，因此请继续使用 cation。

Answer 3

这主要对我有用，尽管我只是希望我的可折叠部分看起来不像普通文本，而更像标题。所以我找到了一种增加字体大小的方法，这对我有用：

<details>
<summary><b><u><font size="+1">Header-Like Text</font></u></b></summary>
</details>

Answer 4

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

一个 jquery 工具，可以在 Markdown 帖子中使标题可折叠

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

Answer 5

将 HTML 代码与 MD 混合使用是可行的，但这样做不是一个好的做法。因此，我宁愿使用 MD 支持的本机方式，如下例所示。

::::expand{header="Click here to expand"}

This text will be visible when the block is expanded.

::::

由于这是一种较新的方法，并非每个 MD 查看器都可以渲染它。