HTML div에서 마크 다운을 어떻게 래핑 할 수 있습니까?

HTML div에서 마크 다운을 어떻게 래핑 할 수 있습니까?

---

GitHub 맛 마크 다운 을 구현 하는 MarkEd 를 사용하고 있습니다 .

작업 마크 다운이 있습니다.

## Test heading
a paragraph.
## second heading
another paragraph

다음을 생성합니다.

<h2 id="test-heading">Test heading</h2>
<p>a paragraph.</p>
<h2 id="second-heading">second heading</h2>
<p>another paragraph</p>

마크 다운 섹션을 div에 래핑하고 싶습니다. 예 :

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

그러나 이것은 다음 HTML을 반환합니다.

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

예를 들어, 마크 다운이 없습니다. 문자 그대로 '## Test heading'이 HTML에 나타납니다.

내 마크 다운을 div에 제대로 래핑하려면 어떻게해야합니까?

다음 해결 방법을 찾았지만 실제 수정이 아닌 추악합니다.

<div class="blog-post">
<div></div>

## Test heading
a paragraph.
## second heading
another paragraph

</div>

---

가격 인하

Markdown의 경우 이것은 의도적으로 설계된 것입니다. Markdown 참조 의 인라인 HTML 섹션에서 :

Markdown 형식화 구문은 블록 수준 HTML 태그 내에서 처리되지 않습니다. 예를 들어 HTML 블록 내에서 Markdown 스타일 강조를 사용할 수 없습니다 .

그러나 범위 수준 태그에는 명시 적으로 허용됩니다.

블록 수준 HTML 태그와 달리 Markdown 구문은 범위 수준 태그 내에서 처리됩니다.

따라서, 귀하의 사용 사례에 따라, 당신은 사용하여 멀리 얻을 수 있습니다 span대신의 div.

CommonMark

사용하는 라이브러리가 CommonMark를 구현 하면 운이 좋습니다. 사양의 예제 108 및 109 는 HTML 블록과 마크 다운 코드 사이에 빈 줄을 유지하면 콘텐츠가 마크 다운으로 구문 분석된다는 것을 보여줍니다.

<div>

*Emphasized* text.

</div>

다음은 작동하지 않아야합니다.

<div>
*Emphasized* text.
</div>

또한 참조의 동일한 섹션에 따르면 일부 구현 markdown=1은 HTML 태그 의 추가 속성을 인식하여 내부에서 Markdown을 구문 분석 할 수 있습니다.

아직 StackOverflow에서 작동하지 않는 것 같지만 :

빨간색 배경 div 내부에서 ** 마크 다운 ** 테스트

---

Markdown Extra is needed to be able to for Markdown formatting works inside an HTML blocks, please check the documentation stated here -> https://michelf.ca/projects/php-markdown/extra/

Markdown Extra gives you a way to put Markdown-formatted text inside any block-level tag. You do this by adding a markdown attribute to the tag with the value 1 — which gives markdown="1"

---

GitHub Pages supports the markdown="1" attribute to parse markdown inside HTML elements, e.g.

<div class="tip" markdown="1">Have **fun!**</div>

Note: As of 2019/03, this doesn't work on github.com, only GitHub Pages.

Note: Quotes, as in markdown="1", are not required by HTML5 but if you don't use quotes (markdown=1), GitHub does not recognize it as HTML. Also, support is buggy right now. You will likely get incorrect output if your HTML element is larger than a single paragraph. For example, due to bugs I was unable to embed a Markdown list inside a div.

If you find yourself in an environment in which markdown="1" doesn't work but span does, another option is to use <span style="display:block"> so that block-level classes are compatible with it, e.g.

<span style="display:block" class="note">It **works!**</span>

Tip: <span class="note"></span> is shorter than <div class="note" markdown="1"></div>, so if you control the CSS you might prefer to use <span> and add display: block; to your CSS.

---

By looking at the docs for Extending Marked and modifying the html renderer method, you can do something like this to replace the parts between tags with parsed markdown. I haven't done extensive testing, but it worked with my first few attempts.

const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/[^<>]+?(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});

---

Edit

this new regex will ensure that only markdown with lines between it and the html tags will be parsed.

const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/\n\n[^<>]+?\n\n(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});

---

Last resort option:

Some libraries may be case sensitive.

Try <DIV> instead of <div> and see what happens.

Markdownsharp has this characteristic - although on StackOverflow they strip out all DIVs anyway so don't expect it to work here.

ReferenceURL : https://stackoverflow.com/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div