我使用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上，它会在"标记上自动更改。但我想使用这个插件在文本区域输入时"实时"更改，并在预标记上重新创建。
JSFIDDLE(工作，但现在调用jQuery语法，我导入了外部脚本JS)
如果我只删除代码$("#classsample > pre").snippet("css",{style:"greenlcd"});的一部分，它将作为jQuery脚本正常工作。
关于您创建的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"});
});
});