feat: show CSS code

site/common/styles/common.less

@@ -16,6 +16,10 @@
   overflow: hidden;
 }
 
+.sidebar {
+  padding-bottom: 50px;
+}
+
 .sidebar .chinese {
   font-size: 12px;
   margin-left: 6px;

site/component/Demo/index.jsx

@@ -20,13 +20,18 @@ export default class Demo extends React.Component {
   }
 
   render() {
-    const { id, preview, title, intro, code, expand } = this.props;
+    const { id, preview, title, intro, code, style, expand } = this.props;
     const introChildren = intro.map(utils.objectToComponent);
     const highlightedCode = hljs.highlight('javascript', code).value;
     return (
       <section className="code-box" id={id}>
         <section className="code-box-demo">
           { preview() }
+          {
+            !!style ?
+              <style dangerouslySetInnerHTML={{ __html: style }} /> :
+              null
+          }
         </section>
         <section className="code-box-meta markdown">
           <div className="code-box-title">
@@ -40,10 +45,21 @@ export default class Demo extends React.Component {
                   <code className="javascript" dangerouslySetInnerHTML={{
                     __html: highlightedCode,
                   }} />
-                  </pre>
-                </div>
-              </Collapse.Panel>
-            </Collapse>
+                </pre>
+              </div>
+              {
+                !!style ?
+                  <div className="highlight">
+                    <pre>
+                      <code className="css" dangerouslySetInnerHTML={{
+                        __html: hljs.highlight('css', style).value,
+                      }} />
+                    </pre>
+                  </div> :
+                  null
+              }
+            </Collapse.Panel>
+          </Collapse>
         </section>
       </section>
     );