markdown - 如何在 Jekyll 中注入(inject) HTML

Question

在 Jekyll (2.5.3) 应用程序上，我想注入(inject)一些 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

rules关于原始 HTML 的状态(强调已添加):

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

因此，您需要:

[Google](https://google.com/)

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

当然，如果您确实希望两者在同一行(或至少在同一段)，那么您需要使用内联 HTML 标记。正如规则所述(强调):

Span-level HTML tags — e.g. <span>, <cite>, or <del> — can be used anywhere in a Markdown paragraph, list item, or header. If you want, you can even use HTML tags instead of Markdown formatting; e.g. if you’d prefer to use HTML <a> or <img> tags instead of Markdown’s link or image syntax, go right ahead.

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

因此，你可以这样做:

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

当您使用 Kramdown 时，您可能还会发现 Kramdown 的 syntax documentation对于原始 HTML 很有帮助。 Kramdown 还包括对非标准 Attribute Lists 的支持功能，它允许您将属性分配给生成的 HTML，而无需在 Markdown 中使用原始 HTML。但是，属性只能分配给可以在 Markdown 中表示的元素。由于 Markdown 没有任何方式来本地表示 div 或 span，因此您将无法使用它们。但是，您可以将您的类(class)分配给一个段落:

[Google](https://google.com/)

new
{: .info }

以上将生成以下 HTML:

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

请注意 info类已分配给第二个 <p> .

或者，您可以将类分配给内联元素(例如强调):

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

结果如下:

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

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