编辑

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>

我想将divdown部分包装在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>

Answer 1

降价

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

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

但明确允许使用span-level标签：

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

因此，根据您的使用情况，您可能会使用span代替div。

CommonMark

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

<div>

*Emphasized* text.

</div>

应该有效，而以下情况不应该：

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

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

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

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

Answer 2

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

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

注意：从2019/03开始，此功能不适用于github.com，仅适用于GitHub Pages。

注意：{5}不需要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 3

最后的选择：

某些库可能区分大小写。

尝试使用<DIV>代替<div>，看看会发生什么。

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

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

编辑

此新正则表达式将确保仅解析其与html标记之间带有行的markdown。

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

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

4 个答案:

降价

CommonMark

编辑