9

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?

2

3 Answers 3

25

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%}
0
2

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 %}
```
6
  • The markdown engine is specified in your _config.yml. I have this line in mine: markdown: redcarpet
    – njk
    Commented Feb 26, 2014 at 15:03
  • 1
    Ah! I'm using rdiscount. So is it a problem with the engine @zeis?
    – Ranveer
    Commented Feb 26, 2014 at 15:09
  • 1
    Different engines may use different markers for code blocks.
    – njk
    Commented Feb 26, 2014 at 15:15
  • Any idea which marker this might use. Tabs work in most cases
    – Ranveer
    Commented Feb 26, 2014 at 15:16
  • I don't use rdiscount, anyway try this: {% highlight html %} YOUR CODE HERE {% endhighlight %} this should work with pygments enabled, but I've not tested it.
    – njk
    Commented Feb 26, 2014 at 15:24
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.