Question

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>

这里我正在尝试jQuery Syntax Highlighter。出于某种原因，带有htmlCode类的pre标签没有突出显示语法。

Answer 1

您必须xml-escape应突出显示的HTML标记。否则，浏览器将像任何HTML一样解释标记。看看我创建的example。

将所有<替换为<，将>替换为>

jQuery语法荧光笔无法正常工作

1 个答案: