Syntax Highlighter with <pre> format
- Applies to:
- All versions
- Role required:
- Draft Contributor
The syntax highlighter displays unrendered programming code within a page. Use it to show code examples without executing the code.
Use the syntax highlighter
- From the Editor Toolbar, select <pre> Format under the Style menu.
- The syntax highlighter container will appear with the default option set to None.
- To change the display format, click into the container to display options and a More drop-down with additional options.
- Save the page. The code will appear unrendered.
<p>example code</p>
Syntax options
The highlighter supports the following:
- CSS
- HTML
- JavaScript
- Java
- PHP
- SQL
- XML
- AS3
- ColdFusion
- CPP
- C Sharp
- DekiScript
- Delphi
- Diff
- Erlang
- Groovy
- JavaFX
- PERL
- PowerShell
- Python
- Ruby
- Scala
- Shell
- Text
- VB (Visual Basic)
Copy unrendered code from a published page
In View mode, hover over a syntax highlighter container to display icons, which include a <view source> icon that triggers a pop-up window to copy out the code.
The <view source> icon will appear for most code options except None.
Render code within syntax highlighter
The syntax highlighter is intended to display unrendered code, but you can render code within it if you add a class="eval" to the <pre> element in the HTML view of the page.