如何在 Jekyll 中注入 HTML

Question

在 Jekyll (2.5.3) 应用程序上，我想注入一些 HTML 来设置样式，但我很难做到这一点。

这是我的代码

_config.yml

...
markdown: kramdown
highlighter: rouge
...

页面.md

[Google](https://google.com/) <div class="info">new</div>

但是，一旦构建完成，就会产生以下结果

Google <div class="info">new</div>

HTML 不会被解析，而是简单地呈现为文本。

经过一番谷歌搜索后，我尝试过

<div class="info" markdown="1">new</div>

结尾

markdown: kramdown
kramdown:
  parse_block_html: true
highlighter: rouge

但结果总是一样的。

我在这里错过了什么吗？

谢谢。

Answer 1

有关原始 HTML 的规则规定（已添加重点）：

\n\n

\n

唯一的限制是块级 HTML 元素 \xe2\x80\x94 例如<div>、<table>、<pre>、<p>等。 \xe2\x80\x94必须用空行与周围内容分隔，并且块的开始和结束标记不应用制表符或空格缩进。Markdown 足够聪明，不会<p>在 HTML 块级标签周围添加额外的（不需要的）标签。

\n

\n\n

因此，您需要执行以下操作：

\n\n

[Google](https://google.com/)\n\n<div class="info">new</div>\n

\n\n

当然，如果您确实希望两者在同一行（或至少在同一段落中），那么您需要使用内联 HTML 标记。正如规则所述（强调是添加的）：

\n\n

\n

跨度级 HTML 标签 \xe2\x80\x94 例如<span>、<cite>或<del>\xe2\x80\x94可以在 Markdown 段落、列表项或标题中的任何位置使用。如果需要，您甚至可以使用 HTML 标签而不是 Markdown 格式；例如，如果您\xe2\x80\x99d 更喜欢使用 HTML<a>或<img>标签而不是 Markdown\xe2\x80\x99s 链接或图像语法，请继续。

\n\n

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

\n

\n\n

因此，你可以这样做：

\n\n

[Google](https://google.com/) <span class="info">new</span>\n

\n\n

当您使用 Kramdown 时，您可能还会发现 Kramdown 的语法文档对于原始 HTML 很有帮助。Kramdown 还支持非标准属性列表功能，该功能允许您将属性分配给结果 HTML，而无需在 Markdown 中使用原始 HTML。但是，属性只能分配给可以在 Markdown 中表示的元素。由于 Markdown 没有任何方式来原生表示 div 或 span，因此您将无法使用它们。但是，您可以将您的班级分配给一个段落：

\n\n

[Google](https://google.com/)\n\nnew\n{: .info }\n

\n\n

上面将生成以下 HTML：

\n\n

<p><a href="https://google.com/">Google</a></p>\n<p class="info">new</p>\n

\n\n

请注意，该类info已分配给第二个<p>。

\n\n

或者，您可以将一个类分配给内联元素（例如强调）：

\n\n

[Google](https://google.com/) *new*{: .info }\n

\n\n

这会产生以下输出：

\n\n

<p><a href="https://google.com/">Google</a> <em class="info">new</em></p>\n

\n\n

当然，除非您的 CSS 为斜体文本，否则您将看到斜体文本info其关闭，否则您将获得斜体文本，这可能是也可能不是您想要的。有时，直接在 Markdown 中使用原始 HTML 会更容易。

\n