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!
--
Job board: http://jobs.nodejs.org/
New group rules:
https://gist.github.com/othiym23/9886289#file-moderation-policy-md
Old group rules:
https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
---
You received this message because you are subscribed to the Google Groups
"nodejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/nodejs/5420D958-CB61-4D9B-AD62-F21F3AB232DC%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
