Add syntax highlighting for index.html

kswedberg · kswedberg · commit 38a975a554c3 · 2013-07-16T09:54:03.000-04:00
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -4,6 +4,18 @@ module.exports = function(grunt) {
 
   // Because I'm lazy
   var _ = grunt.util._;
+  var marked = require('marked');
+  // var hl = require('highlight').Highlight;
+  var hl = require('node-syntaxhighlighter');
+  marked.setOptions({
+    highlight: function(code, lang) {
+      lang = lang || 'javascript';
+      lang = hl.getLanguage(lang);
+
+      return hl.highlight(code, lang);
+    },
+    gfm: true
+  });
 
   // Project configuration.
   grunt.initConfig({
@@ -161,15 +173,11 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('docs', 'Convert readme.md to html and concat with header and footer for index.html', function() {
-    var marked = require('marked'),
-        readme = grunt.file.read('readme.md'),
+    var readme = grunt.file.read('readme.md'),
         head = grunt.template.process(grunt.file.read('lib/tmpl/header.tpl')),
         foot = grunt.file.read('lib/tmpl/footer.tpl'),
         doc = marked(readme);
 
-    marked.setOptions({
-      gfm: true
-    });
 
     grunt.file.write('index.html', head + doc + foot);
   });
diff --git a/index.html b/index.html
@@ -32,6 +32,30 @@
   code {
     font-family: Monaco, Courier, monospace;
   }
+  .comment,
+  .comments {
+    color: #aaa;
+  }
+  .keyword {
+    color: blue;
+  }
+  .string {
+    color: #090;
+  }
+  .number {
+    color: #099;
+  }
+
+  td.gutter {
+    text-align: right;
+    padding-right: 3px;
+    padding-left: 3px;
+    background-color: #ddd;
+    color: #aaa;
+  }
+  td.code {
+    padding-left: 5px;
+  }
   h1, h2, h3 {
     font-weight: normal;
     color: #141414;
@@ -64,32 +88,7 @@ <h3>$.fn.smoothScroll</h3>
 </ul>
 <h4>Options</h4>
 <p>The following options, shown with their default values, are available for both <code>$.fn.smoothScroll</code> and <code>$.smoothScroll</code>:</p>
-<pre><code class="lang-javascript">{
-  offset: 0,
-
-  // one of &#39;top&#39; or &#39;left&#39;
-  direction: &#39;top&#39;,
-
-  // only use if you want to override default behavior
-  scrollTarget: null,
-
-  // fn(opts) function to be called before scrolling occurs.
-  // `this` is the element(s) being scrolled
-  beforeScroll: function() {},
-
-  // fn(opts) function to be called after scrolling occurs.
-  // `this` is the triggering element
-  afterScroll: function() {},
-  easing: &#39;swing&#39;,
-  speed: 400,
-
-  // coefficient for &quot;auto&quot; speed
-  autoCoefficent: 2,
-
-  // $.fn.smoothScroll only: whether to prevent the default click action
-  preventDefault: true
-
-}</code></pre>
+<pre><code class="lang-javascript"><div id="highlighter_37482" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">{</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">offset: 0,</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// one of 'top' or 'left'</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">direction: </code><code class="string">'top'</code><code class="plain">,</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// only use if you want to override default behavior</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">scrollTarget: </code><code class="keyword">null</code><code class="plain">,</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// fn(opts) function to be called before scrolling occurs.</code></div><div class="line number11 index10 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// `this` is the element(s) being scrolled</code></div><div class="line number12 index11 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">beforeScroll: </code><code class="keyword">function</code><code class="plain">() {},</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// fn(opts) function to be called after scrolling occurs.</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// `this` is the triggering element</code></div><div class="line number16 index15 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">afterScroll: </code><code class="keyword">function</code><code class="plain">() {},</code></div><div class="line number17 index16 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">easing: </code><code class="string">'swing'</code><code class="plain">,</code></div><div class="line number18 index17 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">speed: 400,</code></div><div class="line number19 index18 alt2">&nbsp;</div><div class="line number20 index19 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// coefficient for "auto" speed</code></div><div class="line number21 index20 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">autoCoefficent: 2,</code></div><div class="line number22 index21 alt1">&nbsp;</div><div class="line number23 index22 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// $.fn.smoothScroll only: whether to prevent the default click action</code></div><div class="line number24 index23 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">preventDefault: </code><code class="keyword">true</code></div><div class="line number25 index24 alt2">&nbsp;</div><div class="line number26 index25 alt1"><code class="plain">}</code></div></div></td></tr></tbody></table></div></code></pre>
 <p>The options object for <code>$.fn.smoothScroll</code> can take two additional properties:
 <code>exclude</code> and <code>excludeWithin</code>. The value for both of these is an array of
 selectors, DOM elements or jQuery objects. Default value for both is an
@@ -101,13 +100,7 @@ <h3>$.smoothScroll</h3>
 <code>document.body</code>)</li>
 <li><p>Doesn&#39;t automatically fire, so you need to bind it to some other user
 interaction. For example:</p>
-<pre><code>  $(&#39;button.scrollsomething&#39;).on(&#39;click&#39;, function() {
-    $.smoothScroll({
-      scrollElement: $(&#39;div.scrollme&#39;),
-      scrollTarget: &#39;#findme&#39;
-    });
-    return false;
-  });</code></pre>
+<pre><code><div id="highlighter_44194" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'button.scrollsomething'</code><code class="plain">).on(</code><code class="string">'click'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">$.smoothScroll({</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">scrollElement: $(</code><code class="string">'div.scrollme'</code><code class="plain">),</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">scrollTarget: </code><code class="string">'#findme'</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">});</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="keyword">false</code><code class="plain">;</code></div><div class="line number7 index6 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div></code></pre>
 </li>
 <li><p>The <code>$.smoothScroll</code> method can take one or two arguments.</p>
 <ul>
@@ -121,11 +114,7 @@ <h3>$.smoothScroll</h3>
 <h4>Additional Option</h4>
 <p>The following option, in addition to those listed for <code>$.fn.smoothScroll</code> above, is available
 for <code>$.smoothScroll</code>:</p>
-<pre><code class="lang-javascript">{
-  // jQuery set of elements you wish to scroll.
-  //  if null (default), $(&#39;html, body&#39;).firstScrollable() is used.
-  scrollElement: null,
-}</code></pre>
+<pre><code class="lang-javascript"><div id="highlighter_717549" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">{</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// jQuery set of elements you wish to scroll.</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">//&nbsp; if null (default), $('html, body').firstScrollable() is used.</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">scrollElement: </code><code class="keyword">null</code><code class="plain">,</code></div><div class="line number5 index4 alt2"><code class="plain">}</code></div></div></td></tr></tbody></table></div></code></pre>
 <h3>$.fn.scrollable</h3>
 <ul>
 <li>Selects the matched element(s) that are scrollable. Acts just like a
diff --git a/lib/tmpl/header.tpl b/lib/tmpl/header.tpl
@@ -32,6 +32,30 @@
   code {
     font-family: Monaco, Courier, monospace;
   }
+  .comment,
+  .comments {
+    color: #aaa;
+  }
+  .keyword {
+    color: blue;
+  }
+  .string {
+    color: #090;
+  }
+  .number {
+    color: #099;
+  }
+
+  td.gutter {
+    text-align: right;
+    padding-right: 3px;
+    padding-left: 3px;
+    background-color: #ddd;
+    color: #aaa;
+  }
+  td.code {
+    padding-left: 5px;
+  }
   h1, h2, h3 {
     font-weight: normal;
     color: #141414;
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "grunt-contrib-concat": "~0.1.2",
     "grunt-shell": "~0.2",
     "grunt-version": "~0.1.1",
-    "grunt-contrib-watch": "~0.3.1"
+    "grunt-contrib-watch": "~0.3.1",
+    "node-syntaxhighlighter": "~0.8.1"
   },
   "readmeFilename": "readme.md"
 }
