7

With code blocks, we get correct ES2015 ("ES6") syntax highlighting, but in stack snippets, we don't. Since it works for blocks, it's not a Google Prettify issue; it's the information we're passing to Google Prettify. Could we fix that please?

I think it's because Stack Snippets use <!-- language: lang-js --> but on SO we automatically tell Prettify to use language: lang-es6 instead when the javascript tag is present on the question. (Modifying the snippet's comment manually to lang-es6 makes the snippet not a snippet anymore...)


Details:

Here's an image from SO (ES2015 highlighting doesn't appear to work on MSO at all); I've made it large because the difference between the blue and black is fairly subtle:

enter image description here

Note how Google Prettify knows to highlight let in the code block, but not in the snippet. So it's not Prettify that's the problem, so this isn't covered by What is syntax highlighting and how does it work? Apparently it's how we trigger Google Prettify for snippets that's not triggering the right highlighting.


FWIW, here's that block and snippet, but again, let isn't highlighted correctly here on MSO at all (probably because the automatic javascript tag detection isn't enabled here), although it is on SO in a question or answer with the javascript tag:

Code block:

var a = 1;
let b = 2;

Stack Snippet:

var a = 1;
let b = 2;

2 Answers 2

2

Prettify has been updated to revision 9c3730f409, the update is rolling out in build rev 2016.7.4.4702 on Meta SE/SO and in build rev 2016.7.4.3725 on sites.

The new js keywords should be highlighted correctly now, but snippets still won't be recognized with <!-- language: lang-es6 -->.

4
  • So this means snippets will be highlighted correctly once it's rolled out? (And yea, wasn't planning to modify my snippets to use lang-es6 :-) ) Jul 4, 2016 at 8:36
  • yes, rolling out as we speak
    – m0sa StaffMod
    Jul 4, 2016 at 8:37
  • Fantastic! Quick turnaround. Thanks! Jul 4, 2016 at 8:40
  • And it's there. Jul 4, 2016 at 9:06
7

Some explanation of what's happening:

We're not feeding incorrect information. let is not a keyword for the JavaScript syntax highlighter, and won't ever be highlighted if using the JavaScript identifier. If you explicitly specified the language on that code using <!-- language: lang-js -->, it would not highlight that word.

The tag itself uses default as the highlighting language, because it is so frequently used in conjunction with HTML and/or CSS and would cause conflicts between those languages. Default means the highlighter is allowed to choose which language it thinks is being used in the code block, which apparently is not JavaScript.

The snippets explicitly use the lang-js identifier for the JavaScript box and, as stated, it is highlighting correctly based on the keywords present for that language within Google Prettify. Using another language could cause problems in other areas of highlighting the code that may not be desirable.

What we actually need to do:

Simply add let to the list of keywords for the JavaScript language. Better, update to the latest list of keywords used by Prettify. The list wasn't even updated to include let in the official Google Prettify source code until February 10, 2016. So we're not super far behind.

2
  • Huh, they added let but not const?
    – Oriol
    Jul 3, 2016 at 21:42
  • 1
    @Oriol: const is on the list of C keywords, which is included in the list of common keywords, which in turn is included in the list of JavaScript keywords. So const is already highlighted correctly, they didn't need to add it. Sadly, auto, char, sizeof, union, volatile, and several others are also in the list of C keywords that ends up in the common and therefore JavaScript list and so get highlighted incorrectly by Prettify. Will have to file bug report. Jul 4, 2016 at 4:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .