To use a library include the syntax.js file in the page. It registers a class TinySyntaxHighlighter that holds a bunch of methods. The most important method is initialize() that looks up for each pre element in a page and if such an element's CSS class contains a string syntaxLANG (instead of LANG place the language identifier - vb, csharp, sql or xml). This method must be called after the page DOM is ready (so put it just before the end of the body element) and for each used language the file syntaxLANG must be included also before the initialize() call. The syntax highlighting will be applied to all pre elements with a CSS class syntax_LANG.
If you want to highlight a syntax in a specific DOM element manually, just call the highlightBlock with one parameter - the element object (you can retrieve it for example using document.getElementById call).

Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <!-- This block will be automatically highlighted - it has a CSS class specified -->
    <pre class="syntax_sql">
    -- a very complicated database command
    SELECT * FROM [Orders] [t0]
      JOIN [OrderItems] [t1] ON [t0].[OrderId] = [t1].[OrderId]
      ORDER BY [t1].[Title]
    </pre>

    <!-- This block won't be automatically highlighted - it does not have a proper CSS class -->
    <pre>
    No highlighting here
    </pre>

    <!-- Include the syntax.js and scripts for all languages that you want to use -->
    <script type="text/javascript" src="syntax.js"></script>
    <script type="text/javascript" src="syntax_xml.js"></script>
    <script type="text/javascript" src="syntax_vb.js"></script>
    <script type="text/javascript" src="syntax_csharp.js"></script>
    <script type="text/javascript" src="syntax_sql.js"></script>
    <script type="text/javascript">
        // find all appropriate PRE elements on a page and highlight them
        TinySyntaxHighlighter.initialize();
    </script>
</body>
</html>

Defining a custom format

To allow the Tiny Syntax Highlight to support a custom language highlighting you have to create a custom syntax file. Choose a short name for a language (e.g. test).
The syntax file contains a definition of styles and syntax parser state definition so create a file syntax_test.js.
To color the text the Tiny Syntax Highlight uses a state machine. You can define multiple states, at the beginning the parser is in the first defined state. Each state must have an unique name. Each state also contains one or more transitions. A transition contains a RegExp object that defines a sequence of characters that switches the parser to an another state. In each step the parser finds a nearest state changing sequence of characters, changes the state to a new one defined in the applied transition and advances to a next step.
Every state and transition specifies a name of a style. You can define multiple styles and for each one you can specify the CSS properties and their values.
When a specific state has a specified style that means all text that corresponds to the state will use the specified style. When a transition has a specified style that means the transition sequence of characters will use the specified style respectively.

Here is a sample of a syntax file that has two states. All text between BEGIN and END strings will be blue and the BEGIN and END string will be red.
TinySyntaxHighlighter.syntax_test =  // don't forget to change name to the same one as the file has
{
  states: [    // a first and default state - text that is not between BEGIN and END
    {
      name: "outside", style: "default",
      transitions: [
        // a transition - if BEGIN is found, we will switch to the inside style, and the BEGIN text will be red
        { expression: new RegExp("BEGIN"), state: "inside", style: "red" }
      ]
    },
    {          // a second state - the text is after the BEGIN word - let it blue intil we find the END
      name: "inside", style: "blue",
      transitions: [
        // when we reach the END word, switch to the outside state and make the END word red
        { expression: new RegExp("END"), state: "outside", style: "red" }
      ]
    }
  ],
  styles: [
    {
      name: "default",
      style: { color: "black" }
    },
    {
      name: "blue",
      style: { color: "yellow", background_color: "blue" }
      // if a CSS property name contains a slash, replace it with an underscore
    },
    {
      name: "red",
      style: { color: "red" }
    }
  ]
};

Last edited Feb 20, 2010 at 12:35 AM by tomasherceg, version 2

Comments

No comments yet.