Jekyll: Display Liquid code in a Post
web jekyll
Liquid Jekyll code gets evaluated before a page gets rendered. That means that any such code between Markdown code indicators gets evaluated before rendering. Discussion here is about overcoming that.
Demo of the issue
Sample Liquid to display
{% assign list="Hello World" %}
{{ list }}
<div id="{{include.tag}}">
<img src="/images/{{include.imagefile}}" alt="{{include.alt}}">
</div>
Rendered result if not entered in between any tags:
Hello World
- HTML generated:
<p>Hello World</p>
<div>
<img src="/images/" alt="" />
</div>
Liquid code is evaluated. include parameters are treated as blank as no parameters passed to the page.
Rendered result if entered between code tags (triple Grave accent fences)
Hello World
<div id="">
<img src="/images/" alt="">
</div>
- HTML generated:
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
Hello World
<span class="nt"><div</span> <span class="na">id=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/images/"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></div></span>
</code></pre></div></div>
Nb: For first 2 lines Liquid Jekyll code is evaluated. Code is displayed for the div tag but include parameters are treated as blank
Rendered result if entered between Liquid raw tags
{% assign list=”Hello World” %} {{ list }}
- HTML generated:
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p></span>
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/images/"</span> <span class="na">alt=</span><span class="s">""</span> <span class="nt">/></span>
<span class="nt"></div></span>
</code></pre></div></div>
First two lines are rendered literally as one paragraph of Liquid code. The last 3 lines rendered jumbled with blank parameters except that the alt parameter shows as Liquid code.
A cumbersome solution is capture the code as an image and display that.
A Simple Solution
The first two lines of code can be handled simply. Just use the ISO 8859-1 Character for the left braces and then Liquid doesn’t attempt to render any of it:
The first 2 lines:
{% assign list=”Hello World”%}
{{list}}
Can be entered (not between fences) as:
{% assign list="Hello World"%}
{{list}}
that will be rendered as:
{% assign list=”Hello World”%}
{{list}}
:)
More complete solution
This has been discussed on StackOverflow here. The useful_snippet.html solution outlined there, is used here. The code to be displayed is placed in an include file between Liquid raw tags which is included on the target page. It was found that including the included code between code fences (triple Grave accents) on the target page worked:
Included file: /include/tags_example.html
```html
{% include tags_example.html %}
```
renders as:
{% assign list="Hello World" %}
{{ list }}
<div id="{{include.tag}}">
<img src="/images/{{include.imagefile}}" alt="{{include.alt}}">
</div>
Footnote
Nb: The html code fence:
{% include tags_example.html %}
```
was coded on this page for literal display as:
```html
{% include tags_example.html %}
```
| Topic | Subtopic | |
| This Category Links | ||
| Category: | Web Sites Index: | Web Sites |
| Next: > | Azure DevOps | Notifications |
| < Prev: | Jekyll | Rendering on a Mobile Part 1 |
