Question

I have 2 files .js and html file. I can get the file to read, it shows the code but it does not change the colouring of the code. I have tested it and the highlight.pack.js is working when I hard code it. I suspect the error is at $(#filecontents).html(contents). I am not sure how to go about solving this problem. Plugin can be downloaded from highlightcode

.js file

$(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 file

<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

Added a line to apply the script to event.target.result before it is put into #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)
  });
});​

Example fiddle.