Prism.js无法高亮AJAX加载的Python代码问题该如何解决？

问题根源 #

1. DOM结构不合理：你将<div id="DIVID">嵌套在<code class=lang-py>内部，Prism在页面首次加载时会自动解析所有带语言类的code标签，将内部内容转译为高亮格式的DOM节点，直接破坏了你原本用于插入AJAX内容的DIVID容器，导致后续点击按钮更新内容失效。
2. AJAX加载新内容后未触发Prism重新高亮：Prism默认仅在页面首次加载完成后执行一次高亮，异步加载的新内容不会自动应用语法高亮。
3. 存在低级语法错误：<a>标签的cursor:pointer是CSS样式，错误写到了href属性中，点击时会触发异常跳转。

修复方案 #

按如下规则修改代码即可：

• 调整DOM结构，将用于展示代码的pre和code标签单独放置，直接更新code标签的文本内容，不要在code内部嵌套其他容器
• AJAX请求静态Python文件改用GET方法（POST请求静态资源大概率会触发跨域或方法不允许错误）
• 在AJAX成功更新代码内容后，立即调用Prism的高亮方法
• 修正<a>标签的样式写法

修正后的完整代码 #

<!doctype html>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js></script>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-coy.min.css>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    function btnclick(_url){
        $.ajax({
            url : _url,
            type : 'get', // 静态资源用GET请求
            success: function(data) {
             // 直接更新code标签的文本内容
             $('#codeBlock').text(data);
             // 调用Prism高亮目标元素，比highlightAll性能更好
             Prism.highlightElement($('#codeBlock')[0]);
            },
            error: function() {
             $('#codeBlock').text('加载出现错误');
            }
        });
    }
</script>
<div style="width:50%;height:100%;position:fixed;top:0;left:0;padding:20px;box-sizing:border-box;">
<!-- 修正a标签的样式写法，href设为javascript:void(0)避免跳转 -->
<a href="javascript:void(0)" style="cursor:pointer;display:block;margin-bottom:10px;" onclick="btnclick('hello.py')">hello.py</a>
<a href="javascript:void(0)" style="cursor:pointer" onclick="btnclick('world.py')">world.py</a>
</div>
<div style="width:50%;height:100%;position:fixed;top:0;left:50%;padding:20px;box-sizing:border-box;overflow:auto;">
<pre class="line-numbers"><code id="codeBlock" class="lang-py"><?php include('hello.py');?></code></pre>
</div>

内容的提问来源于stack exchange，提问作者Junyong Kim