Embedding Markdown in Jekyll HTML

Question

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


        

Answer 1

I just recently spent way too many hours trying to do something similar. @J.T.'s 2nd bullet point, referencing markdownify, is what ultimately got me moving in the right direction.

I had in my _layouts directory a few different layouts. One of them, I wanted to add a bit of an "index" before the page content. The index was working perfectly as a partial, if I called it directly from a page or post, but not when trying to add it to a layout.

Here's what I had:

---
layout: default
---

<div class="table-of-contents">
  
  {% include series_index.md %}
  
  {{ content }}
</div>

But it wouldn't work. Instead of rendering HTML on the page, the include was spitting out the markdown, which was then being added to the page as an ugly block of markdown, instead of rendering the markdown as HTML.

So, I tried tacking | markdownify to the include statement, like so:

  {% include jekyll-bug-fix-index.md | markdownify %}

and that didn't work.

The solution, using a variable, a capture "block", and markdownify

So, I captured the markdown, saved to a variable, and then rendered the variable with the liquid markdownify tag:

  {% capture index %}
  {% include series_index.md %}
  {% endcapture %}
  
  {{ index | markdownify }}

And this works! The Markdown is rendered as HTML on my pages, and all is right in the world.

I have no doubt this is unconventional, and I hope to someday learn a better solution, but it's 100% good enough for me, and I wanted to share so others might benefit from this.