Question

我正在使用语法highlighter插件，我希望始终将它应用于特定的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');

苏丹

Div元素周围的语法荧光笔

2 个答案: