Skip to main content

Add unrendered code to your content (TCS)

This page applies to:MindTouch 4 and MindTouch TCS


This article covers how to use the Syntax Highlighter to display unrendered programming language code within a MindTouch page for reference purposes.


How do I display unrendered programming code?

MindTouch offers users the ability to display unrendered programming language code within a page via the Syntax Highlighter.


Follow the steps below to start using the Syntax Highlighter in your documentation.

Using the Syntax Highlighter

To get started using the Syntax Highlighter, edit a MindTouch page and choose the "Formatted" option from the Styles drop-down menu:


This will then insert a "Formatted" block within the editor and present the Syntax Highlighter:


From here you can choose the display format you'd like your programming language code to be displayed in. Some popular options are available as links in the Syntax Highlighter, though you can peruse additional display options within the "More" drop-down menu:


Once you've chosen the display style, simply add the programming language code and save the page.


After saving the page you'll see your programming language code unrendered:


How do I cleanly copy unrendered code?

To cleanly copy unrendered code created with the Syntax Highlighter, you can hover over the presented code to see an options prompt:


From there, you can click on the first icon to display a pop-up window where you can copy text:


What display options are available for Syntax Highlighter?

The following display options are available within Syntax Highlighter:

  • CSS
  • HTML
  • JavaScript
  • PHP
  • SQL
  • XML
  • AS3
  • ColdFusion
  • CPP
  • C Sharp
  • DekiScript
  • Delphi
  • Diff
  • Erlang
  • Groovy
  • JavaFX
  • PERL
  • PowerShell
  • Python
  • Ruby
  • Scala
  • Shell
  • Text
  • VB (Visual Basic)


Additional Note

While the Syntax Highlighter is intended to display unrendered code, it is possible to render code using the Syntax Highlighter. To do so, add a class="eval" to the <pre> element within the source of your page.

For example, let's say you have the following code shown within the Syntax Highlighter:

{{ wiki.tree() }}​

To allow this content to be rendered within the Syntax Highlighter's styles, enter the source mode, and edit the source to reflect the following:

<pre class="eval">{{ wiki.tree() }}</pre>
  • Was this article helpful?