Consider server-side highlighting

[westonruter]

I propose that the code block be highlighted on the frontend via server-side logic (as a dynamic block) instead of client-side logic (via enqueueing Prism.js). A couple key benefits are that this improves frontend performance and the syntax highlighting will be seen even when JS is disabled or when the content is served in AMP plugin. What's more, the Highlight.php library includes support for auto-detection of the language, so it would not be necessary to select the language and any existing code blocks could have syntax highlighting automatically added to them.

I've implemented server-side highlighting for a similar block in https://github.com/mkaz/code-syntax-block/pull/13

It is also done in an extension for the SyntaxHighlighter plugin: https://github.com/xwp/syntaxhighlighter-amplified

[bradyvercher]

I briefly looked into Highlight.php a couple weeks ago, but it was missing a few features (line numbers, highlighting, etc), and there were some escaping issues that I didn't dig into (<?php was displayed as <?php).

Auto-detecting the language is something else I looked into, but since this block uses CodeMirror, that would need to be done before the code was processed as well.

I also wasn't sure how the markup would look in feed readers or REST API consumers that don't take the styles into account.

That being said, I'm wondering if it might be possible to have Prism.js process the code in the editor, store the result in an attribute, and display that on the frontend?

In any case, it's good to know there are other solutions like mkaz/code-syntax-block that offer an alternative approach.