如何将 Markdown 包装在 HTML div 中？

How can I wrap my markdown in an HTML div?

提问by mikemaccana

I am using MarkEdwhich implements GitHub flavoured markdown.

我使用的MarkEd实现了GitHub 风格的 markdown。

I have some working markdown:

我有一些工作降价：

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

Which creates:

这创造了：

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

I would like to wrap that markdown section in a div, eg:

我想将该降价部分包装在一个 div 中，例如：

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

However this returns the following HTML:

但是，这将返回以下 HTML：

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

Eg, no markdown, literally '## Test heading' appears in the HTML.

例如，没有降价，字面意思是“## 测试标题”出现在 HTML 中。

How can I properly wrap my markdown in a div?

如何正确地将降价包装在 div 中？

I have found the following workaround, however it is ugly and not an actual fix:

我找到了以下解决方法，但它很丑陋，而不是实际修复：

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

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

</div>

回答by LucasB

Markdown

降价

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

对于 Markdown，这是设计使然。来自Markdown 参考的内联 HTML部分：

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

请注意，Markdown 格式语法不在块级 HTML 标签内处理。例如，您不能在 HTML 块中使用 Markdown 风格的强调。

But it is explicitly allowed for span-level tags:

但明确允许跨级标签：

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

与块级 HTML 标记不同，Markdown 语法在跨级标记内处理。

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

因此，根据您的用例，您可能会使用 aspan而不是 a div。

CommonMark

通用标志

If the library you use implements CommonMark, you are lucky. Example 108and 109of 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:

如果您使用的库实现了CommonMark，那么您很幸运。规范的示例108和109表明，如果在 HTML 块和 Markdown 代码之间保留一个空行，则内容将被解析为 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=1attribute on the HTML tag to enable parsing of Markdown inside it.

并且，再次根据参考中的同一部分，一些实现会识别markdown=1HTML 标记上的附加属性，以启用其中的 Markdown 解析。

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

虽然它似乎还没有在 StackOverflow 中工作：

在红色背景 div 中测试 **Markdown**。

回答by Qwertie

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

GitHub Pages 支持markdown="1"解析 HTML 元素内部的 markdown 属性，例如

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

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

注意：截至 2019/03，这不适用于 github.com，仅适用于 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.

注意：markdown="1"HTML5 不需要引号，如，但如果您不使用引号 ( markdown=1)，GitHub 不会将其识别为 HTML。此外，支持现在有问题。如果您的 HTML 元素大于单个段落，您可能会得到不正确的输出。例如，由于错误，我无法在 div 中嵌入 Markdown 列表。

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

如果您发现自己处于一个markdown="1"不能工作但span可以工作的环境中，另一种选择是使用，<span style="display:block">以便块级类与其兼容，例如

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

提示：<span class="note"></span>比 短<div class="note" markdown="1"></div>，因此如果您控制 CSS，您可能更喜欢使用<span>并添加display: block;到您的 CSS。

回答by Adolfo Gomez Nasol

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 才能在 HTML 块内进行 Markdown 格式设置，请查看此处所述的文档 -> https://mchelf.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"

Markdown Extra 为您提供了一种将 Markdown 格式的文本放入任何块级标签的方法。您可以通过向标记添加一个值为 1 的 markdown 属性来实现这一点 — 这使得 markdown="1"

回答by Simon_Weaver

Last resort option:

最后的选择：

Some libraries may be case sensitive.

某些库可能区分大小写。

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

尝试<DIV>而不是<div>看看会发生什么。

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

Markdownsharp 具有这个特性——尽管在 StackOverflow 上他们无论如何都会去掉所有的 DIV，所以不要指望它在这里工作。

回答by RyanDay

By looking at the docs for Extending Markedand modifying the htmlrenderer 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.

通过查看Extending Marked和修改html渲染器方法的文档，您可以执行类似的操作，用解析的 Markdown 替换标记之间的部分。我没有做过广泛的测试，但它在我的前几次尝试中起作用。

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.

这个新的正则表达式将确保只有在它和 html 标签之间有行的降价才会被解析。

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