Syntax highlighting is a feature that allows source code to be formatted and highlighted correctly based on a programming language. To add this to your site:
- Enable the Syntax Highlighter module by visiting the Modules page.
- Next, visit the Filtered HTML text format page by navigating to Configuration > Content authoring > Text formats > Filtered HTML.
- Under Enabled Filters, check Syntax Highlighter, then under Filter processing order below that, drag the Syntax Highlighter filter below the WYSIWYG Filter. This order is important, as syntax highlighting will not work in any other order.
- Visit the Syntax highlighter setting page under Configuration > Content authoring > Syntax highlighter. From this page, enable programming languages that should have their syntax highlighted, then Save.
- Last, you need to configure the CKEditor button settings. Visit Configuration > Content authoring > CKEditor and edit the Advanced profile. Expand the Editor Appearance fieldset, scroll down to Plugins, and check Plugin file: syntaxhighlight. This will enable the {…} code button on the toolbar.
- Scroll down and expand the Advanced options fieldset, and set the Spellchecker setting to No. This disables the automatic Spell Check As You Type feature, since there is an incompatibility with syntax highlighting. Click the Save button to save the CKEditor settings.
- You can now edit or create new content, and click the {…} code button on the toolbar to insert source code. Pick a language and enter your code, and it will automatically format it after saving the content.