Background: SE currently uses the Google code-prettify library for syntax highlighting. The possibility of switching has been suggested in the past:
- Why doesn't StackOverflow use Highlight.js instead of Google-Code-Prettify?
- Switching to highlight.js for syntax highlighting (by the highlight.js author himself)
I want to update this discussion for 2016. Here's the scoop on highlight.js:
It's not too big
The current version of prettify served by SE is 30.9kB (12.7kB gzipped).
The current default cdnjs version of highlight.js is 42.0kB (17.5kB gzipped). This includes a default set of languages, but that can of course be customized.
It's way faster
I made a basic performance test in JSFiddle to see how highlight.js does in comparison to prettify.
prettify takes about 4x as much time as highlight.js for some Ruby code (a file from Rails):
And about 10x as much time for Objective-C (a file from PLCrashReporter):
It's significantly better
highlight.js has a larger set of supported languages than google-code-prettify. (See a demo of several of them.)
The tags/classes it generates are quite extensive, and they are nicely nested, so you can do some cool things with CSS to make a really nice color scheme.
It can detect nested code blocks, such as CSS inside HTML, and highlight both languages correctly in the same snippet.
Here's a simple comparison where you can see highlight.js understands nested PHP, JS, and CSS, and has better knowledge of keywords, builtins, etc. than prettify:
demo='<!DOCTYPE html>\n<head>\n <title><? echo "Hello $name!"; ?></title>\n\n <style>\n body {\n width: 500px; /* big enough */\n }\n </style>\n\n <script type="application/javascript">\n function someFunction() {\n return true;\n console.log("hello world!");\n }\n <'+'/script>\n\n<body>\n <p class="something" id=\'12\'>Something</p>\n <p class=something>Something</p>\n <!-- comment -->\n <p class>Something</p>\n <p class="something" title="p">Something</p>\n</body>'; document.getElementById("prettify").innerText = demo; document.getElementById("hljs").innerText = demo; PR.prettyPrint(); hljs.highlightBlock(document.getElementById("hljs"));pre { padding: 0.5em; background: #F0F0F0; } /* prettify */ .prettyprint { color: #444; } .str { color: #880000; } .kwd { font-weight: bold; } .com { color: #888888; } .typ { color: #880000; } .lit { color: #78A960; } .tag { font-weight: bold; } .atn { color: #bdb76b; } .atv { color: #65b042; } .dec { color: #3387CC; } /* highlight.js styles */ .xml .css, .xml .javascript, .xml .php { opacity: 0.6; } .hljs, .hljs-subst { color: #444; } .hljs-tag .hljs-string { color: #65b042; } .hljs-comment { color: #888888; } .hljs-attr { color: #bdb76b; } .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name { font-weight: bold; } .hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: #880000; } .hljs-title, .hljs-section { color: #880000; font-weight: bold; } .hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo { color: #BC6060; } .hljs-literal { color: #78A960; } .hljs-number { color: #3B719A; } .hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition { color: #397300; } .hljs-meta { color: #1f7199; } .hljs-meta-string { color: #4d99bf; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; }<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script> <table> <tr><th><tt>google-code-prettify</tt></th><th><tt>highlight.js</tt></th></tr> <tr> <td><pre id="prettify" class="prettyprint"></pre></td> <td><pre id="hljs"></pre></td> </tr> </table>
It's actively developed
The commit activity for highlight.js is consistently high. Not so much for prettify (although it's not completely dead as some might have thought). Of course, SE can't update all the time, but more improvements can be pulled in every time the library is updated.
Some other benefits are discussed in this comparison from 2011 and in this post by the author.
Let's do it!
Given that Stack Overflow and other SE sites exist for the purpose of programming Q&A, good syntax highlighting is crucial. It seems worth the investment to make a switch like this, if it improves the user experience of each of the 48 million monthly visitors, which I'm certain will only keep growing with some of the new (syntax-heavy) features coming up. The community has shown a great deal of interest in syntax highlighting improvements over the years... I just hope the time is right!
<!-- language-all: lang-ruby -->. Would this still be recognized with Highlight.js? (Not that supporting this syntax would be a dealbreaker for me; it'd just be nice.)