在 Jekyll HTML 中嵌入 Markdown

Posted 2023-03-30

【中文标题】在 Jekyll HTML 中嵌入 Markdown

【英文标题】：Embedding Markdown in Jekyll HTML

【发布时间】：2013-04-10 05:14:57

【问题描述】：

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

# index.html

---
layout: default
---


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

注意：我知道我可以这样做。

# index.html

---
layout: default
---


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

【参考方案1】：

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

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

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

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

【讨论】：

谢谢你，先生，这是建议的最干净的解决方案。

HTML 代码缩进时注意不要有 4 个空格，否则会得到<pre>，见github.com/gettalong/kramdown/issues/213

@PerLundberg 我也很难完成这项工作。什么都搞砸了！！！最后我找到了这个：ricostacruz.com/til/markdown-in-jekyll.html 长话短说，将index.html 重命名为index.md。我花了很长时间才弄明白。

适用于我的 jekyll 3.0

在具有最小 GitHub 设置的 default.html 中不起作用。

【参考方案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.***.com)
% endmarkdown %

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

【讨论】：

请注意，为此我必须 gem install kramdown。不使用 Jekyll 内置的 Markdown 解析工具似乎有点笨拙，但它确实有效！

还要注意Document.new(content, input: 'GFM)会为你启用github风格的markdown。

@PeterEhrlich：Jekyll 使用 Kramdown 作为默认值：github.com/jekyll/jekyll/blob/master/lib/jekyll/…。但是，是的，能够以某种方式将调用委托给 whatever-markdown-processor-is-used-in-the-current-config 会更好。

您能否详细说明如何处理此答案开头的代码块？

@detly，我已经用简短的安装说明更新了答案。

【参考方案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>

【讨论】：

应该markdown="1" 对其他元素起作用，例如display 还是只在div 中起作用？

我不知道有一个显示元素 :P，但它应该可以在 <section>、<nav>、<main> 上工作……

【参考方案4】：

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

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

像这样使用它：

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

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

在 Jekyll 1.0.0beta3 上为我工作

【讨论】：

这适用于变量，但如果您想导入单独的 markdown 文件或将 markdown 直接放在 HTML 块中，则不适用。 @MisterMetaphor 在下面创建插件的回答解决了这个问题。

我认为这行不通。输出内容将为<p><p><p><a href="http://www.***.com">Stack Overflow</a></p>。

【参考方案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>

【参考方案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% 已经足够好了，我想分享给其他人可能会从中受益。

【讨论】：

你成就了我的一天^^

【参考方案7】：

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

【讨论】：

这真的很酷。我希望有一个 jekyll 特定的解决方案，但如果没有人提供，我会将您标记为答案。

如果这个要点消失了，这个答案对未来的访问者就没有用了。将内容放在此答案中，同时仍提供指向原始答案的链接将使此答案永远有用