code snipple

components/button/demo.md

-# 基本型
-
----
-
-<button></button>

components/button/demo/basic.md

+# 基本型
+
+- description: 你说什么我听不清。
+
+---
+
+````html
+<button>按钮</button>
+````

static/code.jsx

 /*jshint ignore:start */
 var CodeBox = React.createClass({
+  getInitialState: function() {
+    return {
+      html: ''
+    };
+  },
+  componentDidMount: function() {
+    var that = this;
+    $.get('/' + this.props.src).then(function(data) {
+      that.setState({
+        html: data
+      });
+    });
+  },
   render: function() {
-    return <pre><code>{this.props.code}</code></pre>;
+    var html = this.state.html;
+    return (
+      <div className="code-box" dangerouslySetInnerHTML={{__html: html}}></div>
+    );
+  }
+});
+
+var CodeBoxes = React.createClass({
+  render: function() {
+    return (
+      <div className="code-boxes">
+        {this.props.children}
+      </div>
+    );
   }
 });

static/style.css

@@ -964,3 +964,22 @@ footer ul li > a {
   margin-left: 15px;
   font-weight: normal;
 }
+
+.code-boxes {
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  column-count: 2;
+  -moz-column-gap: 15px;
+  -webkit-column-gap: 15px;
+  column-gap: 15px;
+}
+
+.code-box {
+  border: 1px solid #E9E9E9;
+  border-radius: 6px;
+  padding: 15px;
+}
+
+.code-box pre code {
+  border: none;
+}

theme/templates/code.html

+<div class="code-box-container">
+  {{ post.html }}
+  <h4 class="code-box-title">{{ post.title }}</h4>
+  <p class="code-box-description">{{ post.meta.description }}</p>
+</div>

theme/templates/layout.html

@@ -89,11 +89,14 @@
         {%- endif %}
       </h1>
       {{ post.html }}
-      <CodeBox code="code"></CodeBox>
+      <h2>组件演示</h2>
       <div id="code-boxes"></div>
       <script type="text/jsx">
         React.render(
-          <CodeBox code="123"></CodeBox>,
+          <CodeBoxes>
+            <CodeBox src="components/button/demo/basic.html"></CodeBox>
+            <CodeBox src="components/button/demo/basic.html"></CodeBox>
+          </CodeBoxes>,
           document.getElementById('code-boxes')
         );
       </script>

theme/theme.js

@@ -13,6 +13,9 @@ module.exports = function(nico) {
     if (filepath === 'readme.md') {
       post.filename = post.meta.filename = 'index';
     }
+    if (filepath.indexOf('/demo/') > 0) {
+      post.template = post.meta.template = 'code';
+    }
     return post;
   };