Save same structure when using contenteditable="true"

Currently I build small app allow user to load file and edit them

The problem I have is when I click on download button the data save to the file is not the same as old structure since I'm using $("pre code").each when user upload a file to highlight it. Try with $("code").text() & $("code").html() but not giving me the result i want

    fileUpload(event) {
        const reader = new FileReader();
        console.log(event.srcElement.files[0]);
        this.fileName = event.srcElement.files[0].name;
        reader.readAsText(event.srcElement.files[0]);
        const me = this;
        reader.onload = function () {
            me.content = reader.result;
            hljs.configure({useBR: true});
             $(document).ready(function () {
                $("pre code")
                    .each(function (i, block) {
                        hljs.highlightBlock(block);
                    });
            });
        };
    }

    saveFile() {
        const blob = new Blob([$("code").text()], {type: "text/plain;charset=utf-8"});
        filesaver.saveAs(blob, this.fileName);
    }

Contain of the file

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xlink="http://www.w3.org/1999/xlink" exclude-result-prefixes="msxsl xlink" xmlns:mml="http://www.w3.org/1998/Math/MathML">
  <xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/>

</xsl:stylesheet>

Result

Try with this

   filesaver.saveAs(
            new Blob(
                [(new XMLSerializer).serializeToString($("code").html())]
              , {type: "application/xhtml+xml;charset=" + document.characterSet}
          )
          , "document.xhtml"
      );

And I get following error