Jekyll code in jekyll - html

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>

Related

Using variables in conditional expressions in if-statements in Jekyll (with Liquid)

I am trying to make a website using Jekyll as a local test for github-pages.
I wrote like the following within my _layouts/default.html, but it seemed that ‘{{ category.name }}’ in the if statement was not recognized as a variable. Can’t we use variables in condition in Jekyll?
{% for category in site.categories %}
{% if page.dir contains ‘{{ category.name }}’ %}
<a href="{{ category.url }}">
{{ category.name }}
</a>
{% endif %}
{% endfor %}
I referred to these manual:
collection
navigation & include
You do not need to put a variable inside double curly braces when evaluating a expression in tags. You simply need to do:
{% if page.dir contains category.name %}

Jekyll: code is getting highligheted unwantingly

I've got the following page:
---
layout: default
status: publish
published: true
title: Categories
author:
display_name: lucas
---
{% for category in site.categories %}
<li><a name="{{ category | first }}">{{ category | first }}</a>
<ul>
{% for posts in category %}
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
Instead of listing the hrefs per categery, it somehow gets code highlighting:
Can anyone help me out preventing the code getting highlighted? Thanks!
As mentioned by #David Jacquel, .md files are automatically parsed as markdown, in which four space indentations are treated as preformatted code.
I followed his suggestion on my website: change all files to .html. This disabled Markdown parsing in the file. However, if you are unwilling to write in pure HTML and would still like to use Markdown, there is a workaround.
For each element that you would like Markdown to ignore, give it the attribute markdown="0".
For each element that you would like Markdown to parse, give it the attribute markdown="1".
In your case, the following is a possible implementation.
...
<div markdown="0">
{% for category in site.categories %}
<li><a name="{{ category | first }}">{{ category | first }}</a>
<ul>
{% for posts in category %}
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
</div>
Is it a .md file ? If yes, try to change for an .html extension.
In markdown four space indentation is used to print code tag.

jekyll blog title to include pagination variables

I am trying to get Page 2+ of my blog to have a different title for search engines to index.
I have read several other stackoverflow answers stating that you cannot use liquid tags in the front matter yaml. One suggested to use JS to update the title, however this will not work for me as I want the search engine to index the parsed title.
I thought there may be another way. I can perhaps create a HTML page for each of my pages. I would like to do that without having to manually add each one of my posts into each of the pages (resulting in an ongoing time consuming task each time I post a new article).
I was thinking I could make one page for 1-10, another page for 11-20, etc... Something like this:
---
title: Blog Page 2
---
{% for post in paginator.posts %}
{% if post.index > 10 %}{% if post.index <= 20 %}
<div class="post-preview">
<a href="{{ post.url | prepend: site.baseurl }}">
<h2 class="post-title"> {{ post.title }}</h2>
{{ post.excerpt }}
</a>
</div>
{% endif %}{% endif %}
{% endfor %}
It seems there is no post.index variable available. Is there anything similar I can use?
Or are there any other ways to achieve "Blog Page X" in my title?
Supposing that your head tags are in your _includes/head.html file. In the title tag just add :
{% if paginator %} - page {{ paginator.page }}{% endif %}
Your title tag now looks like this :
<title>
{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
{%if paginator %} - page {{ paginator.page }}{% endif %}
</title>

Add an id attribute to the highlight tag in Jekyll

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>

Jekyll break for loop [duplicate]

This question already has an answer here:
Is there a "break" tag to escape a loop in Liquid?
(1 answer)
Closed 9 years ago.
I'm processing site.posts to compare post.categories against page.categories to create a related posts sidebar but if there are multiple common categories I get multiple links.
I want to break the inner loop but can't find anything to suggest this is possible.
Roughly (because on train and phone) the code I have is
{% for post in site.posts %}
{% for postcat in post.categories %}
{% for cat in page.categories %}
{% if cat == postcat %}
<p> {{ post.title }} </p>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
Not sure this is even doable
This is more of a Liquid Templating engine question, than a Jekyll one. It appears that Liquid has support for a {% break %} tag which is what you are looking for.
I would suggest making sure your Liquid gem is updated and then try using {% break %} in your code as suggested here.
Possible Duplicate