Rendering Markdown inside an html include

Help
1

Hello fellow Jekyllers!

I am trying (and failing, in this case) to render Markdown inside an html “include.” I tried putting markdown="block" on the div to no avail. What else should I try?

In case you want to see, here is a page on my site exhibiting the problem (note the raw > quote inside the box) and here is the relevant include file.

Oddly, it seems to only be a problem with that particular include. A e.g. {{ post.excerpt }} in other includes render markdown just fine :confused:

Any help understanding what’s going on here would be appreciated, thanks!

2

Hi @KhBh

One approach could be to use markdownify filter to convert markdown to rendered HTML.

{{ include.content.content | markdownify }}

Don’t use markdown=“block”

2 Likes
3

Here’s another approach. I recently added markdown to my includes file.

The includes file ends in .md and I just use markdown code. _includes/link_list.md

{% for link in page.links %}
- [{{ link.title }}]({{ link.url }})
{% if link.description %}  - {{ link.description }}{% endif %}
{% endfor %}

And it renders here - blog post

Further notes

If you are going to mix HTML tags and markdown, make sure you leave open lines, as demonstrated below. And also do not indent the markdown code simply for readability - otherwise it will turn into code blocks.

The behavior here below on this forum matches what you get in Github. Where I have used bullet point here, you could equally use > for quote.

Good

Code:

<div>

- This text WILL render as markdown bullet point.

</div>

Result:

  • This text WILL render as markdown bullet point.

No empty lines

Code:

<div>
- This text will NOT render as markdown bullet point but as plain text.
</div>

Result:

- This text will NOT render as markdown bullet point but as plain text.

Bad indentation

Code:

<div>

    - This text is indented 4 spaces so will become a code block and NOT a bullet point.

</div>

Result:

- This text is indented 4 spaces so will become a code block and NOT a bullet point.
1 Like
4

Thanks! | markdownify did the trick!

But I’m still a bit confused, why did I not need to markdownify in my other, very similar, include?

5

possibly because it’s an html, not md file?

6

Yeah, I thought that too, so I tried changing the _layout file to .md but that didn’t work. I guess there is some Jekyll internal logic which always treats _layout files as html even if you name them .md?

7

Ah, I had not considered it’s a file in the _layouts directory, learned something new again. I am not sufficiently fluent in Jekyll to comment on your convincing “some Jekyll internal logic” comment.
Best, Michael.

8

So I did a little more reading of the Jekyll docs, and the order of interpretation page suggests that, indeed, markdown to html conversion is completed before _layout templates are applied, making any markdown in a layout file moot. Not at a computer right now to verify this, but it makes sense of the behavior I was seeing. Thanks for your help everyone! :slight_smile:

9

Thank you for pointing to the doc page. Much clearer now. M.

10

Markdownify filter aside - yes a layout file can indeed be .md, as per the Coding Blog link I posted for an includes file and a live page using that. Just make sure you stop and start the server so it can reload the includes.

I did some testing - with regards to markdownify.

That works well inside .html layout - the markdown would not get rendered as HTML otherwise. It is unneeded inside an .md layout - if you use it you’ll rendered the markdown twice and get literal paragraph tag. See notes below.

HTML includes test:

_includes/a.html

<ul>
    <li>
        Plain: {{ include.foo }}
    </li>
    <li>
        Markdownify: {{ include.foo | markdownify }}
    </li>
</ul>

Usage in index.md

## a.html

{% include a.html foo='[github](https://github.com)' %}

Rendered result (HTML copy and pasted here, renders in the forum as it did on my Jekyll local page)

a.html

  • Plain: [github](https://github.com)
  • Markdownify:

    github

Note the first point treated as plain text and the second gets rendered used markdownify.

Markdown includes:

_includes/b.md

- Plain: {{ include.foo }}

- Markdownify: {{ include.foo | markdownify }}

Usage in index.md

## b.md

{% include b.md foo='[github](https://github.com)' %}

Here is how that renders (copy pasted HTML)

b.md

Note the used of markdownify in markdown file works well in the first point. In the second point, the double markdown adds &lt;p&gt; for <p> tag.

1 Like