How to add syntax highlighter to your Umbraco TinyMCE Rich text editor


Umbraco does not provide this feature by default. most of my blog posts I write here also need syntax highlighter, this helps the reader to understand the code easily.

Here is the three step process:

  • Add command in config/tinyMceConfig.config
  • Add plugin in config/tinyMceConfig.config
  • Add <code> as valid element in config/tinyMceConfig.config

Add command below to the end of <commands> section:

			<tinyMceCommand value="" userInterface="false" frontendCommand="codesample">codesample</tinyMceCommand>

Add plugin below to end of <plugins> section:

    <plugin loadOnFrontend="true">codesample</plugin>

Add <code> html attribute to <ValidElements> section:


That's it your Rich text editor in Umbraco is formatted with right languages and colours