KAE.query.highlight

KAE.query.highlight is an officially supported plugin, so bug reports belong here.

In addition, you can find more technical details at this location.

KAE.query.highlight allows you to apply syntax highlighting to any element. It is run using only JavaScript, and is quite light-weight. You can use brushes that have already been created, or create your own. You can use your own themes to choose how the elements are styled (colors, etc).

KAE.query.highlight is very similar to SyntaxHighlighter. In fact, the output looks almost identical.

There are many reasons to choose KAE.query.highlight:

Compatible with SyntaxHighlighter.
Allows syntax highlighting on any element, not just those with a special class.
Can be used to apply syntax highlighting with different options to different elements. For instance, you may want to apply different settings to a <code> tag than you would want to apply to a <pre> tag.
Much smaller in terms of code size. This can make a big difference when viewers have not cached the JavaScript file.
Allows users to manipulate the execution queue of the program. This gives almost total freedom without needing the source code.
Uses a brush system that allows all JavaScript highlighters to use the same brushes.
Non-destructive: KAE.query.highlight works on the original element, so any styles are preserved.

Note: some other syntax highlighters (like SHJS) also support some of the above features.

Using KAE.query.highlight

Here is a simple example of how to use the plugin (adjust the URLs to your needs):

<head>
    <link type="text/css" rel="stylesheet" href="KAE.query.highlight.css">
    <link type="text/css" rel="stylesheet" href="Themes/theme_Default.css">
</head>
<body>
    <script src="KAE.query.highlight.all.js"></script>
    <script src="Brushes/brush_JavaScript.js"></script>
    <script>
        KAE.query("pre").highlight("js");
    </script>
</body>

And here is what it is doing:

Load the layout style sheet.
Load the "Default" theme.
Load "KAE.query", "KAE.query.compatibility", and "KAE.query.highlight".
Load the "JavaScript" brush.
Call the highlight plugin on the query, using the "js" brush.

Note: It is recommended to place the <script> tags right before </body>, as this improves the responsiveness of the page.

Note: Because it is built on KAE.query, you can use KAE.query.highlight on any element.

Note: The first argument is a string describing which brush to use. The "js" brush is defined in the brush_JavaScript.js file.

In other words: the above will apply the JavaScript brush to all the <pre> elements in the page.

KAE.query.highlight Interface

Arguments

{String, Array}

This is used to tell the plugin what brush to use. Brushes are defined in separate .js files. For JavaScript, you would use "js", for HTML you would use "html", etc.
If the argument is a string, it simply uses the brush. If it is an array, it will load all of the brushes defined in the array, and then apply them all simultaneously.
Examples:

Apply the JavaScript brush to all <pre> tags:

KAE.query("pre").highlight("js");

Apply both the JavaScript and HTML brushes to all <pre> tags:

KAE.query("pre").highlight(["js", "html"]);

{Object}

This is an optional object used to set various settings and properties. The settings are listed at this site.
Examples:

Apply the JavaScript brush to all <pre> tags, but does not enclose the tags, and disables the toolbar:

KAE.query("pre").highlight("js", {
    enclosed: false,
    toolbar: false
});

Examples of Use

Backwards compatibility with SyntaxHighlighter

Load KAE.query.highlight like usual (see Using KAE.query.highlight above). Then, load the SyntaxHighlighter.compat.js file. You can now call SyntaxHighlighter.all(). Your settings should Just Work, including any settings placed on the actual elements. It should look something like this:

<head>
    <link type="text/css" rel="stylesheet" href="KAE.query.highlight.css">
    <link type="text/css" rel="stylesheet" href="Themes/theme_Default.css">
</head>
<body>
    <script src="KAE.query.highlight.all.js"></script>
    <script src="Brushes/brush_JavaScript.js"></script>
    <script src="SyntaxHighlighter.compat.js"></script>
    <script>
        SyntaxHighlighter.defaults["gutter"] = false;
        SyntaxHighlighter.all();
    </script>
</body>

Normal code

<pre>
    var obj = {};
</pre>

Nothing fancy, just call it like normal:

KAE.query("pre").highlight("js");

JavaScript + HTML code

<pre>
    &lt;script>
        var obj = {};
    &lt;/script>
</pre>

In this case, we simply tell it to use both the "js" and "html" brushes:

KAE.query("pre").highlight(["js", "html"]);

Code placed inline with normal text

You can create a new object with <code>var obj = {};</code>.

In this case, it would be preferable to turn enclosed and toolbar to false:

KAE.query("code").highlight("js", {
    enclosed: false,
    toolbar: false
});

► Sign in to add a comment