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.
Related
I'd like to create something like a shortcode for a blockquote in Jekyll. It should include the quote source in a nicely formatted way.
The shortcode could look like this:
{% quote author="My Author" %}
This is the quoted content
spanning multiple lines
And paragraphs
{% endquote %}
What's the best way to achieve this in Jekyll? Can it be that there is no way to provide multiple arguments to a Jekyll tag plugin?
I have found a blog post that provides multiple attributes using string concatenation or JSON.
My Research
I have found two systems in Jekyll that can be used similar to shortcodes:
HTML Includes
Custom Tags
To summarize, both methods only provide a single attribute to the Ruby code, the content. Below, you will find the limitations of both solutions.
HTML Includes limiations
https://jekyllrb.com/docs/includes/
An include in use looks like this:
{% include note.html content=download_note %}
It is possible to use content from captures for parameters, so we could create the following include file:
<blockquote>
{{ include.quote | markdownify }}
<p><em>{{ include.author }}</em></p>
</blockquote>
And use it in a blog post like this:
{% capture quote %}
This is the quote content
spanning multiple lines
And paragraphs
{% endcapture %}
{% include quote.html quote=quote author="My Author" %}
It works, but in my opinion, it's not really a nice approach to use when writing blog posts.
Custom Tags limiations
https://jekyllrb.com/docs/plugins/tags/
Sounds promising, but the documentation only shows two ways to use them:
{% render_time page rendered at: %}
and
{% render_time %}
page rendered at:
{% endrender_time %}
In my Jekyll3 blog, I use the highlight Liquid Tag to display syntax-highlighted code with fine line numbering. This is accomplished by doing:
{% highlight python linenos %}
# some code goes here
{% endhighlight %}
Now I often put several code blocks such as this in any given post. Let's suppose that the first code block has N lines, how can I have the second code block to start at line number (N+1)?
I know this can be done manually by providing the starting line value to the option startinline on the highlight tag, but I would want to accomplish this automatically.
I have a blog that is based on jekyll now.But the issue I face is that the it is very difficult for me to write code here.I have already tried using <code> and ~~~ruby etc.None of them worked.This is the site for the blog.And this is the specific one I am looking at.This specifically is the repository where the blog is hosted.
No magic in Jekyll. Just Read The F.. Documentation (RTFM). See http://jekyllrb.com/docs/templates/#code-snippet-highlighting
{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
This just works.
Edit: be sure to leave a new empty line before the opening tag
<p>He had implemented ...<p>
{% highlight ruby %}
I need to provide page content reference list (it should contain references on sections on page).
The only way which I can see is to use page.content and parse it, but I stumbled on problem with data evaluation. For example I can pull out this string from page.content: {{site.data.sdk.language}} SDK but there is no way to make jekyll process it, it outputs as is.
Also I want to make it possible to create cross-pages links (on specific section on page, but that link generated by another inclusion and doesn't persist in page.content in HTML form).
Is there any way to make it evaluate values from page.content?
P.S. I'm including piece of code which should build page content and return HTML with list (so there is no recursions).
P.P.S. I can't use submodules, because I need to run this pages on github pages.
Thanks.
Shouldn't {{ site.data.sdk.language | strip_html }} do it? I don't know, most probably I didn't understand the problem. Can you elaborate more? Maybe provide a link to a post you're referring to?
Thinking about the similar
{% assign title = site.data.sdk.language %}
which is a stock Liquid tag and does the job well, so instead of
{% section title={{site.data.sdk.language}} %}
write your code as
{% section title = site.data.sdk.language %}
The key here is that once you enter {%, you're in Liquid. Don't expect Liquid to go "Inception" all over itself. {{ is just a shorthand for "print this to output", but an parameter passing is not output, it's just reading a variable.
You should be able to also go wild and do:
{% section title = site.data.sdk.language | capitalize %}
For more re-read the docs: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
Blank lines within and especially at the top of an HTML source file look untidy to me.
A common template code (in this case, Jinja2) may look like this:
{% block header %}
{% include "templates/partials/something_header.html" %}
{% endblock header %}
{% block body %}
{% include "templates/partials/something_body.html" %}
{% endblock body %}
{% block footer %}
{% include "templates/partials/something_footer.html" %}
{% endblock footer %}
Now, without even adding indentation issues to make the above more presentable, it already has the adverse effect of generating 2 empty lines due to the 2 carriage returns within the templating code:
.
.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=....
Whilst I can utilize a minifier/post-processor in this particular case, I'm wondering what others do to keep their template code easy on the eyes whilst preventing unnecessary blank lines?
EDIT: To eliminate the blank lines at the head of the generated source code, the above example of template code would appear as below (much less readable):
{% block header %}{% include "templates/partials/grid_header.html" %}{% endblock header %}
{% block body %}
...
My original question was a bit of an "I know this can be done, but is there another way?".
Thanks to the feedback from David and Lajos, confirming that post-processing of the generated HTML from the template engine is the most common way to alleviate unwanted blank lines and spacing.
Lajos also suggested a concept of maintaining both a "clean" and "correct" version of each template itself, whereby the developer may work unperturbed with clean template code and upon any modification, another version of the file will be ghost-written, but reformatted so that generating HTML from it would in fact produce clean HTML without any unwanted artifacts due to templating.
Whilst I tend towards the common post-processing method and chain any such cleaning up of HTML along with combining and minifying CSS/JS, etc, there would be scenarios that Lajos's implementation definitely would be beneficial (ie, if you don't/should't have control outside of the templating stage).