如何将markdown包装在HTML div中?

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

我想将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中实际上是“ ##测试标题”。

我怎样才能正确地将减价包装在div中?

我发现以下解决方法,但是它很丑陋,而不是实际的解决方法:

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

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

</div>
5个解决方案
54 votes

降价促销

对于Markdown,这是设计使然。 在Markdown参考的“内联HTML”部分中:

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

但是明确允许跨度级别的标签:

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

因此,根据您的用例,您可能会放弃使用markdown=1而不是div

通用商标

如果您使用的库实现CommonMark,那么您很幸运。 规范的示例108和109显示,如果在HTML块和markdown代码之间留空行,则内容将被解析为Markdown:

<div>

*Emphasized* text.

</div>

应该可以,但以下情况不能:

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

并且,再次根据参考资料中的同一部分,某些实现在HTML标签上识别了一个附加的markdown=1属性,以启用其中的Markdown解析。

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

在红色背景div中测试** Markdown **。
LucasB answered 2019-11-19T01:17:04Z
10 votes

需要Markdown Extra才能在HTML块中进行Markdown格式化,请查看此处说明的文档-> [https://michelf.ca/projects/php-markdown/extra/]

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

Adolfo Gomez Nasol answered 2019-11-19T01:17:35Z
10 votes

GitHub Pages支持<span class="note"></span>属性来解析HTML元素内的markdown,例如

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

注意:从2019/03开始,这不适用于github.com,仅适用于GitHub Pages。

注意:HTML5不需要引号,例如<span class="note"></span>,但是如果您不使用引号(<div class="note" markdown="1"></div>),则GitHub不会将其识别为HTML。 此外,目前支持还很有限。 如果您的HTML元素大于单个段落,则可能会得到错误的输出。 例如,由于错误,我无法在Mark内嵌入Markdown列表。

如果您发现自己在无法使用<span class="note"></span>但不能使用<div class="note" markdown="1"></div>的环境中工作,则另一种选择是使用<span>,以使块级类与之兼容,例如

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

提示:<span class="note"></span><div class="note" markdown="1"></div>短,因此,如果您控制CSS,则可能更喜欢使用<span>并将display: block;添加到CSS中。

Qwertie answered 2019-11-19T01:18:26Z
0 votes

通过查看扩展标记的文档并修改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);
});
RyanDay answered 2019-11-19T01:18:59Z
0 votes

不得已的选择:

一些库可能区分大小写。

尝试使用<DIV>而不是<div>,然后看看会发生什么。

Markdownsharp具有此特性-尽管在StackOverflow上它们仍然剥离所有DIV,所以不要指望它在这里起作用。

Simon_Weaver answered 2019-11-19T01:19:43Z
translate from https://stackoverflow.com:/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div