Question

我有2个文件.js和html文件。我可以让文件读取，它显示代码，但它不会改变代码的颜色。我测试了它，当我硬编码时，highlight.pack.js正在工作。我怀疑错误是在$（#filecontents）.html（内容）。我不知道如何解决这个问题。插件可以从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)
  });
});

示例fiddle。

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

1 个答案: