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 = Web Developer. Security Specialist. WordPress Buff.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
This new Admin Page Framework looks pretty good. Can't wait to check it out.
Two great places to find awesome plugins: pluginsearch.com and WP's browse new.
2 things I hate to see in stylesheets: _ and #
Love VLC media player but it fails miserably when it comes to randomizing large collections of mp3 and other files.
Dashlane redesigned, stating proudly they "removed all filigree". Should have kept it; the app now looks generic and boring. Killed your identity.
Working on integration for setaPDF + EDD on the new books subdomain. Good times.
Toggle visibility of hidden files on Mac: Cmd + Shift + .