如何将我的降价包装在HTML div中？

Question

我正在使用MarkEd来实现GitHub flavoured markdown。

我有一些工作降价：

## 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中包含markdown部分，例如：

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

Answer 1

Markdown

对于Markdown，这是设计的。来自Markdown参考的Inline HTML部分：

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

但明确允许跨度级别标记：

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

因此，根据您的使用情况，您可能会使用span而不是div。

CommonMark

如果您使用的库实现了CommonMark，那么您很幸运。示例的108和109示例表明，如果在HTML块和markdown代码之间保留一个空行，则内容将被解析为Markdown：

<div>

*Emphasized* text.

</div>

应该工作，而以下不应该：

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

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

虽然它似乎在StackOverflow中不起作用：

Testing **Markdown** inside a red-background div.

Answer 2

Markdown Extra需要能够在HTML块中进行Markdown格式化工作，请查看此处所述的文档 - > https://michelf.ca/projects/php-markdown/extra/

Markdown Extra为您提供了一种将Markdown格式的文本放在任何块级标记内的方法。您可以通过向标记添加markdown属性来实现此目的，其值为1 - 这使得markdown =“1”

Answer 3

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

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

注意：截至2019/03，这不适用于github.com，只适用于GitHub Pages。

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

如果你发现自己处于markdown="1"无效但span无效的环境中，另一种选择是使用<span style="display:block">，以便块级类与之兼容，例如：

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

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

Answer 4

通过查看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

这个新的正则表达式将确保只解析它与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);
});

Answer 5

最后的选择：

某些库可能区分大小写。

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

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