从外部源导入和语法高亮代码

Question

我不是前端开发人员，为了让 highlight.js 做我想做的事，我已经努力了几个小时。需要在博客中很好地显示代码。好的，它完美地工作，因为它将我 post 的代码呈现为

<pre><code>...</code></pre>

...所选样式非常漂亮且色彩丰富，例如 idea.css。我已经准备好所有样式和 highlight.pack.js 进入目录。

但是把整个程序粘贴到那些标签之间太乱了！如果代码可以保留在它的文件中，它可以更干净地重用于其他事情。

将代码从同一目录 myCode.py 中的 python 文件中拉出的最短和最优雅的方法是什么（如果可能的话不加载任何外部库）那些标签？

这个库的主要参考文献是here。

Answer 1

我假设要突出显示的代码文件存在于网络服务器上。

使用 JQuery get 导入文件。
将内容放入代码标签中。
从 hightlight.js 调用适当的函数使其成为 highlight the code。

这是一些 HTML/JS 代码：

<pre><code></code></pre>
<script type="text/javascript">
  $.get("/myCode.py", function(response) {  //(1)
    $("code").html(response);               //(2)
    $("code").each(function(i, block) {    
    hljs.highlightBlock(block);             //(3)
    });
});
</script>

请注意，这假设您的 page.Otherwise 第 2 步中只有一个 <code> 标签需要调整。

从外部源导入和语法高亮代码

Import and syntax highlight code from external source

javascript

jquery

frontend

syntax-highlighting

highlight.js