Div元素周围的语法高亮显示

Question

我使用的是语法高亮显示插件，我希望它总是应用于特定的div区域。div的内容将根据单击时的超链接进行更改。如何始终将语法高亮脚本标记包含在"mydiv“元素周围？

<script>
    function viewCode() {
        $('#mydiv').load('euler/_48.py');   
    }
</script>

<a href="#" onClick="viewCode();return true">View Code</a>

<div id="mydiv">
    my div's initial content
</div>

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
    //always apply this script to mydiv
]]></script>

Answer 1

使用syntaxHighlighter，您不能在页面上突出显示任意元素，因此我们将改用script方法。

首先，给脚本和锚定标记一个id，比如

<a href="#" id="show_code">Show Code</a>
<script type="syntaxhighlighter" class="brush: js" id="highlighted"></script>

然后，使用它在用户单击链接时加载内容

$('#show_code').click(function(){
  $.get('euler/_48.py', function(data){
    $('#highlighted').html('<![CDATA[' + data + ']]>');
    SyntaxHighligher.highlight();
  });
});

请记住，使用syntexhighlighter.js的常用方法在这里不起作用，因为SyntaxHighlighter.all()函数仅将highlight()函数绑定到onload事件，因此您必须在每次页面更新时自己调用该函数，方法是在每次更新页面时添加对SyntaxHighligher.highlight()函数的调用。

或者，我通常会推荐pre方法。这与上面几乎相同，但是我们使用pre元素，并使用text() jQuery函数来正确地完成转义。使用pre元素：

<pre class="brush: js" id="highlighted"></pre>

使用这段Javascript

$.get('euler/_48.py', function(data){
  $('#highlighted').text(data);
  SyntaxHighligher.highlight();
});

Answer 2

我想你可以调用HighlightAll方法

示例：dp.SyntaxHighlighter.HighlightAll('code');

苏尔坦