Normalizes indents within code blocks

components/code.js

@@ -1,17 +1,29 @@
 import Prism from "prismjs";
 
 export default function(dom, data) {
-  let codeElements = [].slice.call(dom.querySelectorAll("code"));
+  let codeElements = [].slice.call(dom.querySelectorAll("dt-code"));
   codeElements.forEach(el => {
-    // let content = el.innerHTML;
-    // el.innerHTML = "";
-    // let p = dom.createElement("pre");
-    // let c = dom.createElement("code");
-    // console.log(content)
-    let highlighted = Prism.highlightElement(el);
-    // c.innerHTML = highlighted;
-    // p.appendChild(c);
-    // el.appendChild(p);
-
+    let content = el.textContent;
+    el.innerHTML = "";
+    let language = el.getAttribute("language");
+    let c = dom.createElement("code");
+    if (el.getAttribute("block") === "") {
+      // Let's normalize the tab indents
+      content = content.replace(/\n/, "");
+      let tabs = content.match(/\s*/);
+      content = content.replace(new RegExp("\n" + tabs, "g"), "\n");
+      content = content.trim();
+      let p = dom.createElement("pre");
+      p.appendChild(c);
+      el.appendChild(p);
+    } else {
+      el.appendChild(c);
+    }
+    let highlighted = content;
+    if (Prism.languages[language]) {
+      c.setAttribute("class", "language-" + language);
+      highlighted = Prism.highlight(content, Prism.languages[language]);
+    }
+    c.innerHTML = highlighted;
   });
 }

components/styles-article.css

@@ -176,3 +176,7 @@ dt-article figure figcaption b {
   font-weight: 600;
   color: rgba(0, 0, 0, 1.0);
 }
+
+dt-article > dt-code {
+  display: block;
+}

components/styles-code.css

@@ -24,7 +24,6 @@
 code[class*="language-"],
 pre[class*="language-"] {
 	color: black;
-	background: none;
 	text-shadow: 0 1px white;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	text-align: left;