I watched jackcoldrick’s video, and his solution with HighlightJS was much more straightforward and yeilded better results than the PrismJS solution posted above. Thanks for that!
PrismJS seemed to require that ‘code’ elements include a class to identify the code language used, and the default didn’t work right for even HTML or JS. HighlightJS autodetects the code language, so you don’t need to add the cumbersome class attribute.
However, there’s still a huge workflow problem with this solution, and it’s frustrating because it’s literally a fix Hubspot could deploy in less than a day: there is no “code” option in the markup dropdown.
This means that adding code highlighting is still a very manual process. I have to open up the “Source code” view, find the text that needs to be marked up as code, and manually surround it with a ‘code’ tag before the section, and a closing ‘/code’ tag afterward. This is really tedious.
All of this would be solved by simply duplicating the functionality in the ‘pre’ option in the markup dropdown, and adding a ‘code’ option.
Note that I’m not asking to remove the ‘pre’ option; both ‘pre’ and ‘code’ are needed, for different things. (Not all code snippets are block-level, some are inline; we still need ‘pre’ to trigger block-level.)
This would still require that we choose our own JS highlighting links and stylesheets to add to the blog template, but that’s a quick one-time change, not an ongoing problem every time we write a blog post. This is easily documented, too.
Honestly, this should take about an hour for one of your developers to do (though more with testing, review, etc.), and it would save those of us with technical blogs an enormous amount of time and effort. It’s taken me several days of stumbling around to find these partial solutions.
Please, please prioritize this.