Welcome to the new design! Please report any bugs or issues, thanks :)
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: Build and sell awesome WordPress themes.

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 »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
Playing the long game.
They have weaponized the idiots.
Good software never steals focus from the user. Even during startup.
After 10 years running my own business, I still manage schedules and tasks using old school post-it notes, sometimes simple sometimes very elaborate.
You know those sites, where you're trying to just grab a quick bit of information but the page is shifting all over the place as it loads up 3 million advertisements.
Selling two of my top WordPress domains, wp-zen.com & zen-wp.com $300 for both. Aged 9 years. Drop a line if interested.
Never force your users to type out a password (or any long string of characters) by blocking the paste function. Typing long strings leads to MORE errors than simple copy/paste.