45

我试图在使用 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>
4

7 回答 7

78

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

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

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

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

于 2014-04-30T09:15:44.527 回答
27

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

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's 中使用markdown="1"属性呈现 markdown。

于 2013-08-30T09:35:17.617 回答
12

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

在此处输入图像描述

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

注意降价属性：

<div markdown="1">
## some markdown
inside some html. `snippet` _italic_ **bold**
</div>
于 2017-11-22T10:26:55.670 回答
9

@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 上为我工作

于 2013-04-11T03:17:59.607 回答
4

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

要求：

  • 降价内容需要在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>
于 2020-05-01T15:32:47.257 回答
4

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

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

这是我所拥有的：

---
layout: default
---

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

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

所以，我试着附和| markdownify这个include声明，就像这样：

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

那没有用。

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

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

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

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

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

于 2020-07-30T14:51:34.060 回答
2

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

于 2013-04-10T05:24:37.967 回答