Markdown에서 jQuery 탭을 만드는 방법

Question

현재 PHP 기반 컨텐츠 관리 시스템을 실행하고있는 HTML 컨텐츠를 사용하여 마크 다운 추가. 대부분의 컨텐츠는 제목 및 하위 제목으로 구성되어 매우 긴 페이지를 만듭니다. 각 페이지의 시작 부분에서 나는 목록의 도움으로 목차를 만듭니다. Markdown Extra 's 헤더 ID 속성.

페이지보기의 길이를 단축하려면 jQuery의 사용을 원합니다. 탭 플러그인 제목의 첫 번째 레벨에서.

문제는 출력입니다 마크 다운 추가 jQuery와 호환되지 않습니다 탭 플러그인 그 때문에 기대하고 있습니다 마크 다운 추가 섹션의 내용을 별도의 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의 약간의 도움으로 나는 Markdown Markup을 탭 플러그인과 함께 작동하는 것으로 바꾸는이 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);
  });

그러나 탭 플러그인에게 다른 방식으로 컨텐츠를 선택해야한다고 말하는 대신 탭 플러그인에 맞게 마크 업을 변환해야한다는 사실 은이 솔루션이 이상적이지 않을 수 있습니다.

Answer 1

당신의 문서에서

$("#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)
...

Answer 2

당신이 내용물을 직접 묶을 수있는 것처럼 보입니다.

링크 된 Markdown 추가 페이지의 절반은 다음과 같이 div 내부에 Markdown을 삽입하는 방법을 보여줍니다.

PHP Markdown 추가는 마크 다운 형식 텍스트를 블록 레벨 태그 내에 넣는 방법을 제공합니다. 값 1이있는 태그에 Markdown 속성을 추가하여 다음을 수행합니다.

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

Markdown = "1"속성이 제거되고 '컨텐츠는 Markdown에서 HTML로 변환됩니다. 최종 결과는 다음과 같습니다.

<div>

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

</div>