通过 Ajax 使用语法 highligter - 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>

Answer 2

当你调用Ajax进程时，你必须回忆一下画笔脚本。此解决方案适用于 WordPress 主题 (v3.0.9b)

var initHighlightAfterAjax = function(){
    var syntaxhighlighterCoreJs = $('script#syntaxhighlighter-core-js');
    if (syntaxhighlighterCoreJs.length <= 0) {
        // Core
        $('<script>',{src:'/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.9b',id:'syntaxhighlighter-core-js'}).appendTo($('body'));
        // Init HTML Brush
        $('<script>',{src:'/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushXml.js?ver=3.0.9b',id:'syntaxhighlighter-brush-xml-js'}).appendTo($('body'));
        // Init CSS Brush
        $('<script>',{src:'/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCss.js?ver=3.0.9b',id:'syntaxhighlighter-brush-css'}).appendTo($('body'));
         // Init JS Brush
         $('<script>',{src:'/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js?ver=3.0.9b',id:'syntaxhighlighter-brush-js'}).appendTo($('body'));
        // Init PHP Brush
        $('<script>',{src:'/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js?ver=3.0.9b',id:'syntaxhighlighter-brush-php'}).appendTo($('body'));
        // Init selected theme
        $('<style>',{id:'SyntaxHighlighter',html:'@import url("/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.9b"); @import url("/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeRDark.css?ver=3.0.9b"); '}).appendTo($('head'));
    }
    SyntaxHighlighter.highlight();
 }

插入你的Ajax成功流程：

$.ajax({
  success: function(data) {
    initHighlightAfterAjax(); // init after success
 }
})