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

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? ūüėČ