Ben
Ben

Reputation: 13332

Include Jekyll/Liquid code without rendering it

Is it possible to {% include file.html %} without the tags inside it getting rendered?

I'm looking for something along the lines of {% include file.html | no_render %}

The reason I can't put the raw tags inside file.html is that I'm trying to reuse it as a template (it's a bit of a hack).

This would also be good for pages that are trying to self describe. I.e. This useful thing works like this: {% include useful_snippet.html | no_render %}

Upvotes: 8

Views: 2014

Answers (4)

David Jones
David Jones

Reputation: 582

I've implemented the useful_snippet.html solution with some variations and discussed this and a few other options for small code blocks at Jekyll: Display Liquid code in a post.

Upvotes: 1

mhansen
mhansen

Reputation: 1141

Here's a solution with a custom tag:

Put raw_include_relative.rb in _plugins/ directory at your Jekyll root:

# _plugins/raw_include_relative.rb
module Jekyll
  module Tags
    class RawIncludeRelativeTag < IncludeRelativeTag
      # Overriding is explicitly allowed, to modify file content by subclassing:
      # https://github.com/jekyll/jekyll/blob/f5826eed3cde692f84e35140209d5a59ec3eb295/lib/jekyll/tags/include.rb#L178
      def read_file(file, context)
        # Hack: instead of including the file directly without liquid escaping,
        # simply wrap the entire file in a `raw` liquid tag, suppressing liquid
        # processing.
        "{% raw %}" + super + "{% endraw %}"
      end
    end
  end
end

Liquid::Template.register_tag("raw_include_relative", Jekyll::Tags::RawIncludeRelativeTag)

Then you can use {% raw_include_relative somefile.txt %} just as you would use include_relative.

In-practice example.

Upvotes: 0

neoneye
neoneye

Reputation: 52171

For me, I had no luck wrapping thing in {% raw %} and {% endraw %}. My mix of js/html got slightly modified by the parser, breaking things.

In order to include js/html as raw, I use kramdown's nomarkdown extension, like this:

{::nomarkdown}
<script type="text/javascript" src="https://www.pouet.net/pouet-player.js" async defer></script>
<div class="pouet-player" data-version="v1" data-size="medium"><a href='https://www.pouet.net/prod.php?which=30244'>fr-041: debris. by Farbrausch</a></div>
{:/}

Upvotes: 0

David Jacquel
David Jacquel

Reputation: 52789

useful_snippet.html

{% raw %}
  {% comment %}Alot of liquid code{% endcomment %}
  {% assign toto = "Welcome to the hack !" %}
  {% assign string = "a,b,c,d" %}
  {% assign array = string | split:"," %}
  {% for item in array %}
    {{ item }}
  {% endfor %}
{% endraw %}

base display

<pre><code>{% include useful_snippet.html %}</code></pre>

display with jekyll highlight tag

{% highlight liquid %}{% include useful_snippet.html %}{% endhighlight %}

Edit: In Jekyll only process, Liquid is rendered once. So, no way to get one template doing both rendering Liquid and rendering raw Liquid code.

If you want to go that way, you'll have to use generator plugin or hooks.

Upvotes: 4

Related Questions