web-dev-qa-db-ja.com

Jekyll HTMLにMarkdownを埋め込む

Jekyllを使用しているときに、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>
htmlmarkdownjekyll
37
sunnyrjuneja

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 %}

[〜＃〜] edit [〜＃〜]：より良い解決策については@Cristianの回答を参照してください！ Kramdownを使用している場合（Jekyllを使用しているため、これが当てはまる可能性があります）、その機能を使用して、div内にmarkdown="1"属性を付けてマークダウンをレンダリングできます。

25
MisterMetaphor

their doc に基づいてKramdownを使用している場合、これを行うことができます：

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

このようにして、div内のテキストはマークダウンとしてレンダリングされます。

必ず.mdまたは.markdownファイルの拡張子、.htmlファイルは処理のためにKramdownに送信されません！

58
Cristian

現在のJekyll 3.6.2の時点で、次の2つのオプションを使用して、寿命を大幅に短縮できます。

enter image description here

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

markdown-attributeに注意してください：

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

@ sunny-juneja、markdownifyという名前のLiquid Extension Filterをチェックしてください：

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

次のように使用します。

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

Outputタグ内の文字列を一重引用符または二重引用符で囲みます。

Jekyll 1.0.0beta3で動作します

6
J W

MarkdownからHTMLにページのセクションを解釈できるJSコードについては、 Paul Irish's Gist をご覧ください。

4
Traveling Tech Guy