javascript - 在 Ajax 中使用语法荧光笔 - html 和 python 画笔

Question

我使用ajax从主页调用html文件。对于主页，语法荧光笔工作正常。

但是当我在 ajax 函数中从主页调用第二个 html 页面时，语法荧光笔不起作用。

以下是ajax函数；

$(document).ready(function() {
    $("#intro_py").click(function() {
        $.get({
            url: "Introduction.html",
            success: function(data,result) {
                $("#div1").html(data);
            }
        });
    });
});

语法荧光笔如下:

<script type="text/javascript"   src="syntaxhighlighter_3.0.83/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/syntaxhighlighter_3.0.83/scripts/shBrushPython.js"></script>
<script type="text/javascript">SyntaxHighlighter.all('code');</script>

我想在第二页中突出显示的 LOC 如下:

<pre name="code" class="brush: py;">
    print ('Hello')
</pre>

我们尝试使用以下代码:

<script>
    $(document).ready(function() {
        $("#intro_py").click(function() {
            $.get({
                url: "Introduction.html",
                success: function(data,result) {
                    //alert(result);
                    var brush = new SyntaxHighlighter.brushes.Python(), data;
                    brush.init({ toolbar: false });
                    data = brush.getHtml(data);
                    $("#div1").html(data);
                }
            });
        });
    });
</script>

但是整个页面的 html 代码而不是内容被突出显示。

有人可以帮忙解决这个问题吗？

我是 Ajax 新手。

Answer 1

SyntaxHighlighter.all('code'); 不需要。

这是一个工作示例(代码片段无法运行，因为它没有 Introduction.html 文件)。

Python 代码(或其他语言)应该位于 pre 标记中。

$(document).ready(function() {
  $("#intro_py").click(function() {
    $.ajax({
      method: "get",
      url: "Introduction.html",
      success: function(data) {
        var brush = new SyntaxHighlighter.brushes.Python();
        brush.init({ toolbar: false });
        
        var el = document.createElement('div');
        el.innerHTML = data;
        var preTags = $(el).find("pre");

        for(var i=0;i<preTags.length;i++) {
          var code = $(preTags[i]).text();
          code = brush.getHtml(code);
          $(preTags[i]).html(code);
        }

        $("#div1").html(el.innerHTML);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">

<input type="button" id="intro_py" value="highlight" />
<div>Text before</div>
<div id="div1"></div>
<div>Text after</div>

这是我在 Introduction.html 中使用的代码:

<h2>Example 1</h2>
<pre name="code" class="brush: py;">
    import re
    for test_string in ['555-1212', 'ILL-EGAL']:
        if re.match(r'^\d{3}-\d{4}$', test_string):
            print test_string, 'is a valid US local phone number'
        else:
            print test_string, 'rejected'
</pre>
<h2>Example 2</h2>
<pre name="code" class="brush: py;">
    import re
    for test_string in ['555-1212', 'ILL-EGAL']:
        if re.match(r'^\d{3}-\d{4}$', test_string):
            print test_string, 'is a valid US local phone number'
        else:
            print test_string, 'rejected'
</pre>
<h2>Example 2</h2>
<pre name="code" class="brush: py;">
    import re
    for test_string in ['555-1212', 'ILL-EGAL']:
        if re.match(r'^\d{3}-\d{4}$', test_string):
            print test_string, 'is a valid US local phone number'
        else:
            print test_string, 'rejected'
</pre>