如何将 Markdown 包装在 HTML div 中

发布于04月01日

我有一些工作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>

我想将该markdown 部分封装在一个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>

例如，没有markdown ，字面意思是"##测试标题"出现在HTML中.

How can I properly wrap my markdown in a div?个

我发现了以下解决方法，但它很难看，而且不是实际的修复方法:

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

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

</div>

推荐答案

对于markdown 来说，这是经过设计的.从减价参考的Inline HTML部分中:

请注意，在挡路级别的Html标记内不处理markdown 格式化语法.例如，你不能在HTMLemphasis的挡路中使用markdown 样式的代码.

但对于跨度级别的标记，它是明确允许的:

与挡路级别的Html标记不同，markdown 语法是在跨度级别的标记内处理的.

因此，根据您的用例，您可能会使用span而不是div.

如果你使用的图书馆有公号标记台，那你就幸运了.规范的示例108和109显示，如果在HTML块和标记代码之间保留一条空行，则内容将被解析为标记:

<div>

*Emphasized* text.

</div>

应该可以工作，但以下内容不应该:

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

同样，根据参考中的同一节，一些实现在HTML标记上识别额外的markdown=1属性，以支持对其内部的markdown 进行解析.

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

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

实用课程推荐