Question

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>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </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?

Was it helpful?

Solution

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>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </h2>
{% endif %}
{% endfor %}
```
{%endraw%}

OTHER TIPS

Enclose your code in backticks:

(tested with redcarpet markdown engine)

```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
    <h2>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </h2>
{% endif %}
{% endfor %}
```

There are at least three options exist, taht you can use to format code in Jekyll:

  1. 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)

  1. backtick - GitHub style
```java
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
```
  1. HTML pre/code - HTML can be included in markdown as well

<pre><code> ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber); <code/></pre>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top