I am using pygments for syntax highlighting and want to highlight some lines in the code. This works fine for highlighting one line but how would I highlight multiple lines?
I have tried comma and space seperated lists to no avail.
{% highlight python hl_lines=7 %} # works
{% highlight python hl_lines=7,8 %} # does not work
{% highlight python hl_lines=7 8 %} # does not work
{% highlight python hl_lines=7-8 %} # does not work
Use a string and separate the line numbers by a space.
{% highlight python linenos hl_lines="1 3 4" %}
def say_hi(to_who):
print "Hello,", to_who
say_hi("World")
{% endhighlight %}
I'm not familiar with using just a {% highlight %} tag by itself. I always use it in combination with {% endhighlight %} to identify code blocks. This works as expected on my Jekyll 0.12.1 install.
{% highlight python %}
def say_hi(to_who):
print "Hello,", to_who
say_hi("World")
{% endhighlight %}
With the default CSS in place (and tweaked a little for the background color), the above produces this:
Related
I have the following import on a jinja template that is rendered by ansible:
labels:
{% set name = 'jellyfin' %}
{% set port = '8096' %}
{% filter indent(width=8, first=True) %}
{% include './labels.yml.jinja' %}
{% endfilter %}
As you can see, there are some non rendering blocks to set some local variables and stuff. When the template is rendered by ansible, the first row of the template is shifted by the same amount of spaces that the non rendering blocks sum + 2 (32 in this case = 5 blocks with 6 spaces + 2).
For example:
labels:
# this are the labels, fools
- "traefik.enable=true"
- "traefik.backend=jellyfin"
I can remove the indentation of ALL the {% %} blocks, and then it will work properly, but looks ugly and off place.
Even if I add a minus sign to remove whitespaces to the non rendering blocks like this:
{% set name = 'jellyfin' -%}
{% set port = '8096' -%}
{% filter indent(width=8, first=True) -%}
{% include './labels.yml.jinja' -%}
{% endfilter -%}
The first line is still shifted (albeit much less)
How can I fix this?
I just had to add #jinja2: lstrip_blocks: "True" to the very top of the importing template, and that did the trick.
I gathered that information from this article, explaining my exact problem and showing a solution: https://radeksprta.eu/posts/control-whitespace-in-ansible-templates/
But I have to say that the default behaviour is very confusing.
Is there something like multiple language highlight syntax in Sublime Text? For example my code might look like this:
{% extends "template.html" %}
{% block content %}
{% if task == 'archimed_spiral' %}
<p>
$\frac{2}{3}$
</p>
{% elif task == 'gcd' %}
{% endif %}
{% endblock %}
Which is LaTeX inside html inside Jinja2. It gets pretty hard to read it properly.
Note
I know about Jinja2 package for Sublime, so it does highlight Jinja2 + html. Maybe I am just asking for too much..
Yes you can embed syntax highlighting. You basically define a start and end pattern, then include an existing scope. See Sublime Text 2: Different language highlighting based on context? (a la Webstorm).
I try to render something like this:
{% highlight ruby %}
{{ page.url }}
{% endhighlight %}
The Raw tag doesn't have an effect:
{% highlight ruby %}
{% raw %}
{{ page.url }}
{% endraw %}
{% endhighlight %}
Even not when I put this in my plugins folder: https://gist.github.com/phaer/1020852
I have tried this also:
<pre>
{% raw %}
{{page.url}}
{% endraw %}
</pre>
But in all cases the page.url does show up.
I also tried tipp #1 here:
http://truongtx.me/2013/01/09/display-liquid-code-in-jekyll/
To be clear i want to see the literal here.
In fact the real use case is to show some javascript like this:
var disqus_identifier = '{{page.dsq-id}}';
When I use the { entities they are shown as entites and not as brackets.
Only this works, but then my code highlighting is gone:
<pre>
var disqus_identifier = '{{page.dsq-id}}';
</pre>
I use jekyll 1.4.2.
Any ideas how i can solve this?
I tried your code in Jekyll 1.2.1 and it works as you've expected it to work.
To uninstall Jekyll 1.4.2 and reinstall Jekyll 1.2.1 run these commands,
gem uninstall jekyll
y
gem install jekyll -v 1.2.1
I use GitHub Pages for my blog, and am running into a problem with Jekyll. My post.html has a block like this:
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
The part in the middle doesn't matter. The important part is the end of the line which is outside of the {% %} markup, and is therefore rendered into the html. Since this is in a loop, it's putting about 1000 blank lines into the middle of by HTML page. It doesn't affect the display, but it make a View/Source troublesome.
Any ideas on how to avoid those extra blank lines?
Since Liquid v4 (included in Jekyll from v3.5) there is a Whitespace control, which finally resolved case with blank line, white space, etc.
Link to documentation: https://shopify.github.io/liquid/basics/whitespace/
There's a nice workaround, that I found out in https://github.com/plusjade/jekyll-bootstrap/blob/master/_includes/JB/setup, and which is compatible with github pages.
Just enclose your loop in a capture statement, and assign nil to the resulting var.
{% capture cache %}
{% for p in site.posts %}
do stuff here
{% endfor %}
{% endcapture %}{% assign cache = nil %}
How about
{{ page.content | escape | strip_newlines }}
There is Jekyll plugin that strips the whitespace.
Jekyll plugins by Aucor: Plugins for eg. trimming unwanted
newlines/whitespace and sorting pages by weight attribute.
You can get it directly from its Github repository. So basically you wrap your code with {% strip %}{% endstrip %}. Even if this doesn't suit you needs, you can easily change the ruby script.
For example:
{% strip %}
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
{% endstrip %}
However, please remember the nature of Jekyll plugins, you can't run them on the Github Pages server.
Quote from Jekyll Doccumentation:
GitHub Pages is powered by Jekyll, however all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
You can still use GitHub Pages to publish your site, but you'll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.
Actually there is a new solution for this problem which works without any plugin.
A Jekyll layout that compresses HTML. At a glance:
removes unnecessary whitespace;
removes optional end tags;
removes optional start tags;
removes comments;
preserves whitespace within <pre>;
GitHub Pages compatible;
ignores development environments;
configurable affected elements;
profile mode;
automatically tested.
http://jch.penibelst.de/
If you - for some reason - do not want to use this here is a nice article, which describes some workarounds:
Compressing Liquid generated code - sylvain durand
I am building a Jekyll blog, and I have come across an issue with permalinks.
My permalinks to blog posts are set like this in
_config.yml:
permalink: /:page/:categories/:title
It outputs like this when navigating to a blog post:
http://localhost:4000/blog/travel/netherlands-trip-prequesites/
I have some static pages in the site: Blog, Travel
The variable page.url outputs this url: /blog/travel/netherlands-trip-prequesites
The code my navigation bar uses to highlight the current page (giving it an "active" class):
{% assign url = page.url|remove:'index.html' %}
{% for nav in site.navigation %}
{% if nav.href == url %}
<li class="active">{{nav.name}}</li>
{% else %}
<li>{{nav.name}}</li>
{% endif %}
{%endfor%}
It works great when navigating to static pages, however when I click a blog post it doesn't highlight the correct static page. (ex.: If i navigate to a blog post with the url /blog/smth/title it should automatically highlight "Blog" in my navigation. When I navigate to /travel/smth/title it should highlight "Travel")
What I'd like to do is to strip down the output of page.url to its first part. For example I'd like to stip the following output
/blog/travel/netherlands-trip-prequesites
down to
/blog/
Why? So I can use it to check which static page it belongs to and highlight it accordigly.
The easiest way is to use split:
{{ page.url | split:'/' | first }}
That will give you the URL content up to the first / character.
I managed to solve it with three filters:
{{ page.url | replace:'/',' ' | truncatewords: 1 | remove:'...' }}
page.url outputs: /page/cat/title, then replace removes the forward slashes producing: page cat title. truncatewords truncates the string down to one word, producing: page... (for some reason three dots gets inserted after the remaining word). After all this I only needed to remove those dots with remove and voilá, my final string: page.
Hope this helps someone.
The answer provided by PeterInvincible was almost perfect, however, there's no need to get piping to remove involved...
The following also will produce desired output
{{ page.url | replace:'/',' ' | truncatewords: 1,"" }}
And to save it to a variable use capture redirection
{{ capture url_base }}{{ page.url | replace:'/',' ' | truncatewords: 1,"" }}{{ endcapture }}
Which can be called via {{url_base}} or mixed with other processing calls.
Also for file paths instead of URLs page.dir works well if you're not using permalink settings for layout, check the gh-pages branch (specifically _includes/nav_gen.html for functional, though rough'round the edges, example) for hosted examples of similar code examples related to liquid syntax and other magic.
Edits & Updates
The above linked script is now live/mostly-working/modular and auto-serving parsed sub-directories viewed currently at the related https://s0ands0.github.io/Perinoid_Pipes/ project site providing examples of recursive parsing of directories. Including and modding for nearly any theme should be possible just check the commented section at the top for currently recognized commands that maybe passed at inclusion call... on that note of inclusion and modularization here's how to turn the above example code for directory parsing into a function
{% comment %}
# Save this to _include/dir_path_by_numbers.html
# import with the following assigning arguments if needed
# {% include dir_path_by_numbers.html directory_argument_path="blog" directory_argument_depth=1 %}
{% endcomment %}
{% assign default_arg_directory_path = page.url %}
{% assign default_arg_directory_depth = 1 %}
{% if directory_argument_path %}
{% assign directory_to_inspect = directory_argument_path %}
{% else %}
{% assign directory_to_inspect = default_arg_directory_path %}
{% endif %}
{% if directory_argument_depth %}
{% assign directory_to_inspect_depth = directory_argument_path %}
{% else %}
{% assign directory_to_inspect_depth = default_arg_directory_depth %}
{% endif %}
{% comment %}
# Defaults read and assigned now to output results
{% endcomment %}
{{ directory_to_inspect_depth | replace:'/',' ' | truncatewords: directory_to_inspect_depth,"" | remove_first: '/' | replace:' ','/' }}
The above should output directory path lengths of whatever size desired and maybe included as shown previously or if feeling adventurous try what's shown below; though for looping and recursive features look to the linked script for how I've worked around stack size restrictions.
{% capture dir_sub_path %}{{include dir_path_by_numbers.html directory_argument_path="blog" directory_argument_depth=1}}{% endcapture %}
Note above is just speculation, untested, and maybe more buggy than scripts tested and hosted publicly... in other words inspiration.
Simplest way would be using
if page.url contains
example:
<li class="{% if page.url contains '/docs/' %}current{% endif %}">
Docs