【问题标题】：How can I wrap my markdown in an HTML div?如何将 Markdown 包装在 HTML div 中？
【发布时间】：2015-06-04 19:23:28
【问题描述】：

我正在使用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>

我想将该 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>

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

如何正确地将我的 markdown 包装在 div 中？

我找到了以下解决方法，但它很难看，并不是真正的解决方法：

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

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

</div>

【问题讨论】：

您可能想查看header-sections，它根据标题将内容分成几部分。

标签： html markdown github-flavored-markdown

【解决方案1】：

降价

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

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

但是对于跨度级别的标签是明确允许的：

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

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

通用标记

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

<div>

*Emphasized* text.

</div>

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

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

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

虽然它似乎还不能在 StackOverflow 中工作：

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

【讨论】：

我试图对 python 中的 markdown 库（在 pelican 中使用）做同样的事情，并且
技巧奏效了。非常感谢。
记录在案：SO 故意阻止 div、脚本和其他内联元素。根本不可能更改颜色（MathJax 除外，但此处未启用）
@lucas smart，这是您的现场测试代码，包括空行和 md=1：<div style="background: red" markdown=1> Testing **Markdown** inside a red-background div. </div>
markdown=1 在父元素上可以解析通过 erb 在模板中插入的 HTML 标记内的降价内容，该模板具有 .html.md.erb 扩展名和默认降价引擎（不是使用哪个，但它可以工作)。

【解决方案2】：

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

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

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

注意： 引号，如 markdown="1"，不是 HTML5 要求的，但如果您不使用引号 (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。

【讨论】：

我在 github 上测试了markdown="1"。这是行不通的。 link
span 解决方案在 GitHub 上完美运行。 link 非常感谢。
经过进一步调查，Github 和 Typora 无法正确渲染，但 Visual Studio 代码可以！
@Foad 它适用于 GitHub Pages，但不适用于 GitHub 本身，例如见证**Tip:** 出现在this page 上的文字，它在GHP rendering of the same file 上显示为提示：。我会澄清文本。
我还发现（在 GitHub Pages 上）markdown="1" 必须是标签中的最后一个属性。例如，<div markdown="1" class="tip">Have **fun!**</div> 将不起作用。

【解决方案3】：

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

Markdown Extra 提供了一种将 Markdown 格式的文本放入其中的方法任何块级标签。您可以通过向值为 1 的标签 — 给出 markdown="1"

【讨论】：

这似乎只与“PHP Markdown”有关。

【解决方案4】：

最后的选择：

某些库可能区分大小写。

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

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

【讨论】：

如果它不是真的我会删除它，但对我来说这是我解决方案的一部分 - 听起来很奇怪
听起来你只是在欺骗一个有缺陷的 Markdown 解析器实现（区分大小写），他们可能会在未来修补它。
这正是我所做的
这是唯一一个与hugo一起工作的，谢谢你的提示，希望它永远不会被修补！！！！（要磨练跨度技巧的工作，但我需要使用 div 给它特殊的 css 类，不适用于跨度）

【解决方案5】：

通过查看Extending Marked 的文档并修改html 渲染器方法，您可以执行类似的操作来将标记之间的部分替换为已解析的降价。我还没有进行过广泛的测试，但在我最初的几次尝试中它是有效的。

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

【讨论】：