Merge pull request #52 from rackerlabs/hljs-syntax-highlighting

feat(syntaxHighlight): Initial Helix theme for Highlight.js

Author: CITguy

_config.js

@@ -77,7 +77,6 @@ CONFIG.docs = {
 CONFIG.copy = {
     dirs: [
         'images',
-        'vendor',
     ]
 };
 

lib/nunjucks/code.tag.js

@@ -5,6 +5,27 @@
 const hljs = require('highlight.js');
 const nunjucks = require('nunjucks');
 
+function highlight (code, lang) {
+    if (hljs.getLanguage(lang)) {
+        return hljs.highlight(lang, code).value;
+    } else {
+        return hljs.highlightAuto(code).value;
+    }
+}//highlight()
+
+function stripIndent (str) {
+    const match = str.match(/^[ \t]*(?=\S)/gm);
+
+    if (!match) {
+        return str;
+    }
+
+    const indent = Math.min.apply(Math, match.map(x => x.length));
+    const re = new RegExp(`^[ \\t]{${indent}}`, 'gm');
+
+    return indent > 0 ? str.replace(re, '') : str;
+}//stripIndent()
+
 function CodeTag () {
     this.tags = ['code'];
 
@@ -20,70 +41,17 @@ function CodeTag () {
         // parse the body and possibly the error block, which is optional
         var body = parser.parseUntilBlocks('endcode');
 
-        // I found Nunjucks to be incredibly convoluted on how to just get some data into the BlockTag function,
-        // this finally worked by faking another template node.
-        var tabStart = new nodes.NodeList(0, 0, [
-            new nodes.Output(0, 0, [
-                new nodes.TemplateData(0, 0, (tok.colno - 1))
-            ])
-        ]);
-
         parser.advanceAfterBlockEnd();
 
         // See above for notes about CallExtension
-        return new nodes.CallExtension(this, 'render', args, [body, tabStart]);
+        return new nodes.CallExtension(this, 'render', args, [body]);
     };//parse()
 
-    // code rendering for the block. Pretty simple, just get the body text and pass
-    // it through the code renderer.
-    this.render = function (context, blockBody, blockTabStart) {
-        let body = blockBody();
-        let spacesRegex = /^[\s]+/;
-        let tabStart = blockTabStart(); // The column postion of the {% code %} tag.
-
-        // TODO: Update to automatically normalize indentation to least indentation needed.
-        //   - This still adds unnecessary indentation to beginning of output.
-        if (tabStart > 0) { // If the {% code %} tag is tabbed in, normalize the content to the same depth.
-            body = body.split(/\r?\n/); // Split into lines.
-            body = body.map( line => {
-                let startSpaces = line.match(spacesRegex);
-                // If the content is not at the same or greater tab depth, do nothing..
-                if (startSpaces && startSpaces[0].length >= tabStart) {
-                    return line.slice(tabStart); // Subtract the column position from the start of the string.
-                } else {
-                    return line;
-                }
-            });
-
-            // Remove blank start line
-            if (body[0] === '') {
-                body = body.slice(1);
-            }
-            // Remove blank end line
-            if (body[body.length - 1] === '') {
-                body = body.slice(0, body.length - 1);
-            }
-
-            body = body.join('\n'); // Rejoin into one string.
-        }
-
-        // remove line break from start and end of string
-        // <http://stackoverflow.com/a/14572494>
-        body = body.replace(/^\s+|\s+$/, '');
-
-        // get the first line of the body to see if we have a file type specified
-        var value = hljs.highlightAuto(body).value;
-        if (body.split('\n').length > 1) {
-            var lang = hljs.getLanguage(body.split("\n")[0]);
-            if (lang) {
-                lang = body.split('\n')[0];
-                body = body.split('\n').slice(1).join('\n');
-                value = hljs.highlight(lang, body).value;
-            }
-        }
-
-        let template = `<pre class="highlight"><code class="hljs">${value}</code></pre>`;
-
+    // Code rendering for the block.
+    this.render = function (context, lang, blockBody) {
+        let body = stripIndent(blockBody());
+        let highlightedBody = highlight(body, lang);
+        let template = `<pre><code class="${lang}">${highlightedBody}</code></pre>`;
         return new nunjucks.runtime.SafeString(template);
     };//render();
 }//CodeTag

source/_less/scaffold.less

@@ -2,50 +2,3 @@
 html {
   font-family: "Roboto", sans-serif;
 }
-
-pre,
-code {
-  font-family: "Roboto Mono", monospace;
-}
-
-//* ===== VERTICAL SPACING ===== */
-address,
-article,
-aside,
-details,
-fieldset,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-main,
-nav,
-section,
-table {
-  // Apply top margin to:
-  // - "sectioning" elements (https://goo.gl/7uHQM0)
-  // - <details>
-  // - <figure>
-  // - <table>
-  // - <form>
-  // - <fieldset>
-  // - <main>
-  //margin-bottom: 1.5em; /* ~20px */
-
-  // Ensure that the first child element
-  // doesn't extend the top margin.
-  //& > *:first-child {
-  //  margin-top: 0;
-  //}
-}
-
-hr {
-  //margin-top: 1.5em;
-}

source/_templates/partials/head.njk

@@ -1,5 +1,5 @@
 <head>
-  <title>{% if page.title %}{{page.title}} | {% endif %}{{site.title}}</title>
+  <title>{% if page.title %}{{page.title}} - {% endif %}{{site.title}}</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="{{site.baseHref}}">
@@ -13,7 +13,6 @@
     crossorigin="anonymous">
 
   <link rel="stylesheet" href="bootstrap.helix.css">
-  <link rel="stylesheet" href="vendor/hljs.agate.css">
   <link rel="stylesheet" href="helix-ui.css">
   <link rel="stylesheet" href="docs.css">
 

source/components/alert/index.html

@@ -27,7 +27,7 @@ <h2 id="default">Default</h2>
       </div>
     </div>
   </div>
-  {% code %}html
+  {% code 'html' %}
     <div role="status" class="hxAlerts" aria-live="polite">
       <div class="hxAlert">
         <div class="hxAlert__icon">
@@ -66,7 +66,7 @@ <h2 id="error">Error</h2>
       </div>
     </div>
   </div>
-  {% code %}html
+  {% code 'html' %}
     <div role="status" class="hxAlerts" aria-live="polite">
       <div class="hxAlert hxAlert--error">
         <div class="hxAlert__icon">
@@ -105,7 +105,7 @@ <h2 id="warning">Warning</h2>
       </div>
     </div>
   </div>
-  {% code %}html
+  {% code 'html' %}
     <div role="status" class="hxAlerts" aria-live="polite">
       <div class="hxAlert hxAlert--warning">
         <div class="hxAlert__icon">
@@ -144,7 +144,7 @@ <h2 id="success">Success</h2>
       </div>
     </div>
   </div>
-  {% code %}html
+  {% code 'html' %}
     <div role="status" class="hxAlerts" aria-live="polite">
       <div class="hxAlert hxAlert--success">
         <div class="hxAlert__icon">

source/components/breadcrumb/index.html

@@ -27,7 +27,7 @@
   </nav>
 </div>
 
-{% code %}html
+{% code 'html' %}
   <nav class="hxBreadcrumb">
     <a href="#">Home</a>
   </nav>