Plugin Sale! Save 15% on pro plugins with discount code: NEWYEAR2021
Web Dev + WordPress + Security

Weird Bug with Highlight.js

Working on adding syntax highlighting to my code snippets here at Perishable Press. To do it, I use my free WordPress plugin Prismatic. Basically all the plugin does is load up either the Highlight.js scripts and styles, or it loads up the Prism.js scripts and styles. So I can rule out the plugin itself for this “weird” little bug. The issue is with Highlight.js specifically.

What happens

I have this post here, for example. The post contains several pre/code elements displaying code, log entries, and so forth. In one of those elements, I had the following line:

https://example.com/automatic-language-translation-methods/

The presence of that line inside of the pre tag causes Highlight.js to apply syntax highlighting to the element, even though it should not.

Why? Notice the language- part in the URL.. that is what is causing the bug.

The bug

The bug is that Highlight.js is applying syntax highlighting, even when the element does not include the required language- class. So a code block that should not be syntax-highlighted is highlighted anyway. Because the highlight script is matching the language- text inside of the <pre> tag.

Normally, Highlight.js only works on pre/code elements that include a class beginning with language-. Like <pre class="language-perl"> or whatever. The highlight script doesn’t try to “guess” the language; a proper language class must be present on the pre tag or no syntax highlight is applied.

BUT for some reason Highlight.js is checking the content of <pre> elements, looking for anything that matches language-. So there are false positives for any code that includes the string language- anywhere inside of the pre tag. Like the URL example provided above.

That means you get blocks of code and content that are highlighted when they should not be highlighted.

Demo

Here is a demo of the bug:

Some preformatted content blah blah blah..

https://example.com/automatic-language-translation-methods/

..some more code and stuff etc.

There is no language- class on this element. It should not be syntax-highlighted. But Highlight.js thinks that it should be highlighted because it finds language- inside the tag content. Inspect the source for more details.

Here is what the preformatted content should look like:

Some preformatted content blah blah blah..

https://example.com/automatic-language-translation-methods/

..some more code and stuff etc.

Note: if the preformatted content in the first example is not syntax-highlighted, it means that either 1) the bug has been fixed, or 2) I removed/replaced the Prismatic plugin with some alternative.

Solution

The solution is to fix Highlight.js so that it looks for matching class names only on the <pre> tag itself; it should not be checking the pre tag content. This fix would eliminate false positives and boost performance, as checking unknown amounts of code and other preformatted content probably requires a bit of work.

Workaround

As a workaround, I simply removed the language- line from the preformatted code block. Alternately, I could have modified it somehow so it isn’t matched as language- by Highlight.js. Of course, this isn’t a feasible solution for sites with lots of preformatted content — you would need to check all of them and tweak each one individually. But it works.

Update: Easier workaround

You can simply add a class of nohighlight to any pre/code elements that should not be syntax highlighted. I.e., to disable Highlight.js on any problematic code blocks.

Moving on

Fortunately this probably is a rare case; not many people are going to have this issue, but there may be another, so am posting here to share the information.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Digging Into WordPress: Take your WordPress skills to the next level.

One response to “Weird Bug with Highlight.js”

  1. Nice find. It is a rare case as you said. But it is unncessary to look for language- inside content rather than the tag alone. It is worth a fix as it might save a lot of computing.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
Simply Static is my go-to plugin for generating static HTML versions of WordPress sites. Works flawlessly.
Note to self: never, ever, ever buy any CD or DVD from eBay. Every single time the discs are scratched, damaged, missing, fake, or worse. Never again you clowns.
Find out if a plugin works with the latest version of WordPress @ plugintests.com
Going through all of my data, deleting all the chaff. Going for less than 500 GB total data storage.
Finally deleted all the cool unused placeholder Twitter accounts that I signed up for years ago. I will never use them.
After several years with Dashlane, I've moved on to a simpler, better solution.
After 10+ years, finally moved the last of my sites away from Media Temple.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.