Jekyll doesn't render Markdown when adding HTML

6
votes

I have this markdown code in a Markdown file. It has inline HTML.

---
layout: page
title: About This Website
permalink: /about/
---


This website is built with <i class="fa fa-heart" style="color: #EEAAAA"></i>, 
[Jekyll](https://jekyllrb.com/), [LESS](http://lesscss.org/), 
[Gulp](http://gulpjs.com/), and a series of other [NPM builders](http://gulpjs.com/plugins/).
It is hosted on [Github Pages](https://pages.github.com/).

But when I wrap the stuff below the front matter with a <div>, the markdown doesn't render. Even when I wrapped the opening and closing <div> tags with {% raw %}.

Why? Are there any workarounds? I'm using Jekyll 3.

2
markdownjekyllkramdown

2 Answers

14
votes

If you put your markdown inside an HTML block tag (e.g. div) than you have to allow markdown conversion (the default is off). In kramdown (the default for Jekyll 3) use the markdown="1" attribute. Example:

<div markdown="1">
This is a list:

- Item 1
- Item 2
- Item 3
</div>

PS: Good question. I have added your question to the Jekyll F.A.Q. Cheers.

3
votes

That's exactly how the original Markdown implementation works:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

Jekyll uses Redcarpet by default which behaves the same way. If you are running Jekyll yourself you might be able to create a custom Markdown processor to do what you want, but that won't work if you're using something like GitHub Pages for hosting.