How to remove the white space in Jekyll? - jekyll

In Jekyll templating, the Liquid tags used can generate a lot of white spaces. From Liquid's documents, use {{- -}} or {{% %}} can strip these white spaces.
But I got a Liquid syntax error when Jekyll building.
How to fix this problem or do you have any other methods to remove the white spaces?

The {{- and {%- tags exist in the latest beta version of Liquid but Jekyll uses the latest stable version, which doesn't include those tags.
When there's a stable release of Liquid 4.0, the next release of Jekyll should include that update and thus those tags will be available to use on Jekyll sites.

Not sure if this is specific to Shopify, but you could try using the strip filter.
Input: {{ " So much room for activities! " | strip }}
Output: So much room for activities!

There is more than one Gem that will remove white space post build.
https://github.com/itafroma/jekyll-newline_collapse
https://github.com/stereobooster/html_press

I have had success using the remove method and specifying a blank space:
Input
{{ "Multiple words here" | remove: " " }}
Output
Multiplewordshere

Jekyll v4 support using {{%- test_function -%}} and {{- variable -}} (details).
Otherwise the compression extension can be used.

Related

white space control in jekyll - why does {%- ... -%} a la liquid not work?

The liquid documentation states that
By including hyphens in your assign tag, you can strip the generated whitespace from the rendered template ... if you don't want any of your tags to output whitespace, as a general rule you can add hyphens to both sides of all your tags ({%- and -%}):
When I try in jekyll
{%- case key -%}
I get the error
Error: Liquid syntax error (line 139): Tag '{%- case key -%}' was not
properly terminated with regexp: /\%\}/
There are many posts about excessive whitespace in the jekyll generated html, for example Compressing Liquid generated code.
They all complain about dilute HTML output and discuss plug-ins as solution.
My simple questions are:
Why does {%- ... -%} not work in jekyll ?
Why behaves jekyll differently than the liquid documentation suggests
Jekyll < v3.5.0 use liquid v3.0.6.
White space control is only available in liquid v4 and this version will soon land in Jekyll.
As of 18 June 2017, Jekyll v3.5.0 has upgraded to Liquid v4. {%- ... -%} now works.

Postprocessing HTML in jekyll

Is it possible to add a post-processing step (in ruby) to run in Jekyll after it converts markup to HTML?
I'd like to add some html content, and can't see a way to do that in Jekyll files in general (though certain dialects of markup might support it), so I think it would have to be done by operating on the HTML after Jekyll converts it and before it writes it into _site/.
EDIT: Clarified that I'm looking to do this in Ruby and in arbitrary dialects of markup.
It looks like I may be able to do this by providing a Liquid filter that postprocess the html content, and changing {{ content }} to {{ content | my_postprocess }} in _layouts/post.html and _layouts/page.html.
Indeed, kramdown will not parse markdown in html element by default.
But, there is some configuration parameters that can be set to force kramdown to parse markdown in span or block elements.
Kramdown parameters in Jekyll documentation (look under the kramdown: key) but more interesting things in the kramdown documentation particularly here and here
In configuration
If you want to globally parse markdown in html, in _config.yml, add :
kramdown:
parse_block_html: true
parse_span_html: true
Or, in your markdown itself
{::options parse_block_html="true" /}
{::options parse_span_html="true" /}
<div>
## Some markdown here
**bold** and `code`
<cite>a **span** level element</cite>
</div>
You can also use markdown includes like this :
{% capture md %}{% include markdown_file.md %}{% endcapture %}
{{ md | markdownify }}
This will render any markdown as if it was in the original post/page.
Newer versions of Jekyll let you use hooks to do post-processing (and many other things).
For example, you could put a file like this in the _plugins/ directory, and it will modify the contents of posts after they've been converted to HTML but before they've been embedded in a layout file or written to disk:
Jekyll::Hooks.register :posts, :post_convert do |post|
post.content = post.content.gsub('old', 'new')
end

Jekyll - Using relative URLs for post.url

I've recently upgraded to jekyll 1.0 and as a result post links now have a leading '/'.
Setting relative permalinks to true or false doesn't seem to change the generation of {{post.url}} at all, they always seem to come out with a leading slash.
I understand that I could use base_url, but I pass on the completed project to an organisation that ends up hosting it wherever (I don't know the URLs).
My config file that used to work was simply:
permalink: articles/:title
Any help would be great!
I'm seeing the same thing in Jekyll 1.0.3 install. Seems like a bug. Either way, a work around is to use a Liquid Filter to remove the first slash.
{{ post.url | remove_first:'/'}}
With the following pagination layout:
{% for post in paginator.posts %}
<div class="postWrapper">
<h2>{{ post.title }}</h2>
<div class="postDate">{{ post.date | date:"%B %d, %Y" }}</div>
<div class="postContent">{{ post.content }}</div>
</div>
{% endfor %}
And your same _config.yml setting:
permalink: article/:title
Links are generated without the leading slash (e.g. The Title).
Just be aware that if it is a bug and it gets fixed, you'll have to adjust your code to drop the 'remove_first' filter. Otherwise, it'll strip the slash in the middle of your link and break it that way.
We noticed the same thing, and I tracked it down to the addition of baseUrl being exposed to liquid templates. In 0.12.1 baseUrl was not configurable in _config.yml and was defaulted to ''.
In 1.0.0 you could set it in the config and it defaults to '/' which is why you're seeing this. I don't believe it is a bug as it is still present in current (1.4.3) versions.

How to support line number when using pygments with Jekyll

How can I number the code lines which are highlighted using pygments in Jekyll?
According to the Liquid Extensions wiki page of the Jekyll documentation, the highlight Liquid tag has an optional second parameter, which may have the value linenos to turn on line numbering:
{% highlight language linenos %}
your code here
{% endhighlight %}
Use it with caution. With linenos the line numbers are actually inserted in the code's text, so will be impossible to copy the code block without them. (This could be solved by letting the visitor to $('.lineno').toggle() the line numbers' visibility. Works in Firefox, not sure if is portable.)
Update: Better use linenos=table:
{% highlight language linenos=table %}
your code here
{% endhighlight %}
That will place the code in a table with two cells: first td all the line numbers, second td the code itself. This makes possible to select only the code, without the line numbers.

Use Coderay with Liquid include?

I have a Jekyll blog, I am trying to switch from this
{:lang='bash'}
#!/bin/sh
echo 'Hello World!'
To this
{:lang='bash'}
{% include program-w32-build-100.sh %}
The include inserts the text from the file, and the lang='bash' is supposed to highlight it. Since the text in the file is not tabbed, it does not get highlighted. Is there a way to make this happen?
jason.the-graham.com/2010/11/21/kramdown_support_for_jekyll
Lucky me!
You can do this
{:lang='bash'}
~~~
{% include rtmpdump-w32-build-100.sh %}
~~~
ยง Fenced Code Blocks