Question

我使用jQuery Syntax Highlighter制作关键更改的实时语法示例，但不会更改“pre”标记内的代码，而是会自行复制。

这是代码，但这不能正常工作：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jqsyntax/jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="jqsyntax/css/jquery.snippet.min.css" />

<script>

    $(function() {
        $("textarea").keyup(function(){     // I've tried with change and keydown and click
            $("#classsample > pre").empty();    // I've tried remove this but no sense

            $("#classsample > pre").text( $("textarea.form_code").val() );  // This will copy from textarea text to pre tag
        });
    });

</script>
</head>
<body>
    <form id="addform" class="forms"><textarea name="shortinfo" class="form_textarea"></textarea></div></form>
<div id="source_highlight"><div id="classsample"><pre>- no code -</pre></div></div>
</body>
</html>

问题是当一个键没有'.empty（）'时它会在source_highlight拷贝本身内部进行编码并使其重复。它只有在我删除jquery片段时才有效，而在keyup上它会在''标签上自动更改。但是我想在textarea上输入时使用这个插件来“改变”，并在pre标签上重新创建。

JSFIDDLE（工作但现在调用jQuery语法，我已经导入了外部脚本JS）

如果我只删除代码$("#classsample > pre").snippet("css",{style:"greenlcd"});的一部分，它将作为jQuery脚本正常工作。

Answer 1

关于jsfiddle你创建的一种方法是删除每个keyup上的元素（因为插件不提供destroy方法）并附加一个带有相关代码的新元素。

jsfiddle

$(function() {
    var codeContainer = $("#classsample"),
        language = "php";

    $("textarea").on('keyup', function(){ 
        $("pre", codeContainer).remove();
        codeContainer.append('<pre/>');
        $("pre", codeContainer)
            .text($(this).val())
            .snippet(language, {style:"greenlcd"});
    });
});

jQuery语法Highlighter不能使用textarea + pre标签在keyup / change / bind上工作

1 个答案: