Reputation: 1027

jQuery Syntax Highlighter not working

HTML code:

<!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" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

        </script>
        <script type="text/javascript" src="highlighter.js"></script>
        <link rel="stylesheet" type="text/css" href="highlighter.css"
        />
        <script>
            $(document).ready(function () {
                $("pre.htmlCode").snippet("html");
                // Finds <pre> elements with the class "htmlCode"
                // and snippet highlights the HTML code within.
                $("pre.styles").snippet("css", {
                    style: "greenlcd"
                });
                // Finds <pre> elements with the class "styles"
                // and snippet highlights the CSS code within
                // using the "greenlcd" styling.
                $("pre.js").snippet("javascript", {
                    style: "random",
                    transparent: true,
                    showNum: false
                });
                // Finds <pre> elements with the class "js"
                // and snippet highlights the JAVASCRIPT code within
                // using a random style from the selection of 39
                // with a transparent background
                // without showing line numbers.
                $("pre#dynamic").snippet("php", {
                    style: "navy",
                    clipboard: "js/ZeroClipboard.swf",
                    showNum: false
                });
                // Highlights a snippet of PHP code with the "navy" style
                // Hides line numbers
                $("pre#dynamic").click(function () {
                    $(this).snippet({
                        style: "vampire",
                        transparent: true,
                        showNum: true
                    });
                    // Changes existing snippet's style to "vampire"
                    // Changes the background to transparent
                    // Shows line numbers
                });
            });
        </script>
    </head>

    <body>
        <pre class="htmlCode">
            <h1>test</h1>
        </pre>
    </body>

</html>

Here I am trying jQuery Syntax Highlighter. For some reason pre tag with htmlCode class not syntax highlighted.

Upvotes: 2

Answers (1)

albinohrn

Reputation: 626

You have to xml-escape the HTML-tags that should be highlighted. Otherwise the browser will interpret the tags just like any HTML. Have a look at the example I've created.

Replace all < with < and > with >

Upvotes: 5

jQuery Syntax Highlighter not working

Answers (1)

Related Questions