added ssjs syntax highlighting and fixed date on isNaN article

boazsender · Jun 1, 2010 · 0074604 · 0074604
1 parent c21eda1
commit 0074604
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 20 deletions.
diff --git a/lib/wtfjs/post.js b/lib/wtfjs/post.js
@@ -1,7 +1,7 @@
-var sd = require("showdown")
-,   fs = require("fs")
+var fs = require("fs")
 ,   sys = require("sys")
 ,   path = require("path")
+,   md2html = require("showdown").md2html
 ,   prettyfy = require('prettyfy').prettyPrintOne;
 
 
@@ -47,11 +47,16 @@ exports.Post.prototype = {
         return '<a href="' + this.url() + '">' + this.title() + '</a>';
     },
     html: function() {
+        // read in the post text
         var p = path.normalize(path.join(__dirname, "..", "..", "posts", this.filename))
         ,   t = fs.readFileSync(p);
 
-        // TODO, replace snippets code = prettyfy(sd.md2html(t));
-
-        return sd.md2html(t);
+        // replace the raw code blocks with prettyfied html
+        t = t.replace(/<code>[^<]+<\/code>/g, function(code) {
+            return "<pre><code>" + prettyfy(code.match(/<code>([\s\S]+)<\/code>/)[1]) + "</code></pre>";
+        });
+
+        // return markdown to html  
+        return md2html(t);
     }
 };
diff --git a/lib/wtfjs/public/app.css b/lib/wtfjs/public/app.css
@@ -20,6 +20,8 @@ pre {
     border-radius:5px;
     -moz-border-radius: 5px;
     padding:10px 10px 20px 0;
+    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#0F2925));
+    background:-moz-linear-gradient(top, #000, #0F2925);
 }
 
 hr {
@@ -143,4 +145,14 @@ hr {
 
 .date {
   color: #666666;
-}
+}
+
+/* google code prettyfy classes */
+.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
+
+/* jacked up google code prettyfy classes */
+.lit,.typ {color:#009D57;}
+.com { color: #666;    }
+.pln { color: #C0C0C0; }
+.kwd { color: #4169E1; }
+.tag { color: #4169E1; }
diff --git a/lib/wtfjs/public/app.js b/lib/wtfjs/public/app.js
@@ -1,4 +1,4 @@
-$(function(){
+/*$(function(){
     // change <code> into <pre class="sh_javascript_dom">
     $('code').each(function(){
         var node = $(this)
@@ -16,4 +16,4 @@ $(function(){
     
     // invoke clientside syntax highlighter
     sh_highlightDocument();
-});
+});*/
diff --git a/lib/wtfjs/public/shjs/sh_darkblue.min.css b/lib/wtfjs/public/shjs/sh_darkblue.min.css
diff --git a/lib/wtfjs/public/shjs/sh_javascript_dom.min.js b/lib/wtfjs/public/shjs/sh_javascript_dom.min.js
diff --git a/lib/wtfjs/public/shjs/sh_main.min.js b/lib/wtfjs/public/shjs/sh_main.min.js
diff --git a/lib/wtfjs/public/shjs/sh_sh.min.js b/lib/wtfjs/public/shjs/sh_sh.min.js
diff --git a/lib/wtfjs/views/layout.html.ejs b/lib/wtfjs/views/layout.html.ejs
@@ -3,7 +3,6 @@
     <head>
         <title>WTFJS</title>
         <link rel="stylesheet" href="/public/app.css" type="text/css" charset="utf-8" />
-        <link rel="stylesheet" href="/public/shjs/sh_darkblue.min.css" type="text/css" charset="utf-8" />
         <link rel="alternate" type="application/rss+xml" title="RSS Feed for http://wtfjs.com" href="/rss/" />
         <link rel="icon" href="/public/favicon.ico" type="image/x-icon" /> 
         <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon" />

diff --git a/lib/wtfjs/wtf.js b/lib/wtfjs/wtf.js
@@ -26,11 +26,11 @@ var paginate = function(page) {
         ,   end   = start >= count ? start+count : count;
 
         self.render('index.html.ejs', {locals:{ 
-            posts: posts.slice(start, end),
+            posts:    posts.slice(start, end),
+            page:     cur,
+            max:      max,
             nextPage: next > max ? max : next,
-            prevPage: prev == 0 ? 1 : prev,
-            page: cur,
-            max: max
+            prevPage: prev == 0 ? 1 : prev
         }});
     });
 };

diff --git a/posts/2010-02-24-messing-with-number-prototype.md b/posts/2010-02-24-messing-with-number-prototype.md
@@ -2,8 +2,12 @@
 
 <code>
     (1) === 1; // true
+
     Number.prototype.isOne = function () { return this === 1; }
+
     (1).isOne(); // false!
+
     Number.prototype.reallyIsOne = function () { return this - 1 === 0; }
+
     (1).reallyIsOne(); // true
 </code>
diff --git a/posts/2010-04-31-isNaN.md b/posts/2010-04-31-isNaN.md
@@ -0,0 +1,16 @@
+So, [null is not an object](http://wtfjs.com/2010/02/12/null-is-not-an-object) though sometimes null is a Number.
+
+<code>
+    isNaN( null ); // false
+    null === NaN; // false
+    null == NaN; // false
+</code>
+
+isNaN converts null to number.
+
+<code>
+  Number( null ); // 0
+</code>
+
+But WTF. :) - [@oleg008](http://twitter.com/oleg008)
+
diff --git a/posts/2010-04-31-syntax-highlighting-serverside-with-google-prettyfy.md b/posts/2010-04-31-syntax-highlighting-serverside-with-google-prettyfy.md
@@ -0,0 +1,12 @@
+This is much more awesome. I have to thank the guys at [HowToNode.org](http://howtonode.org) for the idea in thier [WheatJS](http://github.com/creationix/wheat) static site blog engine. Essentially, it all boils down to running the rather awesome [Google Code Prettyfy](http://code.google.com/p/google-code-prettify/) _serverside_.
+
+The only remaining problem with the syntax highlighting is now nested &lt;code&gt; elements have to be escaped to display correctly in the final render. 
+
+<code>
+    // replace the raw code blocks with prettyfied html
+    t = t.replace(/&lt;code&gt;[^&lt;]+&lt;\/code&gt;/g, function(code) {
+        return prettyfy(code.match(/&lt;code&gt;([\s\S]+)&lt;\/code&gt;/)[1]);
+    });    
+</code>
+
+Perhaps, in the future, a quick routine to fetch only the root code elements rather than blinding fetching all of them. Problem: more solved than before!