在Jekyll HTML中嵌入Markdown

Question

我正在尝试使用Jekyll在HTML文件中嵌套markdown.有没有办法实现以下这样的事情？

# index.html

---
layout: default
---


<p>[Stack Overflow](http://www.stackoverflow.com)</p>

注意:我知道我可以这样做.

# index.html

---
layout: default
---


<p><a href="http://www.stackoverflow.com">Stack Overflow</a></p>

Answer 1

如果您使用Kramdown,根据他们的文档,您可以这样做:

<div markdown="1">
   My text with **markdown** syntax
</div>

这样,其中的文本div呈现为markdown.

确保使用的.md或.markdown扩展的文件,因为.html文件不会被发送到Kramdown进行处理!

Answer 2

以下是使用Jekyll插件定义markdown块的方法:

module Jekyll
  class MarkdownBlock < Liquid::Block
    def initialize(tag_name, text, tokens)
      super
    end
    require "kramdown"
    def render(context)
      content = super
      "#{Kramdown::Document.new(content).to_html}"
    end
  end
end
Liquid::Template.register_tag('markdown', Jekyll::MarkdownBlock)

(要将此代码段安装为插件,请将其放在源站点根目录下的*.rb文件中_plugins)

然后,像这样使用它:

{% markdown %}
[Stack Overflow](http://www.stackoverflow.com)
{% endmarkdown %}

编辑:请参阅@ Cristian的答案以获得更好的解决方案!如果您正在使用Kramdown(这可能就是您使用Jekyll的情况),您可以使用它的功能在内部div使用markdown="1"属性渲染markdown .

Answer 3

我最近花了太多时间尝试做类似的事情。@JT 的第二个要点，引用markdownify，最终让我朝着正确的方向前进。

我的_layouts目录中有一些不同的布局。其中之一，我想在页面内容之前添加一些“索引”。如果我直接从页面或帖子调用索引，则该索引可以完美地作为部分工作，但在尝试将其添加到布局时则不然。

这是我所拥有的：

---
layout: default
---

<div class="table-of-contents">
  
  {% include series_index.md %}
  
  {{ content }}
</div>

但这是行不通的。不是在页面上渲染 HTML，而是include吐出 Markdown，然后将其作为丑陋的 Markdown 块添加到页面，而不是将 Markdown 渲染为 HTML。

因此，我尝试| markdownify对include声明进行补充，如下所示：

  {% include jekyll-bug-fix-index.md | markdownify %}

但这不起作用。

解决方案，使用变量、捕获“块”和 markdownify

因此，我捕获了markdown，保存到变量中，然后使用 Liquidmarkdownify标签渲染该变量：

  {% capture index %}
  {% include series_index.md %}
  {% endcapture %}
  
  {{ index | markdownify }}

这有效！Markdown 在我的页面上呈现为 HTML，一切正常。

我毫不怀疑这是非常规的，我希望有一天能学到更好的解决方案，但它对我来说 100% 足够好，我想分享，以便其他人可以从中受益。

Answer 4

@ sunny-juneja,查看名为的Liquid Extension Filter markdownify:

https://github.com/mojombo/jekyll/wiki/liquid-extensions#markdownify

像这样使用它:

<p>{{ '[Stack Overflow](http://www.stackoverflow.com)' | markdownify }}</p>

在输出标记内的字符串周围加上单引号或双引号.

适用于Jekyll 1.0.0beta3

Answer 5

从当前的Jekyll 3.6.2开始，可以通过以下两个选项简化生活：

<div>
{{ "## Yes, this renders as markdown" | markdownify }}
</div>

注意markdown属性：

<div markdown="1">
## some markdown
inside some html. `snippet` _italic_ **bold**
</div>

Answer 6

markdown-formatted要将Jekyll 页面中的字符串转换为 HTML，THREE WAYS可以选择如下：

1.克拉姆当：

如果您使用Kramdown，根据他们的文档，您可以执行以下操作：

<div markdown="1">
## Some Markdown Title
Let's have a look. `snippet` _italic_ **bold**
</div>

属性markdown：

• 如果 HTML 标签具有属性 markdown="0"，则该标签将被解析为原始 HTML 块。
• 如果 HTML 标签具有属性 markdown="1"，则使用此标签中解析语法的默认机制。
• 如果 HTML 标签具有属性 markdown="block"，则该标签的内容将被解析为块级元素。
• 如果 HTML 标签具有属性 markdown="span"，则该标签的内容将被解析为 span 级别元素。

要求：

• Markdown 内容需要在DIV tag.
• 确保使用文件的.md或.markdown扩展名，因为 .html 文件不会发送到 Kramdown 进行处理）

2. 液体延伸过滤器

有一个名为markdownify的液体扩展过滤器，它还可以帮助您将 Markdown 格式的字符串转换为 HTML。

<div>
{{ "Renders as markdown. `snippet` _italic_ **bold**" | markdownify }}
</div>

3.Jekyll插件：

jekyll-spaceship - 一个 Jekyll 插件，为 table、mathjax、mermaid、plantuml、emoji、youtube、vimeo、dailymotion 等提供强大的支持。

https://github.com/jeffreytse/jekyll-spaceship

使用这个插件，可以很容易地在 HTML 中编写 markdown：

<div>
{{ "Renders as markdown. `snippet` _italic_ **bold**" | markdownify }}
</div>