我怎样才能将我的降价包装在 HTML div 中？

Question

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

我想将降价部分包装在 div 中，例如：

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

然而这个returns以下HTML:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

例如，没有markdown，字面意思是'## Test heading'出现在HTML.

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

我找到了以下解决方法，但它很丑陋而且不是真正的解决方法：

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

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

</div>

Answer 1

降价

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

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.

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

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

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

CommonMark

如果您使用的库实现规范的 CommonMark, you are lucky. Example 108 and 109，表明如果您在 HTML 块和 markdown 代码之间保留一个空行，内容将被解析为 Markdown：

<div>

*Emphasized* text.

</div>

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

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

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

虽然它似乎还不能在 Whosebug 中运行：

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

Answer 2

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

Markdown Extra gives you a way to put Markdown-formatted text inside any block-level tag. You do this by adding a markdown attribute to the tag with the value 1 — which gives markdown="1"

Answer 3

最后的选择：

有些库可能区分大小写。

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

Markdownsharp 具有此特性 - 虽然在 Whosebug 上他们无论如何都会删除所有 DIV，所以不要指望它在这里工作。

Answer 4

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

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

注意： 自 2019/03 起，这不适用于 github.com，仅适用于 GitHub 页。

注意： 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.

Answer 5

通过查看 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 标签之间有线条的降价才会被解析。

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 中？

How can I wrap my markdown in an HTML div?

html

markdown

github-flavored-markdown

降价

CommonMark

编辑