Add Syntax Highlighting to Code Reference

[anon66243189]

This is from here

Reminders for new cp doc

One option that might work and should be relatively simple to implement into the theme (or as a small plugin) is to use EnlighterJS. Their WordPress plugin won’t be compatible with CP, but we can just use EnlighterJS itself. If we do go this route, we might want to split that into its own topic.

---

I’ve tried both (https://prismjs.com, GitHub - EnlighterJS/EnlighterJS: 🔆 an open source syntax highlighter written in pure javascript) and as usual they both have their ad- and disad-vantages.

The pain of the choice.

What I am more worried, is why a Plugin like SyntaxHighlighter Evolved – WordPress-Plugin | WordPress.org Deutsch would be vulnerable, in its CP compatible versions (see SyntaxHighlighter Evolved Vulnerabilities - Patchstack), versus a JS library added to Theme or Plugin.
I am sorry if this is a noob question, I assume the vulnerabilities only can exist if the code actually does some queries, or else backend interactions (like a WP Plugin forcedly would do), which the libs shared above by you do not, since they take what’s “on page” and just highlight it.

What I want to know if both those libs can be deemed safe to use without any further concern or if we need to vet them further

I can implement them in a few minutes, I have already tried both locally and I think I would go for the Prism one as it has more granular control over what script types to highlight and without further ado looks quite good, whereas the Ejs needed some tweaking of the CSS and requires a inline JS to be added in order to work.
Also Prism forces (and works on) code tags, which is seemingly the semantically correct thing to use.

Thus the only detail left here to clarify is security.
Sorry for not splitting the topic “properly”, I can’t, somehow this is only allowed to Admins.

[anon71687268]

I’ve worked with both and think Prism is the better solution. The extra (JS) plugins are tiny and there’s even dynamic loading for language definitions to keep it performant. And you’re right about the semantic markup… PrismJS uses the correct formats: <code></code> and <pre><code></code></pre>. I came across no security issues in using the lib in a plugin, though I didn’t test it extensively. It’s really just wrapping the editor content in containers and styling it, where needed. It doesn’t really “process” anything against the server or the site.

[anon66243189]

Added Prism.

To me, the max width we applied, looks good on the single posts. It is not helpful on single code references. I am not sure why I would buy a 15inch laptop to view code in a section that is less wide than my tablet.
However, this is stuff for other topics…

We can close here.