Adventures of syntax highlighting in Eleventy; and just how many new tags did HTML5 introduce?!

You know those cute, little line highlights in code blocks that indicate which lines were removed and which added? I’m glad to say I’m finally ticking it off my to-do list. They’re great for tutorials! 🙂

I’ll take you through my adventure setting it up, in this blog post, some new semantic HTML5 tag I discovered, and towards the tail end, I’ll tell you how many new tags were added in HTML5 in all!

Setting up line highlighting

I use a static site generator called @11ty/eleventy. It has an official syntax highlighting plugin which in turn makes use of the very popular prism.js library.

I followed the documentation and it was pretty straightforward to implement. Line highlighting comes bundled out of the box. Picked up a theme for prism.js and we were up and running. Noice!

…but wait! Something seems amiss while trying to highlight lines.

Thanks to git, I managed to checkout an old version of the site and get a preview for you:

See? The color contrast is awful, and the colon operator is excluded from the highlight.

Naturally, I looked at the source code of the page and the accompanying CSS.

The background-color value was missing altogether for the .highlight-line-active class. The sharp yellow turned out to be browser style for the mark tag, instead – and was very likely intended for a dark text color.

Since my code blocks are a dark theme and sport lighter text colors in both the light and dark color schemes of my site, I wanted to go with something much more subtle. With a little tinkering with the .highlight-line-active, .highlight-line-add, and .highlight-line-remove classes, I was able to get the desired result.

Let me show you how I did it.

First, I added some basic styles for the -active variant:

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

You can repeat this for the other two variants (-add and -remove), setting an appropriate color value for the background and the inset box shadow in each one.

Next, I saw that the colon operator had its own background specified, as follows, in the theme stylesheet I had downloaded:

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

Okay, so we need to update the background color, only in instances where we highlight a line, so we cannot just go in and change this background property value here.

Let’s fix this now.

Currently, the highlighted style definition above has a CSS specificity of 0020 – it targets two classes.

The .highlight-line-active class has a specificity of 0010 (for one class) by itself. That means, even though the span tag would usually inherit the background-color from its parent, it wouldn’t do so here.

I looked at the HTML source and found that all the tokens in the markup are marked up by a span tag. Since many of them also seem to have a background value specified in my syntax theme’s stylesheet, I wanted to take care of all of them at once.

We do this by writing a style with a higher specificity, as follows:

.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 specificity of 0021, because it targets two classes and one element.

0021 being higher than 0020, it will now take precedence, and we get to see some nice line highlighting. You’re already seeing it on this page! 🎉

If those numbers confuse you, you can learn more about specificity and precedence in CSS on Vanseo Design’s blog post and on CSS-Tricks.

With my setup sorted, I wanted to add my discoveries to the Eleventy docs. This turned out to be rather embarrassing. I found a section explaining the classes one needs to target already published for reference.

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

I discovered some new semantic HTML5 tags!

Okay, I discovered a few cool, semantic tags while poking around in the generated source of my code blocks, thanks to prims.js.

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

• mark is used to simply highlight information,
• ins to transparently add new information, and
• del to explicitly mark dated information as removed.

The latter two also optionally take a datetime as well as a cite attribute.

For the datetime attribute, an ISO8601-compatible date-time string, much like the time tag itself, 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 attribute can be used to link to the source of the quotation or more information about the edit.

---

Using a static site generator may not have the laid-back setup & maintenance that a mature CMS can offer, but the trial is worth the learning experience for me.

For example, while I was aware of specificity in CSS already, it feels great to get a refresher on it. And I picked up those new HTML5 tags! 🙂

Oh, that reminds me…

Just how many new tags did HTML5 introduce?

I promised I would tell you how many new tags were added. I found this list on Tutorial Republic and ran a small JavaScript snippet in the console:

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

It simply selects all those a tags which have a sibling span tag marked with a class name that starts with html5, and then returns the length of all such DOM elements.

Turns out, we have 28 of them. 🤯

Some cool trivia you can carry to the next water cooler conversation, yes? 😉