What You Will Learn In This Post

In the post Syntax Highlighting for Jekyll, I introduced how to enabld syntax highlighting feature with Jekyll Websited hosted on GitHub. In this post, I’m going to talk more about how to display the language in which the code is highlighted.

You should first follow the steps in Syntax Highlighting for Jekyll to setup the basic feature.

What do we want?

When we have a block area of highlighted code in our blogs, the readers may possibly get confused about what language it is in. It would be much convenient if it has a title showing the language as in the following example.

return "Hello!";

As explained in my former post, when we want to include some code in our blog, we may probably write something like:

{% highlight java %}
return "Hello!";
{% endhighlight %}

We don’t want to write something like the following example since Jekyll is designed for us to concentrate on the content itself when writing blogs, while writing extra HTML in mardown is something we should avoid whenever possible.

<div class="highlight-title">java</div>
{% highlight java %}
return "Hello!";
{% endhighlight %}

How to make it?

Observe first!

If we have a look at the generated code by Jekyll in rdiscount markdown, we should find some pattern that we can take advantage of. Jekyll build results differ slightly on my local computer and on GitHub.

Locally built:

<div class="highlight">
    <pre>
        <code class="java">
            <span class="k">return</span> <span class="s">"Hello!"</span><span class="o">;</span>
        </code>
    </pre>
</div>

Built on GitHub:

<div class="highlight">
    <pre>
        <code class="language-java" data-lang="java">
            <span class="k">return</span> <span class="s">"Hello!"</span><span class="o">;</span>
        </code>
    </pre>
</div>

In both cases, we can take advantage of the value of class attribute and create a title like code in java or just language-java if you want.

CSS3 :before and :after

With CSS3 :before or :after selector, we can pre-append or append some content in CSS!

For example, if you want to place your email address in your blog without being distinguished by crawlers, here’s what you can do.

<span class="my-email">me</span>
.my-email:after {
    content: "@zhangwenli.com";
}

Then, in the browser, your visitors will see me@zhangwenli.com!

You can also change the style of :before and :after like color, padding and etc. But since this post focuses on displaying the highlighted language, I’m not going to talk too much about :before and :after. You should try them out by yourselves. That can be interesting. :smirk:

Besides content: "@zhangwenli.com", we can also use attributes in content. For instance, content: attr(class) equals to content: "my-email" in the last example. And you can also use customerized attributes like:

<span class="my-email" domain="zhangwenli.com">me</span>
.my-email:after {
    content: "@" attr(domain);
}

Now, let’s get down to the real job…

We can use the following code to generate a title like language-java on GitHub.

pre > code:before {
    content: attr(class);
    display: block;
}

But if you’d prefer something like code in java, you can make use data-lang attribute generated by Jekyll on GitHub. Just be clear about your generated HTML code before you use it.

pre > code:before {
    content: "code in " attr(data-lang);
    display: block;
}

You may need to change some CSS style to make it looks prettier, but hopefully, that shouldn’t be too difficult for you. :yum:

Check my related commit on GitHub to see the style changes.