Add basics of Inky template parsing in docs

diff --git a/docs/pages/button.md b/docs/pages/button.md
index f26df6299233b2481f8ea2011d547a2a14298e86..18df121cb8228142705a479ba634f73d3a28cabe 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -6,8 +6,6 @@ sass: ./scss/ink/components/_button.scss
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic repellendus deserunt, tenetur amet dolorum, fugiat minima quisquam ducimus ad. Numquam magnam possimus quae corporis sint assumenda, sit vel harum repellendus?
 
-```html
-<row>
-  <column large="6"></column>
-</row>
+```inky
+<center><row>This is a row!</row></center>
 ```

diff --git a/lib/buildInkySample.js b/lib/buildInkySample.js
new file mode 100644 (file)
index 0000000..3ba286d
--- /dev/null
+++ b/lib/buildInkySample.js
@@ -0,0 +1,28 @@
+var Cheerio = require('cheerio');
+var Inky = require('inky');
+var format = require('string-template');
+var hljs = require('highlight.js');
+var multiline = require('multiline');
+
+var INKY_TEMPLATE = multiline(function() {/*
+<div class="docs-code" data-docs-code>
+  <pre>
+    <code class="{0}">{1}</code>
+  </pre>
+</div>
+<div class="docs-code" data-docs-code>
+  <pre>
+    <code class="{0}">{2}</code>
+  </pre>
+</div>
+*/});
+
+module.exports = function(code) {
+  var $ = Cheerio.load(code);
+  var output = Inky.releaseTheKraken($, {});
+
+  var inkyCode = hljs.highlight('html', code).value;
+  var htmlCode = hljs.highlight('html', output.html()).value;
+
+  return format(INKY_TEMPLATE, ['html', inkyCode, htmlCode]);
+}

diff --git a/lib/marked.js b/lib/marked.js
index 4397d03a6211c821ab8ff08448475f99c333ae8e..4fa0cf2f1e21c4cd1d27fdcbed62c6ea8ab38a48 100644 (file)
--- a/lib/marked.js
+++ b/lib/marked.js
@@ -1,6 +1,7 @@
-var marked = require('marked');
-var format = require('string-template');
-var hljs   = require('highlight.js');
+var marked    = require('marked');
+var format    = require('string-template');
+var hljs      = require('highlight.js');
+var buildInkySample = require('./buildInkySample');
 
 var mdRenderer = new marked.Renderer();
 
@@ -16,6 +17,10 @@ mdRenderer.heading = function(text, level) {
 mdRenderer.code = function(code, language) {
   var extraOutput = '';
 
+  if (language === 'inky') {
+    return buildInkySample(code);
+  }
+
   if (typeof language === 'undefined') language = 'html';
 
   // If the language is *_example, live code will print out along with the sample