96

我正在使用MarkEd，它实现了GitHub 风格的 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 中，例如：

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

5 回答 5

97

降价

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

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

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

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

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

通用标志

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

<div>

*Emphasized* text.

</div>

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

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

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

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

在红色背景的 div 中测试 **Markdown**。
于 2015-03-31T20:46:51.990 回答
33

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。

于 2018-06-21T17:26:54.983 回答
11

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

Markdown Extra 为您提供了一种将 Markdown 格式的文本放入任何块级标签中的方法。为此，您可以通过将 markdown 属性添加到值为 1 的标签 - 这给出 markdown="1"

于 2015-11-23T11:00:19.183 回答
2

最后的选择：

一些库可能区分大小写。

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

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

于 2016-05-20T01:50:42.200 回答
1

通过查看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 标签之间的行的降价。

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);
});
于 2018-11-25T16:26:48.193 回答