Use server side rendered code blocks syntax highlighting

[eduardolundgren]

Currently, Electrics.js code blocks syntax highlighting is done on the client side. For wedeploy.com we've used a naive replace approach that works well to print the already rendered code block. The usage is simple and can be integrated with any templating language.

[robframpton]

Makes sense, we've talked about doing this in the past. I think the reason we haven't done it already is dealing with Metal components that provide code snippets, because even if we do it server side, the Metal component will render over it.

Correct if I'm wrong, but it looks like you guys do the highlighting on both the server and client? https://github.com/wedeploy/wedeploy.com/blob/b9fec7c902f4a724d96b8774f5667fb33b4bb1a7/node/magnet/src/pages/index.js#L77

Can you explain how highlightCodeSnippetsFromMarkup and highlightAllCodeElementsInDoc work together?

[eduardolundgren]

Yes. The server-side prints it with the highlighted syntax, Metal.js renders it on the client without the highlighted syntax then the highlightAllCodeElementsInDoc decorates it. Because it happens in the same render tick it's unnoticeable.

[robframpton]

Cool. That approach should work on Electric as well.