Maintain Markup Format with Highlight.js

I am attempting to display dynamically generated HTML on my web page and do highlighting/formatting using highlight.js. I have the highlighting working correctly, however the indentation is not correct. Here's the jsFiddle.

The code shows like this: <div class="parent">parentContent<div class="child">childContent</div><div class="child">childContent</div><div class="child">childContent</div></div>

whereas I'd like to show up as it would in an IDE:

<div class="parent">
    parentContent
   <div class="child">
       childContent
   </div>
   <div class="child">
       childContent
   </div>
   <div class="child">
       childContent
   </div>
</div>

I understand it's called highlight.js not format.js :) but I thought it was possible and I haven't had much luck getting an answer from the API. I have tried configuring line breaks via hljs.configure({ useBR: true }); and the fixMarkup('value') looked promising but I have not implemented it with any success.