New Bookstore! Save 20% on books with discount code: LAUNCH
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 = Web Developer. Book Author. Secretly Important.
.htaccess made easy: Improve site performance and security.

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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
LOL @ “weekly” support: “Your request has been received and will be reviewed soon. Neil (your support guy) checks support requests weekly. Rest assured we’ll get to it!” — Gotta be kidding with this.
After several days of work, finally taking a break. If anyone needs me, I'll be in Zora’s Domain, working thru Mah Eliya shrine.
Never ever call the client a useless idiot. Even if it’s true.
Inevitable that Google shuts down Feedburner. Maybe this year? Who knows. Here is a nice summary plus alternatives.
There is no way that Marvel can serve up anything better than what they've already done with Infinity saga/Endgame. Knowhere to go but down, sadly.
I built a new search launchpad to make my life easier. So I can search multiple engines quickly and easily.
Updating all muh plugins for WP 5.5 imminent release! Wut August :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.