Embedding Markdown in Jekyll HTML

Question

I\'m trying to nest markdown in an HTML file while using Jekyll. Is there a way to achieve something like the following?

# index.html

---
layout: default
--         


        

Answer 1

Take a look at Paul Irish's Gist for a JS code that can interpret sections of your page from Markdown to HTML.

Answer 2

To convert the markdown-formatted string to HTML in a Jekyll page, there are THREE WAYS can be selected as below:

1. Kramdown:

If you are using Kramdown, based on their doc you can do this:

<div markdown="1">
## Some Markdown Title
Let's have a look. `snippet` _italic_ **bold**
</div>

The markdown attribute:

• If an HTML tag has an attribute markdown="0", then the tag is parsed as raw HTML block.
• If an HTML tag has an attribute markdown="1", then the default mechanism for parsing syntax in this tag is used.
• If an HTML tag has an attribute markdown="block", then the content of the tag is parsed as block level elements.
• If an HTML tag has an attribute markdown="span", then the content of the tag is parsed as span level elements.

Requirments:

• The markdown content need to be within the DIV tag.
• Make sure to use the .md or .markdown extension for the file as .html files aren't sent to Kramdown for processing)

2. Liquid Extension Filter

There is a liquid extension filter called markdownify, it also can help you convert a Markdown-formatted string into HTML.

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

3. Jekyll plugin:

jekyll-spaceship -

Answer 3

As of current Jekyll 3.6.2 life can be a lot simpler with the following two options:

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

note the markdown-attribute:

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

Answer 4

@sunny-juneja, check out the Liquid Extension Filter called markdownify:

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

Use it like this:

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

Put single or double quotes around your string inside of the Output tag.

Works for me on Jekyll 1.0.0beta3

Answer 5

If you are using Kramdown, based on their doc you can do this:

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

And this way, the text within the div is rendered as markdown.

Make sure to use the .md or .markdown extension for the file, as .html files aren't sent to Kramdown for processing!

Answer 6

Here's how you can define a markdown block with a 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)

(To install this snippet as a plugin, put it in a *.rb file under _plugins directory of your source site root)

Then, use it like this:

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

EDIT: See @Cristian's answer for a better solution! If you're using Kramdown (which is likely the case since you are using Jekyll), you can use it's feature to render markdown inside div's with a markdown="1" attribute.