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
'programing' 카테고리의 다른 글
오류가 발생하는 이유… 예기치 않은 요청 : GET / internalapi / quotes (0) | 2021.01.08 |
---|---|
Xamarin Forms에서 푸시 알림을 사용하는 방법 (0) | 2021.01.08 |
중지 된 Docker 컨테이너를 다시 시작하는 방법 (0) | 2021.01.08 |
ConnectionBackend에 대한 공급자가 없습니다. (0) | 2021.01.07 |
데이터베이스에서 생성 할 JPA 타임 스탬프 열을 설정 하시겠습니까? (0) | 2021.01.07 |