HomeBlog
Display Language Title of Syntax Highlighting - 羡辙杂俎
2014.08.31 17:36:00
Display Language Title of Syntax Highlighting

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.

博文对你有帮助吗?如果有的话,要不要送我一本书呢?:heart_eyes:

微信公众号“羡辙部落格”(xianzheblog)提供本站优质非技术类博文推送。

Creative Commons License
Every blog post in this site by Wenli Zhang is licensed under a CC 3.0 License, based on a work at Github. You can see the source code of this blog site at github.com/Ovilia/blog.

Comments

comments powered by Disqus