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.
As explained in my former post, when we want to include some code in our blog, we may probably write something like:
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.
How to make it?
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.
Built on GitHub:
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.
For example, if you want to place your email address in your blog without being distinguished by crawlers, here’s what you can do.
Then, in the browser, your visitors will see
You can also change the style of
padding and etc. But since this post focuses on displaying the highlighted language, I’m not going to talk too much about
:after. You should try them out by yourselves. That can be interesting. :smirk:
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:
Now, let’s get down to the real job…
We can use the following code to generate a title like
language-java on GitHub.
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.
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.