如何在 HTML div 中包装我的标记?

我使用的是实现 GitHub 风味折扣马克艾德

我有一些工作折扣:

## 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>

例如,HTML 中没有标记,字面意思是“ # # 测试标题”。

如何在 div 中正确包装标记?

我发现了下面的解决方案,但是它很难看,而且不是一个实际的解决方案:

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


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


</div>
109955 次浏览

Markdown

For Markdown, This is by design. From the Inline HTML section of the Markdown reference:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.

But it is explicitly allowed for span-level tags:

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

So, depending on your use-case, you might get away with using a span instead of a div.

CommonMark

If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:

<div>


*Emphasized* text.


</div>

should work, while the following shouldn't:

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

And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.

Though it doesn't seem to work in StackOverflow yet:

Testing **Markdown** inside a red-background 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"

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.

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);
});