diff --git a/examples/docs/lib/code-editor.js b/examples/docs/lib/code-editor.js
index e78a8b45..f72bfa5d 100644
--- a/examples/docs/lib/code-editor.js
+++ b/examples/docs/lib/code-editor.js
@@ -24,15 +24,27 @@ customElements.define(
 
     connectedCallback() {
       let shadow = this.attachShadow({ mode: "open" });
-      shadow.innerHTML = `
-      <style>@import "https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css";</style>
 
-      <pre class="line-numbers" style="padding: 20px; background: black; overflow: scroll;">
-        <code class="language-elm">
-${Prism.highlight(this._editorValue, Prism.languages.elm, "elm")}
-        </code>
-      </pre>
+      let style = document.createElement("style");
+      style.textContent = `
+        @import "https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css";
+
+        pre {
+          padding: 20px;
+          background: black;
+          overflow: scroll;
+        }
       `;
+
+      let code = document.createElement("code");
+      code.setAttribute("class", "language-elm");
+      code.innerHTML = Prism.highlight(this.editorValue, Prism.languages.elm, "elm");
+
+      let pre = document.createElement("pre");
+      pre.appendChild(code);
+
+      shadow.appendChild(style);
+      shadow.appendChild(pre);
     }
   }
 );