Markdown 中的可折叠标题到 html

问题描述 投票:0回答:5

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

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

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

markdown wiki fold
5个回答
81
投票

尝试:

<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 上有一些相关帖子


9
投票

简短的回答:不,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。


3
投票

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

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

1
投票

存在一个 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)
        }
    }

0
投票

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

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

This text will be visible when the block is expanded.

::::

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

© www.soinside.com 2019 - 2024. All rights reserved.