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

```js
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

```

Result

Try with this
```js
filesaver.saveAs(
new Blob(
[(new XMLSerializer).serializeToString($("code").html())]
, {type: "application/xhtml+xml;charset=" + document.characterSet}
)
, "document.xhtml"
);
```
And I get following error