liferay / electric

⚡ Create beautiful documentation for your projects
https://electricjs.com
Other
118 stars 26 forks source link

Use server side rendered code blocks syntax highlighting #94

Open eduardolundgren opened 6 years ago

eduardolundgren commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Cool. That approach should work on Electric as well.