update reference

css/style.css

@@ -1,10 +1,12 @@
-body {
+html, body {
+  overflow-x: hidden;
+  height: 100%;
   margin: 0;
   padding: 0;
   background-color: #D1D1BC;
   font-family: helvetica, arial, freesans, clean, sans-serif;
   font-size: 1em;
-  line-height: 2em;
+  line-height: 1.5em;
 }
 
 h1, h2, h3, h4, h5, h6, p {
@@ -40,15 +42,15 @@ h1#header {
   box-shadow: 0 1px 4px #000;
 }
 
-
 #container {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
   width: 960px;
   padding: 20px;
   margin: 0 auto;
   background-color: #fff;
   overflow: hidden;
-  min-height: 100%;
-  height: 100% !important;
 }
 
 
@@ -60,6 +62,7 @@ h1#header {
   color: #466964;
   font-weight: bold;
   font-size: 1.5em;
+  margin-bottom: 10px;
 }
 
 #leftColumn {
@@ -135,6 +138,51 @@ textarea#markdown {
   line-height: 1em;
 }
 
+ 
+table#reference {
+  width: 238px;
+  border: 1px #ddd solid;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+table#reference th {
+  border: #ddd solid;
+  border-width: 0 0 1px 1px;
+  background-color: #eee;
+  font-weight: bold;
+  line-height: 120%;
+  text-align: center;
+  padding: 5px;
+}
+
+table#reference td {
+  border: 1px #ddd solid;
+  border-width: 0 0 1px 1px;
+  text-align: center;
+  padding: 5px;
+}
+
+#reference p {
+  margin: 0;
+  padding: 0;
+}
+
+#reference ul, ol, blockquote {
+  margin: 0;
+}
+
+#reference h1,
+#reference h2,
+#reference h3,
+#reference h4,
+#reference h5,
+#reference h6 {
+  font-weight: bold;
+  color: #000;
+}
+
+
 #footer {
   clear: both;
   width: 100%;
@@ -143,7 +191,6 @@ textarea#markdown {
   color: #fff;
   line-height: 50px;
   text-align: center;
-
   -moz-box-shadow: 0 -1px 4px #000;
   -webkit-box-shadow: 0 -1px 4px #000;
   box-shadow: 0 -1px 4px #000;

index.html

@@ -42,9 +42,57 @@
      <div id="rightColumn">
        <div class="section">
          <h2>reference</h2>
-         <div id="reference">sorry, its todo</div>
-         <table>
-         
+         <table id="reference">
+           <tr>
+             <th>You type</th>
+             <th>You get</th>
+           </tr>
+
+           <tr>
+             <td># h1</td>
+             <td></td>
+           </tr>
+
+           <tr>
+             <td>*emphasis*</td>
+             <td></td>
+           </tr>
+
+           <tr>
+             <td>**strong**</td>
+             <td></td>
+           </tr>
+
+           <tr>
+             <td>* list</td>
+             <td></td>
+           </tr>
+
+           <tr>
+             <td>1. list</td>
+             <td></td>
+           </tr>
+
+           <tr>
+             <td>&gt; this is<br>&gt; quote</td>
+             <td><script type="text/javascript">document.write(markdown.toHTML("> this is\n\n> quote"))</script></td>
+           </tr>
+
+           <tr>
+             <td>    code<br>(4 spaces indent)</td>
+             <td><script type="text/javascript">document.write(markdown.toHTML("    code"))</script></td>
+           </tr>
+
+           <tr>
+             <td>[Wikipedia](http://wikipedia.org)</td>
+             <td></td>
+           </tr>
+
+           <tr>
+             <td>----</td>
+             <td></td>
+           </tr>
+
          </table>
        </div>
      </div>

js/main.js

@@ -16,6 +16,7 @@ var example = [
   "## thanks",
   "* [markdown-js](https://github.com/evilstreak/markdown-js)"
 ].join("\n");
+
 $(function() {
   $("#markdown").val(example);
   $("#output").html(markdown.toHTML(example));
@@ -23,4 +24,12 @@ $(function() {
   $("#markdown").bind("keyup", function() {
     $("#output").html(markdown.toHTML($("#markdown").val()));
   });
+
+  //reference
+  $("table#reference tr td:odd").each(function(index, element) {
+    var self = $(element);
+    if (self.html() === "") {
+      self.html(markdown.toHTML(self.siblings().html()));
+    }
+  });
 });