Update 2020-09-24
This is now live network-wide (including Stack Overflow).
Update
This is now live on Meta Stack Exchange and Meta Stack Overflow. Any bugs and feedback can be posted on the main post as an answer.
Note: This post is only an excerpt of the main Meta Stack Exchange post (MSE). See that post for the full details. Please report any issues as answers on the MSE post only.
Hey folks! I’m Ben and I’m a dev on the Teams team here at Stack Overflow - we're the team focused on building the private Teams experience on SO. I’ve recently been working on our post editing experience and I’d like to show off some preliminary work that’s coming to the network soon.
TL;DR
We’re switching our code block highlighting library from Google Prettify to highlight.js. All currently supported languages are still supported and you won’t need to change how you write posts at all. The only major change is how we render highlighted code blocks. In addition, we’re taking this opportunity to introduce our new highlighting theme as well. We’re rolling this out in stages, starting with MSE/MSO with other sites to follow. (See the main MSE post for details)
What’s changing about how I write posts?
Absolutely nothing :). There is absolutely no change to how posts are written. We still support all the existing Prettify language aliases, along with the new aliases from highlight.js.
So what is changing?
The “only” changes are visual. We are updating the client-side code block renderer that styles your code in posts (Questions, Answers, etc) and in the editor preview. Syntax autodetection when a language is not specified should be much better overall, along with syntax highlighting coverage in general. The biggest outward facing change for the typical user is going to be our new theme (see below for details).
How does this affect Stack Overflow specifically?
Code autodetection is a bit different
The most obvious change is that language autodetection is different from Prettify. In general, it will be much more accurate, but will possibly end up with a different result than what Prettify would give us. The original Prettify behavior was that if a language was not specified, it fell back to a generic “C like” implementation. highlight.js on the other hand, attempts to guess which syntax is most likely to apply and uses that one.
Personally, I find that the syntax guessing ends with a much nicer result, but there are some opportunities for false positives, especially in very small code snippets. For instance, the following Javascript code is actually detected as C++:
console.log("Is this cpp?");
(With images since highlight.js is not currently active, as of this post)
Despite this improper classification, the code snippet is still readable and honestly, not all that different from the correct syntax highlighting:
My recommendation: If you know the language, go ahead and explicitly set it. It makes the highlighting run a tad faster and you’re guaranteed to get the language you want.
One thing to note: Language detection based on tags or site-wide defaults will still continue to work exactly as before. This means that adding e.g. the python tag to your post will continue to set all unspecified code blocks on that post to use python. Likewise, if the site has a site-wide default language (like https://mathematica.stackexchange.com/), then all unspecified code blocks will take on that site's default language.
Highlighted content is a bit different
Something else to note is that highlight.js tends to not highlight punctuation, which makes it a bit less colorful than other highlighters. This is considered a feature. Not a deal breaker by any means, but something I should mention regardless.
FAQ
Q: When is the rollout happening?
A: Check the FAQ section of the MSE post for the most up-to-date info.
Q: What if I find a bug?
A: Report bugs in an answer (one per answer) on the MSE question. Reporting them there will allow me to keep track of them all in one place and makes triage a lot easier on our end. See the FAQ entry on the MSE post for more details.
highlight.js
is a bit faster than prettify (see the main post for details), but not significantly so. There is a lag time between keystrokes and preview updating that is up to 2 seconds long, if I recall correctly. This is so the preview doesn't continually try and update itself as you type. There's also an ajax call in there too if you updated any tags since the tag itself may change the default highlighting language. If you are able to consistently repro a lag spike after the rollout, I'd love to hear about it so we can make sure to improve the experience.console.log()
) is somehow detected as C++ of all things instead of JS. Especially when this is a JS library we are talking about. Isn't the equivalent in C++cout
, anyway?console.log
andfoo.bar
are the exact same thing, namely just "someName dot someName". (Actually, most programs that claim to be syntax highlighters are actually only highlighting lexemes, so they should really call themselves lexical highlighters.)