在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，基于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)

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

然后，像这样使用它：

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

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

Answer 3

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

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

像这样使用：

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

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

在Jekyll 1.0.0beta3上为我工作

Answer 4

请查看Paul Irish's Gist以获取可以将您的网页部分从Markdown解释为HTML的JS代码。

Answer 5

截至目前的Jekyll 3.6.2，使用以下两个选项可以简化生活：

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

请注意markdown-attribute：

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

Answer 6

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

1。 Kramdown：

如果您使用的是 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”，则该标签的内容将被解析为跨度级别元素。

要求：

• 降价内容必须在DIV tag之内。
• 确保文件使用.md或.markdown扩展名 因为.html文件不会发送到Kramdown进行处理）

2。液体扩展过滤器

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

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

3。 Jekyll插件：

jekyll-spaceship-Je一个Jekyll插件，为表格，mathjax，美人鱼，plantuml，表情符号，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 7

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

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

这就是我所拥有的：

---
layout: default
---

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

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

因此，我尝试将| markdownify附加到include语句中，如下所示：

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

那是行不通的。

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

因此，我捕获了降价记录，将其保存到变量中，然后使用液体markdownify标签来呈现该变量：

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

这有效！ Markdown在我的页面上以HTML呈现，并且一切都正确。

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