Present source code samples on web pages in a user-friendly way

Composite.Web.Html.SyntaxHighlighter highlights source code and markup samples with SyntaxHighlighter for better readibility.

How to implement Composite.Web.Html.SyntaxHighlighter

  1. Edit a page.
  2. Insert the Composite.Web.Html.SyntaxHighlighter function ( Insert | Function) or add the following code: 
     
<f:function name="Composite.Web.Html.SyntaxHighlighter" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="SourceCode" value="&lt;!-- your markup here --&gt;" /> 
  <f:param name="CodeType" value="xml" /> 
  <f:param name="Themes" value="shThemeDefault.css" /> 
  <f:param name="UseRemoteVersion" value="True" /> 
</f:function>
  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). 
     
<f:function name="Composite.Web.Html.SyntaxHighlighter" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="SourceCode"> 
    <f:function name="Composite.Web.Html.SyntaxHighlighter.Functions.LoadFile"> 
      <f:param name="relativePath" value="App_Code/Composite/Web/Html/SyntaxHighlighter/Functions.cs" /> 
    </f:function> 
  </f:param> 
  <f:param name="CodeType" value="c#" /> 
  <f:param name="Themes" value="shThemeDefault.css" /> 
  <f:param name="UseRemoteVersion" value="False" /> 
</f:function>

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. 
     
<f:function name="Composite.Web.Html.SyntaxHighlighter" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="SourceCode"> 
    <f:function name="Composite.Web.Html.SyntaxHighlighter.Functions.LoadFileFromMedia"> 
      <f:param name="mediaFileReference" value="MediaArchive:249b5421-3d1c-4f6e-b6d8-e411e33d85e9" /> 
    </f:function> 
  </f:param> 
  <f:param name="CodeType" value="c#" /> 
  <f:param name="Themes" value="shThemeDefault.css" /> 
  <f:param name="UseRemoteVersion" value="False" /> 
</f:function>

Requirements

Composite C1 version 2.1.1 or later

SHARE