Book Sale! Save 20% on WordPress books with discount code: SAVE20
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.
WP Themes In Depth: Deep dive into WP theme development.

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 »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
On macOS when an app won’t hide, you can force it by holding the ⌥ (option) key and clicking anywhere on the desktop.
Currently having a blast redesigning Plugin Planet, so much work so little time.
Thanks to David McCan over at WebTNG for the awesome BBQ Pro review.
Enjoyed a nice mini-vacation with my fam. Great way to recharge and regroup.
Nice little interview with yours truly over at ThemeIsle. WordPress, web dev & more!
Perishable Press celebrating 16 years online! An incredible, rewarding journey.
Thanks to Nicholas Ferrell for his excellent and thorough review of Wutsearch search-engine launchpad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.