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: 

Onaonager

No problemo. Just do it ! – Persons

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. – Tuning

I updated my question to include the content of my _config.yml file. – Tuning

Actually, you were right: raw HTML in Markdown files just work. I had other issues. Thanks for your help! – Tuning

Then maybe you can approve my answer. – Persons

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 :) – Tuning

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. – Persons

Let us continue this discussion in chat. – Tuning

Answer 1

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)

Marshy

I was going nuts trying to understand why the html were being rendered as if inside backticks until I saw your answer, thanks!!!! – Cletuscleve

How can you escape this behavior? – Asmara

@DickeySingh You can replace 2 spaces with 1 tab. Have a look at this: https://mcmap.net/q/393182/-how-to-include-a-html-file-inside-a-markdown-file-in-jekyll – Philine

@Johan Gorter Several years later, you saved my soul from going insane. Thank you. – Morrismorrison

Answer 2

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.

Omalley

Thanks! I was also able to find the docs here: kramdown.gettalong.org/syntax.html#html-blocks – Eldin