Jekyll: Include HTML partial inside Markdown file

Question

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:

Doesn't seem to work :) The `
` and `
` tags appear as plain text while the rest appears as code since it's indented with four spaces. — François Beaune, Jan 19 '15 at 18:15
I updated my question to include the content of my `_config.yml` file. — François Beaune, Jan 19 '15 at 18:18
Actually, you were right: raw HTML in Markdown files just work. I had other issues. Thanks for your help! — François Beaune, Jan 20 '15 at 12:34
I'm not sure you understand your answer. You suggest to unindent my list, but it wasn't indented in the first place. Since that wasn't the problem, I don't think it's a good idea to mark it as the actual answer to my question. What about changing your answer to "No problemo. Just do it!" and then I'll accept it, since that was absolutely the correct answer :) — François Beaune, Jan 20 '15 at 17:35
That was a comment not an answer. The fact that you `ul` was indented four spaces was the problem. In markdown `line break + four space = pre>code` that's how I reproduced it. — David Jacquel, Jan 20 '15 at 17:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69245/discussion-between-francois-beaune-and-david-jacquel). — François Beaune, Jan 20 '15 at 19:15

score 38 · Answer 1 · answered Apr 08 '15 at 09:17

38

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)

answered Apr 08 '15 at 09:17

Johan Gorter

1,253
10
13

3

I was going nuts trying to understand why the html were being rendered as if inside backticks until I saw your answer, thanks!!!! – Camilo Delvasto Dec 10 '15 at 20:03
2

How can you escape this behavior? – Dickey Singh Sep 27 '16 at 21:33
2

@DickeySingh You can replace 2 spaces with 1 tab. Have a look at this: http://stackoverflow.com/a/25755861/3793161 – Billybobbonnet May 12 '17 at 14:29
@Johan Gorter Several years later, you saved my soul from going insane. Thank you. – Racso Dec 20 '17 at 01:21

Bravo Yeung · Answer 2 · 2020-09-22T02:16:28.537

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.

Thanks! I was also able to find the docs here: https://kramdown.gettalong.org/syntax.html#html-blocks — Eric Cousineau, Feb 16 '21 at 22:10

Jekyll: Include HTML partial inside Markdown file

2 Answers2