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

4/27/2018

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:

    <command>
			<umbracoAlias>codesample</umbracoAlias>
			<name>codesample</name>
			<icon>images/editor/codesample.gif</icon>
			<tinyMceCommand value="" userInterface="false" frontendCommand="codesample">codesample</tinyMceCommand>
			<priority>1</priority>
    </command>

Add plugin below to end of <plugins> section:

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

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

-code[class|align|style]

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