A brown tree trunk marked with three thick color powdered-lines on it
Photo by Simon Matzinger from Pexels

Caution!

This is an old post. Information here may be out-dated, or the post may re­flect opin­ions or be­liefs I no longer share.

You know those cute, lit­tle line high­lights in code blocks that in­di­cate which lines were re­moved and which added? I’m glad to say I’m fi­nally tick­ing it off my to-do list. They’re great for tu­to­ri­als! 🙂

I’ll take you through my ad­ven­ture set­ting it up, in this blog post, some new se­man­tic HTML5 tag I dis­cov­ered, and to­wards the tail end, I’ll tell you how many new tags were added in HTML5 in all!

Setting up line high­light­ing

I use a sta­tic site gen­er­a­tor called @11ty/eleventy. It has an of­fi­cial syn­tax high­light­ing plu­gin which in turn makes use of the very pop­u­lar prism.js li­brary.

I fol­lowed the doc­u­men­ta­tion and it was pretty straight­for­ward to im­ple­ment. Line high­light­ing comes bun­dled out of the box. Picked up a theme for prism.js and we were up and run­ning. Noice!

…but wait! Something seems amiss while try­ing to high­light lines.

Thanks to git, I man­aged to check­out an old ver­sion of the site and get a pre­view for you:

A screenshot of a code block showing a bright, yellow color marked on a line of code, with extremely poor text contrast. Additionally, shows how the colon operator is excluded from the line highting.

See? The color con­trast is aw­ful, and the colon op­er­a­tor is ex­cluded from the high­light.

Naturally, I looked at the source code of the page and the ac­com­pa­ny­ing CSS.

The background-color value was miss­ing al­to­gether for the .highlight-line-active class. The sharp yel­low turned out to be browser style for the mark tag, in­stead - and was very likely in­tended for a dark text color.

Since my code blocks are a dark theme and sport lighter text col­ors in both the light and dark color schemes of my site, I wanted to go with some­thing much more sub­tle. With a lit­tle tin­ker­ing with the .highlight-line-active, .highlight-line-add, and .highlight-line-remove classes, I was able to get the de­sired re­sult.

Let me show you how I did it.

First, I added some ba­sic styles for the -active vari­ant:

.highlight-line-active {
background-color: #3d2d13;
box-shadow: inset 5px 0 0 #b67600;
padding-left: 10px;
}

You can re­peat this for the other two vari­ants (-add and -remove), set­ting an ap­pro­pri­ate color value for the back­ground and the in­set box shadow in each one.

Next, I saw that the colon op­er­a­tor had its own back­ground spec­i­fied, as fol­lows, in the theme stylesheet I had down­loaded:

.token.operator {
background: #1e1e1e;
}

Okay, so we need to up­date the back­ground color, only in in­stances where we high­light a line, so we can­not just go in and change this back­ground prop­erty value here.

Let’s fix this now.

Currently, the high­lighted style de­f­i­n­i­tion above has a CSS speci­ficity of 0020 - it tar­gets two classes.

The .highlight-line-active class has a speci­ficity of 0010 (for one class) by it­self. That means, even though the span tag would usu­ally in­herit the background-color from its par­ent, it would­n’t do so here.

I looked at the HTML source and found that all the to­kens in the markup are marked up by a span tag. Since many of them also seem to have a background value spec­i­fied in my syn­tax the­me’s stylesheet, I wanted to take care of all of them at once.

We do this by writ­ing a style with a higher speci­ficity, as fol­lows:

.highlight-line-active {
background-color: #3d2d13;
box-shadow: inset 5px 0 0 #b67600;
padding-left: 10px;

& span.token {
background-color: inherit;
}
}

This now has a speci­ficity of 0021, be­cause it tar­gets two classes and one el­e­ment.

0021 be­ing higher than 0020, it will now take prece­dence, and we get to see some nice line high­light­ing. You’re al­ready see­ing it on this page! 🎉

If those num­bers con­fuse you, you can learn more about speci­ficity and prece­dence in CSS on Vanseo Design’s blog post and on CSS-Tricks.

With my setup sorted, I wanted to add my dis­cov­er­ies to the eleventy docs. This turned out to be rather em­bar­rass­ing. I found a sec­tion ex­plain­ing the classes one needs to tar­get al­ready pub­lished for ref­er­ence.

I can con­firm it does not feel great to be on the end of an RTFM moment. 😕

I dis­cov­ered some new se­man­tic HTML5 tags!

Okay, I dis­cov­ered a few cool, se­man­tic tags while pok­ing around in the gen­er­ated source of my code blocks, thanks to prims.js.

Say hello to mark, ins, and del tags. 🙂

  • mark is used to sim­ply high­light in­for­ma­tion,
  • ins to trans­par­ently add new in­for­ma­tion, and
  • del to ex­plic­itly mark dated in­for­ma­tion as re­moved.

The lat­ter two also op­tion­ally take a datetime as well as a cite at­tribute.

For the datetime at­tribute, an ISO8601-compatible date-time string, much like the time tag it­self, must be used:

<del datetime="2020-05-13 18:00:00">₹999</del>
<ins datetime="2020-05-13 18:00:00">₹499</ins>

The cite at­tribute can be used to link to the source of the quo­ta­tion or more in­for­ma­tion about the edit.


Using a sta­tic site gen­er­a­tor may not have the laid-back setup & main­te­nance that a ma­ture CMS can of­fer, but the trial is worth the learn­ing ex­pe­ri­ence for me.

For ex­am­ple, while I was aware of speci­ficity in CSS al­ready, it feels great to get a re­fresher on it. And I picked up those new HTML5 tags! 🙂

Oh, that re­minds me…

Just how many new tags did HTML5 in­tro­duce?

I promised I would tell you how many new tags were added. I found this list on Tutorial Republic and ran a small JavaScript snip­pet in the con­sole:

document.querySelectorAll(".order-by-category a + span[class*=html5]").length;

It sim­ply se­lects all those a tags which have a sib­ling span tag marked with a class name that starts with html5, and then re­turns the length of all such DOM el­e­ments.

Turns out, we have 28 of them. 🤯

Some cool trivia you can carry to the next wa­ter­cooler con­ver­sa­tion, yes? 😉