Using JekyllRB/Rouge, how does one highlight (but not interpret) Liquid code within a markdown file?
IE:
I have a markdown file with:
Blah blah blah, my cool post... here's some code:
```liquid
{% assign variableName = 'test' %}
```
In the resulting HTML, I'd like to see the actual code, without Jekyll interpreting it within the markdown file.
I figured it out.
Make use of the {% raw %} Liquid tag.
IE:
```
{% raw %}
{{ somevariablewewanttoshow }}
{% endraw %}
```
Related
I want to host some API documentation example code snippets, where the snippets live in different files and are included into a Jekyll page. I'm using Jekyll include tag (https://jekyllrb.com/docs/includes/).
e.g. given this input:
The `br` tag is for line breaks. Example:
<pre>
{% include code-snippet.html %}
</pre>
And code-snippet.html might be like:
<!doctype html>
First line<br>
Second line
I get this output, which has the browser interpreting the tags as HTML:
The `<br>` tag is for line breaks. Example:
<pre>
<!doctype html>
First line<br>
Second line
</pre>
But I'd rather get this output, with the browser interpreting the tags as text:
The `<br>` tag is for line breaks. Example:
<pre>
<!doctype html>
First line<br>
Second line
</pre>
Is there a way to achive this in Jekyll? Is there something like {% include code-snippet.html | htmlEscape %}? I imagine I could fix this with a Ruby plugin (after all, the include tag is just Ruby), but I'd like to avoid writing a plugin if possible.
I found a workaround:
You can read the include into a variable using capture, then include the variable through the xml_escapehttps://jekyllrb.com/docs/includes/ filter:
{% capture code_snippet %}
{% include code-snippet.html %}
{% endcapture %}
<pre>
{{ code_snippet | xml_escape }}
</pre>
The highlight tag also does HTML-escaping:
{% highlight html %}
{% include code-snippet.html %}
{% endhighlight %}
I have a jekyll partial in _includes which wraps a coloured div around its content. The partial (callout.html) looks like this:
<div markdown="1" class="callout">
{{ include.content }}
</div>
And I call it in test.md like this:
{% include callout.html content="Content to be filled with a URL: {{ site.baseurl }}/img/test.png" %}
However, this causes Liquid to throw an error:
Liquid Exception: Invalid syntax for include tag: ...
" Valid syntax: {% include file.ext param='value' param2='value' %} in
bundler: failed to load command: jekyll (/usr/local/lib/ruby/gems/2.6.0/bin/jekyll)
I believe the issue is due to my inclusion of {{ site.baseurl }} in the content parameter.
How can I get around this restriction?
https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes
I found the answer in the Jekyll documentation soon after posting.
The value of the content parameter should be stored as a variable separately before passing it to the include, using capture. For the example above:
{% capture callout_content %}
Content to be filled with a URL: {{ site.baseurl }}/img/test.png
{% endcapture %}
{% include callout.html content=callout_content %}
I have a GitHub pages site running Jekyll. I want to write a code block in a blog post, with the following content:
{% include file.html %}
Unfortunately Jekyll is reading this literally and including the referenced files content, i.e. the content of file.html. How do I explicitly tell Jekyll that this line should not be executed?
Use the raw tag.
{% raw %}{% include file.html %}{% endraw %}
How can I add an id="test" attribute to a {% highlight %} tag in Jekyll?
My first shot would be something like this:
{% highlight ruby id=test %}
# some ruby code
{% endhighlight %}
But it doesn't work.
I need this because I would like to reference the code.
Heads up, for anyone else looking for this now. You can have it a little bit cleaner with:
{: #id_name .class_name }
{% highlight ruby %}
# some ruby code
{% endhighlight %}
For me the only way is :
<div id="test">
{% highlight ruby %}
# some ruby code
{% endhighlight %}
</div>
I'm creating a bird's eye view tutorial for Jekyll, to be hosted on Github pages (on my blog that runs on Jekyll). So, I want to put some code there. If I put the following:
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
(all lines after tabspaces), it doesn't render as code, rather, it executes. How do I stop it from executing and render it as code?
The {%...%} syntax used by Jekyll is part of the Liquid templating engine. To escape these tags, and so show them literally, you should use the raw tag.
You will probably want to combine this with the markdown syntax for code blocks. With Redcarpet you can use the triple backtick syntax. It doesn’t matter if you put the backticks inside the raw tags or the other way round:
{%raw%}
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
{%endraw%}
Enclose your code in backticks:
(tested with redcarpet markdown engine)
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
There are at least three options exist, taht you can use to format code in Jekyll:
highlight - Jekyll has built in
{% highlight java %}
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
{% endhighlight %}
example: https://raw.githubusercontent.com/Labs64/netlicensing.io/gh-pages/_drafts/2010-09-16-post-template.md (see Syntax highlighting section)
backtick - GitHub style
```java
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
```
HTML pre/code - HTML can be included in markdown as well
<pre><code>
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
<code/></pre>