Code Syntax Highlighter, how to add custom highlighting in Confluence Cloud?

[M J]

I have Confluence Cloud, and I'm trying with different code blocks to add custom highlighting for a new language. How can I do that with Code Syntax Highlighter (or Better Code Block)?

[Humashankar VJ]

Hi @M J 

To enhance code display in Confluence, utilize either the Code Syntax Highlighter or Better Code Block apps. Begin by installing your preferred app from the Atlassian Marketplace.

For both apps, adding a code block follows similar steps. When editing a Confluence page, type { to open the macro browser, select the app, and click Insert. Then, choose your programming language from the list; if your language isn't listed, select a similar language's syntax highlighting. Finally, pick a theme that suits your preference.

For advanced customization with the Better Code Block app or to add custom highlighting rules, utilize custom CSS. Navigate to Space Settings, then Look and Feel, and finally Stylesheet. Add your custom CSS rules to style code blocks as needed, including custom syntax highlighting rules if you know the relevant CSS classes.

More information you can refer the below help article:

Code Syntax Highlighter - Advanced Code Block for Confluence | Atlassian Marketplace

Insert the code block macro | Confluence Cloud | Atlassian Support

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards