Jekyll: Include HTML partial inside Markdown file

32
votes

Is there a way to include an HTML partial from a Markdown file with Jekyll?

Example:

File index.md:

---
layout: default
title: Home
---

This is a [Markdown](http://daringfireball.net/projects/markdown/) file.

{% include foobar.html %}

File _includes/foobar.html:

<ul>
    <li>Foo</li>
    <li>Bar</li>
</ul>

This unfortunately does not seem to work in my case.

For completeness, here is the entire content of my _config.yml file:

encoding: utf-8
markdown: kramdown
baseurl:
2
htmlmarkdownjekyllpartial
No problemo. Just do it ! – David Jacquel
Doesn't seem to work :) The <ul> and </ul> tags appear as plain text while the rest appears as code since it's indented with four spaces. – François Beaune
I updated my question to include the content of my _config.yml file. – François Beaune
Actually, you were right: raw HTML in Markdown files just work. I had other issues. Thanks for your help! – François Beaune
Then maybe you can approve my answer. – David Jacquel

2 Answers

33
votes

A common reason the html shows up as plain text is when the html snippet is indented with at least four spaces.

This causes jekyll to interpret the html as a code block that is to be displayed literally.

(I know this was already mentioned in the comments, but it took me a while to find and understand that I had the exact same problem)

4
votes

If the .md file you mentioned is located in _posts and the layout type is post, you can use markdown="0" or "1" to set related part as Markdown or HTML as you like because you configurated markdown to kramdown. Try following code:

---
layout: post
title: Home
---

# Markdown part

This is a [Markdown](http://daringfireball.net/projects/markdown/) file.

<section id="categories" markdown="1">

A list of categories:

- foo
- bar

</section>

<div id="html" markdown="0">
<h1>HTML part</h1>

  <ul>
    <li>Foo</li>
    <li>Bar</li>
  </ul>

</div>

If the .md file you mentioned is located in _includes, _layouts or page, you can directly use your code or change the layout type to page:

---
layout: default
title: Home
---

This is a [Markdown](http://daringfireball.net/projects/markdown/) file.

{% include foobar.html %}

See an example here: https://raw.githubusercontent.com/plusjade/jekyll-bootstrap/master/index.md.

Just enjoy.