使用highlight.js和jquery在网页上显示Python代码

Question

给定这个html片段

<div class="row">
    <div class="col-md-12">
        <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>
    </div>
</div>

我尝试即时更改实际显示的代码，例如：

$.ajax({
    type: 'GET',
    url: '/api/1/strategy/source/json/{{ name }}',
    dataType: "json",
    success: function (response) {
        console.log(response);
        $("#sourcecode").textContent = response;
    }
})

不幸的是，它不起作用。 对我有什么提示吗？ （在控制台日志中，我看到正确的响应）

托马斯

Answer 1

请看下面的示例，特别是$.ajax函数内部的成功函数。

只要响应是有效的HTML， h1js代码就可以正常工作。

---

 <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script> </head> <body> <div class="row"> <div class="col-md-12"> <pre><code id="sourcecode" class="python">print "Hello World"</code></pre> </div> </div> <script> hljs.initHighlightingOnLoad(); $(function() { $.ajax({ type: 'GET', url: '/api/1/strategy/source/json/{{ name }}', dataType: "json", success: function (response) { console.log(response); $("#sourcecode").html(response); $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); } }); }); </script> </body>