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;

examples/tutorial.html

@@ -41,34 +41,26 @@
   <h2>Markdown</h2>
   <div>
   <div dt-markdown>Any element with a `dt-markdown` attribute will be rendered with its contents replaced with a markdown processed version. We use [marked](https://github.com/chjj/marked), with [github flavored markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) and [smartypants](https://daringfireball.net/projects/smartypants/).</div>
-  <pre><code class="language-html">
+  <dt-code block language="html">
   &lt;div dt-markdown&gt;
   ###This markdown will be rendered as HTML
 
   For more about markdown, read this [tutorial](https://help.github.com/articles/basic-writing-and-formatting-syntax/).
   &lt;/div&gt;
 
-  </code></pre>
+</dt-code>
   </div>
   <hr>
   <h2>Code Blocks</h2>
-  <p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-html">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
-  <pre><code class="language-html">
-    &lt;pre&gt;&lt;code class="language-javascript"&gt;
+  <p>Syntax highlighting is provided within <dt-code language="html">&lt;dt-code&gt;</dt-code> tags. An example of inline code snippets: <dt-code language="html">&lt;dt-code language="html"&gt;let x = 10;&lt;/dt-code&gt;</dt-code>. For larger blocks of code, add a <dt-code>block</dt-code> attribute:</p>
+  <dt-code block language="html">
+    &lt;dt-code block language="javascript"&gt;
       var x = 25;
       function(x){
         return x * x;
       }
-    &lt;/code&gt;&lt;/pre&gt;
-  </code></pre>
-  <p>You can also use code blocks within markdown blocks. For instance: </p>
-  <pre><code class="language-html">
-    &lt;div dt-markdown&gt;
-    ```javascript
-    let x = 25;
-    ```
-    &lt;/div&gt;
-  </code></pre>
+    &lt;/dt-code&gt;
+  </dt-code>
   <hr>
   <h2>Citation</h2>
   <p>Bibtex is the supported way of making academic citations. You first need have a global definition of all your possible citations. This can either be inlined in the document, or it can reference an external bibtex file.</p>
@@ -92,7 +84,7 @@
     }
     &lt;/dt-bibliography&gt;
   </code></pre>
-  <p>Citations are then used with the <code class="language-html">&lt;dt-cite&gt;</code> tag.</p>
+  <p>Citations are then used with the <dt-code language="html">&lt;dt-cite&gt;</dt-code> tag.</p>
   <pre><code class="language-html">
     &lt;dt-cite&gt;gregor2015draw&lt;/dt-cite&gt;
   </code></pre>