some fix

page/page.css

@@ -37,11 +37,20 @@ p {
   margin: 0px;
 }
 #readme {
-  padding: 6px;
+  padding: 10px;
+}
+#readme p {
+  line-height: 10px;
 }
 #readme h1 {
   font-size: 20px;
 }
+#readme h3 {
+  margin: -10px 0px;
+}
+#readme code {
+  display: inline-block;
+}
 #click {
   background: #fad1d1;
 }

readme.md

@@ -18,6 +18,14 @@ Originally parsted on Gist: https://gist.github.com/2498711
 After a long time, I found it was almost what I wanted.  
 So I will make it a repo, hope it helps.  
 
+### Referece and Thanks
+
+I used `highlight.js` to highlight my CoffeeScript source code:  
+https://github.com/isagalaev/highlight.js
+
+And `pagedown` to render README file into HTML:  
+http://code.google.com/p/pagedown/wiki/PageDown
+
 ### License
 
 MIT

src/handle.coffee

@@ -56,7 +56,7 @@ window.onload = ->
           @text "This is all my code for implementing Lilyturf:"
         @pre id: "source",
           @code class: "coffeescript",
-            @text res.target.response
+            @html res.target.response
     (q "#code").insertAdjacentHTML "beforeend", block
     hljs.highlightBlock (q "#code").querySelector("pre")
 

src/lilyturf.coffee

@@ -15,7 +15,12 @@ lilyturf =
       attrs = ""
       for key, value of obj then attrs += " #{key}='#{value}'"
       attrs
-    text: (text) -> text
+    text: (text) ->
+      text
+        .replace(/&/g,"&")
+        .replace(/</g,"&lt;")
+        .replace(/>/g,"&gt;")
+        .replace(/ /,"&nbsp;")
     html: (html) -> html
 
   dom_way:

src/page.styl

@@ -38,10 +38,19 @@ p
   margin 0px
 
 #readme
-  padding 6px
+  padding 10px
+
+  p
+    line-height 10px
 
   h1
     font-size 20px
 
+  h3
+    margin -10px 0px
+
+  code
+    display inline-block
+
 #click
   background hsl(0,80,90)