MarkdownからjQueryタブを作成する方法
-
03-07-2019 - |
質問
現在、 Markdown Extra 。ほとんどのコンテンツは見出しと小見出しで構成されているため、非常に長いページになります。各ページの最初に、リストと Markdown Extraを使用して目次を作成します ヘッダーID属性。
ページビューの長さを短くするために、jQueryの Tabsプラグイン見出しの最初のレベル。
問題は、 Markdown Extra の出力が何と互換性がないことです。 jQuery タブプラグインは、 Markdown Extra は、セクションのコンテンツを個別のdivタグにラップしません。
これら2つのライブラリを連携させる方法はありますか?
編集
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>
..そして、これは対応するマークダウンコードです:
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の少しの助けを借りて、MarkdownマークアップをTabsプラグインで使用できるものに変換するこのjQueryステートメントを作成しました。
$("#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プラグインに伝えるだけでなく、タブプラグインに合うようにマークアップを変換する必要があるという事実は、このソリューションが理想的なものではない可能性があります。
解決
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 =&quot; 1&quot; &#8212; このように:
<div markdown="1">
This is *true* markdown text.
</div>
markdown =&quot; 1&quot;属性が削除され、&#8217;のコンテンツがMarkdownからHTMLに変換されます。最終結果は次のようになります。
<div>
<p>This is <em>true</em> markdown text.</p>
</div>