如何从Markdown创建jQuery选项卡
-
03-07-2019 - |
题
我目前正在运行基于PHP的内容管理系统,该系统在 Markdown Extra 。大多数内容由标题和子标题组成,这导致了很长的页面。在每个页面的开头,我在列表的帮助下创建了一个目录,并且 Markdown Extra的 标头ID属性。
为了缩短页面视图的长度,我想使用jQuery的 Tabs Plugin 在第一级标题上。
问题是 Markdown Extra 的输出与什么不兼容jQuery 标签插件是期待的,因为 Markdown Extra 没有将一个部分的内容包装成一个单独的div-tag。
有没有办法让这两个图书馆一起工作?
修改
这就是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);
});
但事实上,我需要转换标记以适应Tabs插件,而不是仅仅告诉Tabs插件它应该以不同的方式选择其内容,这可能使这个解决方案不是理想的解决方案。
解决方案
在您的document.ready
上$("#sub1,#sub2,#sub3").each(function() {
var containerDiv = $("<div>").attr("id", $(this).attr("id") + "div");
$(this).before(containerDiv);
containerDiv.append(this);
});
并将降价改为
...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...
其他提示
在我看来,你可以自己将目录包装在一个div中。
您链接到它的Markdown Extra页面的一半显示了如何在div中插入Markdown,如下所示:
PHP Markdown Extra为您提供了一种将Markdown格式的文本放入任何内容的方法 块级标签。您可以通过向标记添加markdown属性来执行此操作 值1&#8212;这给出了markdown =“1” &#8212; 像这样:
<div markdown="1">
This is *true* markdown text.
</div>
markdown =&quot; 1&quot;属性将被剥离,并且&n;的内容将从Markdown转换为HTML。最终结果如下:
<div>
<p>This is <em>true</em> markdown text.</p>
</div>
不隶属于 StackOverflow