CMS Blog - Code Highlighting and Styling Possible?

Design help CMS
2

Having custom code highlighting in-between other content between rich-text editor field in the CMS could be done as follows:

  1. Code has to be placed between {{CODE}} and {{ENDCODE}} tags, both of which has to be on their own single line (so that we can use script to grab that chunk of text and wrap it with highlighting stuff). Example:

    {{CODE}}

    This is a test
    Nothing to see
    {{ENDCODE}}

Example image of how it may look like in the CMS Editor richtext field:

995×469 10.6 KB

This is how it may look like on the published site. Padding between box and code can be increased, styles/font/font-sizes can be changed:

1219×295 28.9 KB

  1. The highlight script will auto-detect the code style (html/xml/css/javascript). If you need others it should be possible as well.

  2. You can pick a highlight style from here We're not a CDN - highlight.js

Of course, this is all in theory only. If you need a developer to custom code this for you, we have a freelance category for that.

Alternatively, there are already other topics on this where you host your script elsewhere and embed it in the richtext field.

1 Like