Make Prism.js show line numbers by default (without CSS classes)

• September 16, 2017
• How-To

• Comment
• Facebook
• Google+
• Twitter
• Reddit
• LinkedIn

For client-side syntax highlighting with Hugo, I think Prism.js is the best of the many options available to web developers. It’s highly configurable, supports plenty of languages, and produces a very attractive-looking end product.

There was one bugaboo bothering me, though. One of the Prism features that really impressed me was its ability to put in line numbers in code blocks. This looks good and makes it easier to reference small pieces of code when writing and commenting on it.

Unfortunately, the default behavior for Prism is to only add the line numbers if the <pre> tag surrounding the code has class = "line-numbers" (see this Github issue for a person complaining about this behavior from over a year ago). That is, it does not number a code block unless it begins with <pre class = "line-numbers"> even though it will apply its highlighting and the features of other plugins, like the toolbar plugin.

For me, if I’m going to choose to download Prism with the line numbers plugin, it’s because I want line numbers basically all the time. Here’s an example block of Prism-formatted CSS without line numbers:

@font-face {
  font-family: ‘icomoon’;
  src:  url(‘/fonts/icomoon.eot?yrp2ki’);
  src:  url(‘/fonts/icomoon.eot?yrp2ki#iefix’) format(‘embedded-opentype’),
    url(‘/fonts/icomoon.ttf?yrp2ki’) format(‘truetype’),
    url(‘/fonts/icomoon.woff?yrp2ki’) format(‘woff’),
    url(‘/fonts/icomoon.svg?yrp2ki#icomoon’) format(‘svg’);
  font-weight: normal;
  font-style: normal;
}


[class^=“icon-”], [class*=” icon-“] {
  font-family: ‘icomoon’ !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-touch_app:before {
  content: “\e913”;
}
.icon-device-desktop:before {
  content: “\f27c”;
}

Okay, nothing wrong with that, but I just think it could look better.

Now we wrap it in <pre class = "line-numbers">:

@font-face {
  font-family: ‘icomoon’;
  src:  url(‘/fonts/icomoon.eot?yrp2ki’);
  src:  url(‘/fonts/icomoon.eot?yrp2ki#iefix’) format(‘embedded-opentype’),
    url(‘/fonts/icomoon.ttf?yrp2ki’) format(‘truetype’),
    url(‘/fonts/icomoon.woff?yrp2ki’) format(‘woff’),
    url(‘/fonts/icomoon.svg?yrp2ki#icomoon’) format(‘svg’);
  font-weight: normal;
  font-style: normal;
}


[class^=“icon-”], [class*=” icon-“] {
  font-family: ‘icomoon’ !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-touch_app:before {
  content: “\e913”;
}
.icon-device-desktop:before {
  content: “\f27c”;
}

So what’s the problem? Well the whole point of Hugo—okay, maybe not the whole point—is to not have to hard-code all the HTML and CSS to get your posts looking the way you want to. It’s much more convenient to use code fences (these guys: ```) than to manually format everything in <pre><code> HTML tags and then have to add classes on top of that.

Because the Prism developers didn’t seem too stressed out by this problem, I’ve just modified the plugin’s code to add the line numbers no matter what. Instead of downloading it from Prism, use the code/file in the gist below (click here if it’s not rendering properly). Make sure to load this file after your main Prism.js file and do not include the official line numbers plugin in your Prism installation. You will also need the line numbers CSS file, which you can find at the gist’s page as well.

• Hugo
• Code
• plugins
• javascript
• webmaster
• web development

COMMENTS