javascript - 从桌面读取python文件时突出显示代码

Question

我有 2 个文件 .js 和 html 文件。我可以读取文件，它显示代码，但不会改变代码的颜色。我已经对其进行了测试，并且当我对其进行硬编码时，highlight.pack.js 正在工作。我怀疑错误出在 $(#filecontents).html(contents) 处。我不确定如何解决这个问题。插件可以从highlightcode下载

.js 文件

$(document).ready(function(){
  $('#fileform input:file').change(function(event){
    file = event.target.files[0];
    reader = new FileReader();
    reader.onload = function(event) {
      var contents = event.target.result;
      $('#filecontents').html(contents);
    }
    reader.readAsText(file)
  });
});

.html 文件

<link rel="stylesheet" href="styles/school_book.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<form id="fileform" action="" method="post"> <input type="file" name="file" /></form>
<pre><code class = "python"><p id="filecontents"></p></code></pre>

Answer 1

添加了一行以在将脚本event.target.result放入之前将其应用到#filecontents

$(document).ready(function(){
  $('#fileform input:file').change(function(event){
    file = event.target.files[0];
    reader = new FileReader();
    reader.onload = function(event) {
      var contents = event.target.result;
      contents = hljs.highlightAuto(contents).value; // convert to highlighted
      $('#filecontents').html(contents);
    }
    reader.readAsText(file)
  });
});​

示例小提琴。