Advice on syntax highlighting

[Kevin Ingwersen (Ingwie Phoenix)]

Hey there.

I have gotten myself into a situation where I am likely better off asking for help. Currently I am working on a site, that here and there shows code blocks and also has a chat in which one can write code blocks. The whole user input is in markdown and rendered through the backend. Now, I wanted to add proper syntax highlighting. My markdown parser already emits <pre><code>-style blocks with a proper „language-*“ class included. The only thing I now need is a syntax highlighter - or, a way to do so.

The most advanced highlighter I found was Highlight.js. But it proposes a small problem; its big. I am using WebPack to render my site’s JS code and can easily include Highlight.JS into it. Hoooowever… it turns out that Hightlight.JS is pretty big with only a small amount of modules. The following is a snippet of my current setup that includes UglifyJS and a few other settings.


dc6f8324fa6f3d3bf096-libwebpack.js 31.4 kB 0 [emitted] libwebpack

chunk {0} dc6f8324fa6f3d3bf096-libwebpack.js (libwebpack) 59.4 kB [rendered]
[0] multi libwebpack 40 bytes {0} [built]
[1] ./web-lib/highlight.js 1.16 kB {0} [built]
[2] ./~/highlight.js/lib/languages/markdown.js 2.3 kB {0} [built]
[4] ./~/highlight.js/lib/languages/bash.js 2.35 kB {0} [built]
[6] ./~/highlight.js/lib/languages/css.js 2.58 kB {0} [built]
[8] ./~/highlight.js/lib/languages/php.js 3.28 kB {0} [built]
[7] ./~/highlight.js/lib/languages/javascript.js 3.51 kB {0} [built]
[5] ./~/highlight.js/lib/languages/cpp.js 4.19 kB {0} [built]
[9] ./~/highlight.js/lib/languages/scss.js 7.6 kB {0} [built]
[10] ./~/ojc/src/runtime.js 9.94 kB {0} [built]
[3] ./~/highlight.js/lib/highlight.js 22.4 kB {0} [built]



As you can see, the highlight.js file itself is almost 23KB.

Now, I have two options: Pre-render the code blocks on the server through an express middleware, by overwriting res.send() and res.write() OR swapping syntax highlighters.

So my questions are:

- Which syntax highlighter(s) could you recommend?
- Would you recommend to pre-render the code or to include the highlighter in the page itself?
- Do you have other useful tipps?

The languages I want to highlight are: JS, S/CSS, PHP, C++, HTML and Markdown.

Kind regards, Ingwie!