javascript - 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方法。

首先，为脚本和 anchor 标记指定一个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() 函数绑定(bind)到 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();
});