如何使用 Markdown 创建 jQuery 选项卡

Question

我目前正在运行一个基于 PHP 的内容管理系统，该系统在 Markdown 额外。 大多数内容都是由标题和副标题构成的，这会导致页面很长。 在每个页面的开头，我在列表和 Markdown Extra 的帮助下创建了一个目录 标头 ID 属性。

为了缩短页面视图的长度，我想使用 jQuery 的 Tabs 插件在第一级标题上。

问题是 Markdown Extra 的输出与 jQuery <需要 a href="http://docs.jquery.com/UI/Tabs" rel="nofollow noreferrer">Tabs 插件，因为 Markdown Extra 不会将某个部分的内容包装到单独的 div 标签中。

有没有办法让这两个库一起工作？

编辑

这就是 HTML 输出的样子：

 <p>Some intro text...</p>
 <h3>Table of content</h3>
 <ul>
  <li><a href="#sub1">Topic 1</a></li>
  <li><a href="#sub2">Topic 2</a></li>
  <li><a href="#sub3">Topic 3</a></li>
 </ul>
 <h3 id="sub1">Topic 1</h3>
 <p>The content of this topic.</p>
 <h3 id="sub2">Topic 2</h3>
 <p>The content of this topic.</p>
 <h3 id="sub3">Topic 3</h3>
 <p>The content of this topic.</p>

.. 这是相应的 Markdown 代码：

Some intro text...

###Table of content###

* [Topic 1](#sub1)
* [Topic 2](#sub2)
* [Topic 3](#sub3)

###Topic 1### {#sub1}

The content of this topic.

###Topic 2### {#sub2}

The content of this topic.

###Topic 3### {#sub3}

The content of this topic.

解决方案

在 cobbal 的帮助下，我制作了这个 jQuery 语句，它将把 Markdown 标记转换为 Tabs 插件可以使用的内容：

  $("#tabs :header").each(function() 
  {
    var id = $(this).attr("id");
    if(id=="") return;    
    var div = $("<div>");
    var tagName = this.tagName;    
    $(this).nextAll().each(function()
    {
      if(this.tagName==tagName) return false;
      div.append(this);
    });
    $(this).removeAttr("id");
    div.attr("id", id);
    $(this).before(div);
    div.prepend(this);
  });

但是事实上，我需要转换标记以适合选项卡插件，而不是仅仅告诉选项卡插件它应该以不同的方式选择其内容，这可能会使该解决方案不是理想的解决方案。

Answer 1

在你的 document.ready 上

$("#sub1,#sub2,#sub3").each(function() {
    var containerDiv = $("<div>").attr("id", $(this).attr("id") + "div");
    $(this).before(containerDiv);
    containerDiv.append(this);
});

并将你的 markdown 更改为

...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...

Answer 2

在我看来，您可以自己将目录包装在 div 中。

您链接到的 Markdown Extra 页面的一半显示了如何在 div 中插入 Markdown，如下所示：

PHP Markdown Extra 为您提供了一种将 Markdown 格式的文本放入任何内容中的方法
块级标签。 您可以通过向标签添加 markdown 属性来完成此操作
值 1 — 给出 markdown="1" —
像这样：

<div markdown="1">
This is *true* markdown text.
</div>

markdown="1" 属性将被删除，并且 的内容将从 Markdown 转换为 HTML。 最终结果将如下所示：

<div>

<p>This is <em>true</em> markdown text.</p>

</div>