Search code examples
htmlmarkdownjekyll

Embedding Markdown in Jekyll HTML


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


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

Note: I'm aware that I could do this instead.

# index.html

---
layout: default
---


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

Solution

  • 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.