Prism formatting - HAR Viewer test

by fiddlegrimbo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<div id="content">
  <pre class="language-markup line-numbers" name="code">
    <code></code>
  </pre>
</div>

JavaScript

function xhr(method, url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        callback.call(this);
      } else {
        callback.call(this, xhr.status);
      }
    }
  };
  xhr.open(method, url);
  xhr.send();
}

function fetchHTML(callback) {
  xhr("GET", "https://api.github.com/gists/3ae03923ae1fb3b4865895c07a6e65f2", function(err) {
    if (!err) {
      var response = JSON.parse(this.responseText);
      var file = response.files["html.html"];
      return callback.call(this, null, file.content);
    }
    return callback.call(this, err);
  });
}

fetchHTML(function(err, response) {
  var div = document.getElementById("content");
  var code = div.querySelector("code");
  code.appendChild(document.createTextNode(response));
  setTimeout(function() {
    var now = performance.now();
  	Prism.highlightElement(code);
    var diff = performance.now() - now;
    alert("highlight took " + diff.toFixed(2) + "ms");
  }, 500);
});