6
votes

I'm working with Jekyll and want to use {% include... %} to include a snippet of HTML in a markdown file without that HTML being processed further, i.e. then being handled by the markdown processor as if it were just inline HMTL.

Note: I'm using redcarpet markdown (rather than e.g. kramdown).

Could this be handled with a Jekyll plugin?

I've created a GitHub repo md-include-html with the following files that demonstrate my problem.

1. _layouts/default.html contains:

<div>
{{ content }}
</div>

2. md-page.md contains:

---
layout: default
---
A

{% include_relative html-snippet.html %}

B

3. html-snippet.html contains:

</div>
<!-- Some arbitrary HTML for {{ page.path }} -->
<div>

Note that I'm first attempting to close the div that will be introduced by _layouts/default.html and then open a new div at the end.

This results in _site/md-page.html:

<div>
<p>A</p>

<p></div>
&lt;!-- Some arbitrary HTML for md-page.md --&gt;
<div></p>

See how my comment has been processed and my content wrapped in <p>...</p>.

It seems the include happens before the markdown processing and there's no way to tell the markdown processor to handle the included text differently.

So I can include markdown in a HTML file with something like this (see html-page.html in my repo):

{% capture snippet_content %}
{% include_relative md-snippet.md %}
{% endcapture %}
{{ snippet_content | markdownify }}

But I can't include HTML in a markdown file.

I can't see a way around this without a markdown feature (anything done in Liquid essentially happens too early) to temporarily disable markdown processing.

E.g.

A

<markdown-off>{% include_relative html-snippet.html %}</markdown-off>

B

Yes I know the tags don't look very markdown-ish but you get what I mean.

Would there be some way to do this with a Jekyll plugin? I looked at those mentioned in the plugin page of the Jekyll documentation but didn't spot anything immediately.

2
When I originally posted this question I hadn't specified markdown: redcarpet in the _config.yml file in the repo demonstrating this issue. I have now - as this is the markdown type I'm using in my real project.George Hawkins

2 Answers

3
votes

Just came across this issue now. I am using includes to add snippets of html inside .md files in Jekyll. If you are using Kramdown you can add a markdown attribute inside your include snippet.

<div markdown="0"> !-- some html you don't want processed --> </div>

This seems to work.

1
votes

An old question I know, but have you tried wrapping it in the {% raw %} {% endraw %} ?

Try

</div>
{% raw}
<!-- Some arbitrary HTML for {{ page.path }} -->
{% endraw %}
<div>

This should stop the processing by the templating engine.

Indenting the comment by 4 spaces will mean that markdown will treat it as code, however Liquid will still process {{ page.path }}