在 Jekyll HTML 中嵌入 Markdown

Question

我正在尝试在使用 Jekyll 时将 Markdown 嵌套在 HTML 文件中。有没有办法实现以下目标？

# 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，基于 their doc 您可以这样做：

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

这样，div 中的文本将呈现为降价。

请确保为文件使用.md 或.markdown 扩展名，因为.html 文件不会发送到Kramdown 进行处理！

Answer 2

以下是使用Jekyll plugin 定义降价块的方法：

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)

（要将这个 sn-p 安装为插件，请将其放在源站点根目录下的 _plugins 目录下的 *.rb 文件中）

然后，像这样使用它：

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

编辑：请参阅@Cristian 的答案以获得更好的解决方案！如果您使用的是 Kramdown（因为您使用的是 Jekyll，所以很可能就是这种情况），您可以使用它的功能在带有 markdown="1" 属性的 div 中呈现 markdown。

Answer 3

从当前的 Jekyll 3.6.2 开始，使用以下两个选项可以简单得多：

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

注意降价属性：

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

Answer 4

@sunny-juneja，查看名为 markdownify 的液体扩展过滤器：

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

像这样使用它：

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

在 Output 标记内的字符串周围加上单引号或双引号。

在 Jekyll 1.0.0beta3 上为我工作

Answer 5

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

1.克拉姆当：

如果您使用的是Kramdown，基于their doc，您可以这样做：

<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"，则标记的内容将被解析为跨度级别元素。

要求：

• 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 很容易：

<script type="text/markdown">
# Hybrid HTML with Markdown is a not bad choice ^\_^

##2. Table Usage

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | :  Apple :| Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

## PlantUML Usage

@startuml
Bob -> Alice : hello
@enduml

## Video Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)
</script>

Answer 6

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

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

这是我所拥有的：

---
layout: default
---

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

但这行不通。 include 不是在页面上呈现 HTML，而是吐出降价，然后将其作为丑陋的降价块添加到页面中，而不是将降价呈现为 HTML。

所以，我尝试将 | markdownify 添加到 include 语句中，如下所示：

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

那没用。

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

​​>

所以，我捕获 markdown，保存到一个变量中，然后用液体markdownify 标签渲染变量：

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

这行得通！ Markdown 在我的页面上呈现为 HTML，一切正常。

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

Answer 7

查看Paul Irish's Gist 的 JS 代码，它可以将您的页面部分从 Markdown 解释为 HTML。