Why can't I set intial value for CodeMirror

Question

I deleted initial code in html source here https://codepen.io/DerkJanS/pen/owVGZb and tried to do it in javascript instead.

I tried

  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: 'htmlmixed',
    value: `<section>
    <div class="container">
      <h1>test</h1>
      <p>This is just a HTML example</p>
    </div>
  </section>
  });

and

  CodeMirror.setValue(`
  <section>
    <div class="container">
      <h1>test</h1>
      <p>This is just a HTML example</p>
    </div>
  </section>`);

but none works: content is empty.

Answer 1

It can be done with a CodeMirror document:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true
});

const Doc = CodeMirror.Doc('', 'htmlmixed');

editor.swapDoc(Doc);

Doc.setValue(`
  <section>
    <div class="container">
      <h1>test</h1>
      <p>This is just a HTML example</p>
    </div>
  </section>`);

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/htmlmixed/htmlmixed.min.js"></script>

<textarea id="code"></textarea>