Add code segment support

Author: savoygu

example/src/App.vue

@@ -246,6 +246,14 @@
         通过 <code>slot="table"</code> 添加表格， 通过 <code>class="vd-demo__table"</code> 设置表格样式，还可以通过 <code>class="vd-demo__new"</code> 增加特殊标识。
       </template>
     </vue-demonstration>
+    <vue-demonstration
+        anchor="zhan-shi-code"
+        :show-content="false"
+        :code="sourcecodeK">
+      <template slot="title">
+        展示代码 <i class="vd-demo__new">（1.0.2 新增）</i>
+      </template>
+    </vue-demonstration>
     <vue-demonstration
         anchor="attributes"
         title="Attributes"
@@ -273,7 +281,15 @@
             <td>string</td>
             <td>—</td>
             <td>—</td>
-          </tr><tr>
+          </tr>
+          <tr>
+            <td>code<i class="vd-demo__new">（1.0.2 新增）</i></td>
+            <td>要展示的代码片段</td>
+            <td>string</td>
+            <td>—</td>
+            <td>—</td>
+          </tr>
+          <tr>
             <td>tag</td>
             <td>标题标签</td>
             <td>string</td>
@@ -369,7 +385,8 @@
       sourcecodeG,
       sourcecodeH,
       sourcecodeI,
-      sourcecodeJ
+      sourcecodeJ,
+      sourcecodeK
   } from './template'
 
   export default {
@@ -385,7 +402,8 @@
         sourcecodeG,
         sourcecodeH,
         sourcecodeI,
-        sourcecodeJ
+        sourcecodeJ,
+        sourcecodeK
       }
     }
   }

example/src/template.js

@@ -261,4 +261,6 @@ export const sourcecodeJ = `<vue-demonstration
   <template slot="explanation">
     通过 <code>slot="table"</code> 添加表格， 通过 <code>class="vd-demo__table"</code> 设置表格样式，还可以通过 <code>class="vd-demo__new"</code> 增加特殊标识。
   </template>
-</vue-demonstration>`
+</vue-demonstration>`
+
+export const sourcecodeK = `import VueDemonstration from 'vue-demonstration'`

lib/vue-demonstration.js

@@ -6,10 +6,15 @@
         :tag="tag"
         :has-slot="!!$slots.title"></vd-demo-title>
     <vd-demo-description
-      :description="description"
-      :has-slot="!!$slots.description">
+        :description="description"
+        :has-slot="!!$slots.description">
     </vd-demo-description>
     <slot name="table"></slot>
+    <slot name="code">
+      <div class="vd-demo__code" v-if="code">
+        <pre v-highlightjs="code"><code class="html language-javascript"></code></pre>
+      </div>
+    </slot>
     <div class="vd-demo__content" v-if="showContent">
       <div class="vd-demo__source" :style="{padding: multiple ? '0' : '24px'}" ref="source">
         <slot name="source"></slot>
@@ -46,6 +51,7 @@
     props: {
       multiple: Boolean,
       highlight: String,
+      code: String,
       tag: {
         type: String,
         default: 'h3'
@@ -81,9 +87,9 @@
       if (source) {
         let blocks = source.querySelectorAll('.vd-demo__block-1')
         if (
-            blocks.length
-            && blocks.length % 2 === 1
-            && blocks.length - 2 > 0
+          blocks.length
+          && blocks.length % 2 === 1
+          && blocks.length - 2 > 0
         ) {
           blocks[blocks.length - 2].style.borderBottom = '1px solid #eff2f6'
         }
@@ -113,23 +119,23 @@
         },
         render (h) {
           return h(this.tag, {
-                  attrs: {
-                    id: this.anchor
-                  }
+              attrs: {
+                id: this.anchor
+              }
+            },
+            [
+              h('a', {
+                attrs: {
+                  href: '#' + this.anchor,
+                  'aria-hidden': true,
+                  class: 'header-anchor'
                 },
-                [
-                  h('a', {
-                    attrs: {
-                      href: '#' + this.anchor,
-                      'aria-hidden': true,
-                      class: 'header-anchor'
-                    },
-                    domProps: {
-                      innerHTML: '¶'
-                    }
-                  }),
-                  this.title ? this.title : (this.hasSlot ? this.$parent.$slots.title : '' )
-                ])
+                domProps: {
+                  innerHTML: '¶'
+                }
+              }),
+              this.title ? this.title : (this.hasSlot ? this.$parent.$slots.title : '' )
+            ])
         }
       },
       'vd-demo-description': {
@@ -161,6 +167,7 @@
 </script>
 <style lang="less" rel="stylesheet/less">
   @import "../styles/less/style";
+
   .vd-demo {
     width: 1000px;
     margin: 0 auto;
@@ -314,6 +321,21 @@
         line-height: 18px;
       }
     }
+    &__code {
+      pre {
+        .hljs {
+          line-height: 1.8;
+          font-family: Menlo, Monaco, Consolas, Courier, monospace;
+          font-size: 12px;
+          padding: 18px 24px;
+          background-color: #f9fafc;
+          border: 1px solid #eaeefb;
+          margin-bottom: 25px;
+          border-radius: 4px;
+          -webkit-font-smoothing: auto;
+        }
+      }
+    }
     &__highlight {
       width: 60%;
       border-right: 1px solid #eaeefb;