From b011d184c28937ac5428ca51f82936b03bf8ad81 Mon Sep 17 00:00:00 2001
From: Brian Ginsburg <brian@brianginsburg.com>
Date: Tue, 22 Oct 2019 06:56:18 -0700
Subject: [PATCH] Remove space above and below code elements

Modify shadow DOM tree construction to remove spaces introduced by string interpolation.
---
 examples/docs/lib/code-editor.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

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);
     }
   }
 );