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

M J
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 15, 2024

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)?

1 answer

0 votes
Humashankar VJ
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 20, 2024

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

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
PREMIUM
PERMISSIONS LEVEL
Product Admin
TAGS
AUG Leaders

Atlassian Community Events