icon Syntax Highlighter
Created by Orckestra

How to format code samples on a page with Syntax Highlighter

  1. Edit a page.
  2. Insert the Composite.Web.Html.SyntaxHighlighter function ( Insert | Function) or add the following code:
      Expand code
  3. Specify these required parameters address:
    • Source Code: The source code or markup sample to highlight. (You can also load a sample from a file - see below.)
    • Code Type: The type of code or markup to highlight: C#, XML, SQL, CSS etc.
  4. Specify the optional parameters if necessary:
    • CSS Theme: A CSS file-based theme to change the look and feel of the highlighted syntax. "shThemeDefault.css" by default.
    • Use Remote Version: Use Syntax Highlighter hosted on a remote server. False by default (the local version is used).

How to load code samples from files

Instead of pasting the sample code/markup in the Source Code parameter of the SyntaxHighlighter function, you can choose to load your sample from a file either stored in the Media Archive or on the server where your website is located.

To load a sample from a file on the server:

  1. Insert the Composite.Web.Html.SyntaxHighlighter function as described above.
  2. Switch the type of the Source Code parameter to "Function".
  3. Call the Composite.Web.Html.SyntaxHighlighter.Functions.LoadFile function.
  4. In its Relative Path parameter, specify the relative path to the file on the server with the sample code (for example, App_Code/Composite/Web/Html/SyntaxHighlighter/Functions.cs).
      Expand code

To load a sample from a file in the Media Archive:

  1. Insert the Composite.Web.Html.SyntaxHighlighter function as described above.
  2. Switch the type of the Source Code parameter to "Function".
  3. Call the Composite.Web.Html.SyntaxHighlighter.Functions.LoadFileFromMedia function.
  4. In its Media File Reference parameter, specify the file from the Media Archive with the sample code.
      Expand code