Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent HTML included in markdown file being processed further by Jekyll?

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.

like image 688
George Hawkins Avatar asked Feb 02 '15 16:02

George Hawkins


People also ask

Can markdown render HTML?

Markdown's simple syntax makes it an excellent alternative to HTML. The language has always supported the embedding of HTML, but now you can go the other way and embed Markdown in HTML. Using a simple library, you can host embedded Markdown in your web pages and have it converted to proper HTML on the fly.

Does Jekyll use Markdown?

By default, Jekyll uses the kramdown Markdown processor with stock settings, but you can enable other kramdown options or even switch Jekyll to another Markdown processor. See the Jekyll Markdown configuration options documentation for more information.

What is markdown in Jekyll?

Markdown is a language used to simplify writing HTML. Plain text characters like # and * are used in place of HTML tags. These characters are then processed by Jekyll (or another script or application) and transformed into HTML tags. As the name Markdown suggests, the language has been trimmed down to a minimum.


2 Answers

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.

like image 187
Wardy Avatar answered Jan 02 '23 22:01

Wardy


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

like image 34
RobertKenny Avatar answered Jan 02 '23 22:01

RobertKenny