diff --git a/template/styl/index.styl b/template/styl/index.styl
index 87c2e7514c..13e939a6fc 100644
--- a/template/styl/index.styl
+++ b/template/styl/index.styl
@@ -24,6 +24,10 @@ a.github-corner {
     z-index 99
     width 70px
     height 70px
+    @media mq-mobile {
+      width 46px
+      height 46px
+    }
   }
 }
 a {
@@ -40,12 +44,10 @@ a {
   width 517px
   margin 0 auto 0
   padding 0 10px
-  .logo {
-    text-align center
-    padding-top 50px
-    padding-bottom 50px
+  .logo a {
+    display flex
   }
-  .box{
+  .box {
     position relative
   }
   .search {
@@ -73,7 +75,7 @@ a {
       width 100%
       padding 5px
       border-radius 5px 5px 5px 5px
-      li{
+      li {
         line-height 23px
         span{
           padding 0 8px
@@ -122,9 +124,7 @@ a {
       }
     }
     .enter-input {
-      width 1%
       white-space nowrap
-      vertical-align middle
       button {
         margin 0
         left -1px
@@ -149,25 +149,25 @@ a {
         border-radius 0 5px 5px 0
         border-color $border-color
         color #333
-        &:focus,&:active:focus{
+        &:focus,&:active:focus {
           outline thin dotted
           outline 5px auto -webkit-focus-ring-color
           outline-offset -2px
         }
-        &:active{
+        &:active {
           color #333
           background-color #e6e6e6
           border-color #b4b4b4
           background-image none
           box-shadow inset 0 8px 32px -8px rgba(0,0,0,0.3)
         }
-        &:focus{
+        &:focus {
           color #333
           background-color #e6e6e6
           border-color #999
           text-decoration none
         }
-        &:hover{
+        &:hover {
           color #333
           background-color #e6e6e6
           border-color #b4b4b4
@@ -177,7 +177,7 @@ a {
   }
 }
 
-.footer{
+.footer {
   text-align center
   padding-top 31px
   color #616161
@@ -190,7 +190,6 @@ a {
   }
 }
 
-
 .header.header_list {
   width auto
   position fixed
@@ -199,47 +198,41 @@ a {
   z-index 99
 }
 
-.header_list{
+.header_list {
   padding 10px 10px 10px 13px 
   border-bottom 1px solid #EEEEEE
-  .logo{
-    float left
-    padding-top 3px
-    padding-bottom 0
+  .logo {
     padding-right 24px
     text-align left
-    svg{
+    svg {
       height 37px
       width 136px
     }
   }
-  .search{
-    max-width 517px
-  }
-  .footer{
+  .footer {
     display none
   }
 }
 
-.search_list{
+.search_list {
   padding 79px 27px 
-  a{
+  a {
     font-size 16px
-    strong{
+    strong {
       font-weight bold
     }
-    .kw{
+    .kw {
       color #f00
       font-style inherit
       font-weight bold
     }
-    &:hover{
-      .kw{
+    &:hover {
+      .kw {
         color #333
       }
     }
   }
-  li{
+  li {
     padding 10px 0 10px 0
     list-style-type none
     p {
@@ -249,16 +242,15 @@ a {
   }
 }
 
-.hotlist{
+.hotlist {
   padding 79px 27px 
-  a{
+  a {
     font-size 16px
-    strong{
+    strong {
       font-weight bold
     }
-    &:hover{ }
   }
-  li{
+  li {
     padding 5px 0 5px 0
     list-style-type none
     p{
@@ -270,12 +262,10 @@ a {
 
 .header_list .header_inner {
   display: flex;
+  align-items: center;
   .search {
-    flex 1
-    max-width inherit
-    .enter-input button {
-      top -2px
-    }
+    flex: 1;
+    display: flex;
   }
 }
 
@@ -288,29 +278,28 @@ a {
   .header{
     width inherit
     .search .enter-input {
-      button{
-        padding: 9px 14px;
+      button {
+        padding 9px 14px
       }
     }
   }
-  .header_list{
-    .logo svg{
+  .header_list {
+    padding: 10px 10px 10px 13px
+    .logo {
+      float inherit
+      padding-right 10px
+      text-align center
+    }
+    .logo svg {
       width 96px
     }
     .search {
-      .query{
+      .query {
         line-height 31px
       }
     }
   }
-  .header_list .logo{
-    float inherit
-    padding-right 10px
-    padding-top 8px
-    padding-bottom 14px
-    text-align center
-  }
   .search_list, .hotlist {
-    padding 129px 27px
+    padding 78px 27px
   }
 }
\ No newline at end of file
diff --git a/template/styl/mixins/markdown.styl b/template/styl/mixins/markdown.styl
index 69e6d24135..64d2f549be 100644
--- a/template/styl/mixins/markdown.styl
+++ b/template/styl/mixins/markdown.styl
@@ -1,13 +1,13 @@
 
 mq-mobile = "screen and (max-width: 479px)"
 
-.edit_btn {
+.markdown-body .edit_btn {
   position relative
-  right 38px
+  right 20px
   float right
-  top 26px
+  top 16px
   z-index 2
-
+  font-size: 14px;
   @media mq-mobile {
     right 15px
   }
@@ -25,7 +25,7 @@ mq-mobile = "screen and (max-width: 479px)"
     color #fff
     border-radius 3px
     padding 2px 5px
-    &:hover{
+    &:hover {
       color #333
       background #e6e6e6
     }
@@ -39,252 +39,1009 @@ mq-mobile = "screen and (max-width: 479px)"
 }
 
 .markdown-body {
-  padding 70px 35px 30px 35px
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  padding 90px 35px 30px 35px
   max-width 980px
   margin 0 auto
-  word-wrap break-word
-  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  font-size 14px
-  line-height 1.6
-  color #333
+  color: #24292f;
+  background-color: #ffffff;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
   @media mq-mobile {
-    padding: 120px 15px 30px 15px;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    a {
-      float: left;
-      margin-left: -20px;
-      visibility: hidden;
-    }
-    &:hover a {
-      visibility: visible;
-    }
-  }
-  .icon.icon-link {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAABq0lEQVQoFYVSTUsCURR13sw4YGmb6AOiReDsXIfVImsXbdwEfiKTkESrgjZChNu0RUQYCCJ+LNzUppYm/YA2Lg1cRFgELbIGv0Y7F3pBIvbgcebee8559755gumf5fF4JgVBSPT7/U1gA5h0u90nwiidz+ebA7GEbYPoHDgP3AZGpVHCXq93BqIiSZIzm83WiOv1ehlykZFCRVH2QfpKp9Nv/ADEzzC0ijzBsVgsirIsrzscjhWQ6plM5onXgsGgCtEl8jd/ZgyHw9O6rl9hBucP2WCM7eXz+SSJut1uGfkPtL78KwyFQjOtVqsENyvIEbPZfN9sNndgUkMHlU6nc4daAzVXLperM3L2+/2z7Xab3GxUMAxDhmitUCjEQX4fFJGGBQKBKRDLcB4XRXEVbo8QLyG+xg1+AqmLF34SiWgx9J0ATnARJTHTIWIXBDHsLVVVF6k9qvFFv2MDbsd0Ek9qmmbFvA8wKPPcINLPbOCKx3gB7S1gvgpaPOW5YShBeIHCEd6kCd80UxSo48pjwwQ8J9nt9ni1WqV4F5ve5K3FYjlIpVKvnDQMvwFCU8QdZ5XDSAAAAABJRU5ErkJggg==");
-    width: 23px;
-    height: 23px;
-    display: inline-block;
-    vertical-align: middle;
-    background-repeat: no-repeat;
-    background-position: 4px 4px;
-  }
-
-  pre {
-    margin-top: 1.5em
-    margin-bottom: 1.5em
-    line-height: 1.3
-    word-break: break-all
-    word-wrap: break-word
-    color: rgb(51, 51, 51)
-    border: none
-    position: relative
-    background-color: #f7f7f9
-    border-radius: 3px
-    font-size: 0.93em
-    -webkit-overflow-scrolling: touch
-    code {
-      padding: 0.7em
-      overflow: auto
-      max-height: 35em
-      background-color transparent
-      color inherit
-      line-height 1.4
-      display block
-      font-size 0.93em
-      box-sizing: border-box
-      border-radius: 0px
-      white-space: inherit
-      overflow-wrap: normal
-      word-wrap: normal!important
-      font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-    }
-  }
-  .class-name {
-    color: #000896;
-  }
-  .comment,
-  .quote {
-    color: #998;
-  }
-
-  .keyword,
-  .selector-tag,
-  .subst {
-    color: #d73a49;
-  }
-
-  .key,
-  .number,
-  .literal,
-  .variable,
-  .template-variable,
-  .tag .attr {
-    color: #008080;
-  }
-
-  .string, .doctag {
-    color: #0065da;
-  }
-
-  .title,
-  .section,
-  .selector-id {
-    color: #900;
-    font-weight: bold;
-  }
-
-  .subst {
-    font-weight: normal;
-  }
-
-  .type,
-  .class .title {
-    color: #458;
-    font-weight: bold;
-  }
-
-  .function, .operator {
-    color: #000bc5;
-  }
-  .tag,
-  .name,
-  .attribute {
-    color: #002ade;
-    font-weight: normal;
-  }
-
-  .url {
-    color: #3c04ff;
-  }
-
-  .boolean {
-    color: #005cc5;
-  }
-
-  .property {
-    color: #032f62;
-  }
-
-  .null, .selector {
-    color: #005cc5;
-  }
-
-  .constant {
-    color: #d73a49;
-  }
-
-  .punctuation {
-    color: #A595A5;
-  }
-  .attr-name {
-    color: #8F4919;
-  }
-  .attr-value {
-    color: #13239F;
-  }
-  .tag {
-    .punctuation {
-      color: #A595A5;
-    }
-    .attr-name {
-      color: #8F4919;
-    }
-    .attr-value {
-      color: #13239F;
-    }
-    .attr-value .punctuation,
-    .script-punctuation {
-      color: #A595A5;
-    }
-    .script .keyword {
-      color: #090080;
-    }
-    .language-javascript {
-      color: #6f42c1;
-    }
-  }
-
-  .regexp, .regex,
-  .link {
-    color: #009926;
-  }
-
-  .symbol,
-  .bullet {
-    color: #990073;
-  }
-
-  .built_in,
-  .builtin-name {
-    color: #0086b3;
-  }
-
-  .meta {
-    color: #999;
-    font-weight: bold;
-  }
-
-  .deletion {
-    background: #fdd;
-  }
-
-  .addition {
-    background: #dfd;
-  }
-
-  .emphasis {
-    font-style: italic;
-  }
-
-  .strong {
-    font-weight: bold;
-  }
-  .shebang, .important {
-    color: #FF1717;
-  }
-  ul, ol {
-    padding-left: 2em;
-  }
-  blockquote {
-    margin: 0;
-  }
-  p, blockquote, ul, ol, dl, table, pre {
-    margin-top: 0;
-    margin-bottom: 16px;
-  }
-
-  blockquote {
-    padding: 0 1em;
-    color: #6a737d;
-    border-left: 0.25em solid #dfe2e5;
-  }
-
-  blockquote>:first-child {
-    margin-top: 0;
-  }
-
-  blockquote>:last-child {
-    margin-bottom: 0;
-  }
-  table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    td, th {
-      padding: 6px 13px;
-      border: 1px solid #dfe2e5;
-    }
-    tr {
-      background-color: #fff;
-      border-top: 1px solid #c6cbd1;
-    }
-  }
-  code {
-    padding: .2em .4em;
-    margin: 0;
-    font-size: 85%;
-    background-color: #f0f0f5;
-    border-radius: 3px;
-    margin: 0 .4em;
+    padding: 70px 15px 30px 15px;
   }
 }
+
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body .octicon-video {
+  border: 1px solid #d0d7de !important;
+  border-radius: 6px !important;
+  display: block;
+}
+
+.markdown-body .octicon-video summary {
+  border-bottom: 1px solid #d0d7de !important;
+  padding: 8px 16px !important;
+  cursor: pointer;
+}
+.markdown-body .octicon-video > video {
+  display: block !important;
+  max-width: 100% !important;
+  padding: 2px;
+  box-sizing: border-box;
+}
+.markdown-body details.octicon-video:not([open])>*:not(summary) {
+  display: none !important;
+}
+.markdown-body details.octicon-video:not([open]) > summary {
+  border-bottom: 0 !important;
+}
+.markdown-body .octicon-video summary > svg + span {
+  margin: 4px !important;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+}
+
+.markdown-body details,
+.markdown-body figcaption,
+.markdown-body figure {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body a {
+  background-color: transparent;
+  color: #0969da;
+  text-decoration: none;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body abbr[title] {
+  border-bottom: none;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+.markdown-body b,
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body dfn {
+  font-style: italic;
+}
+
+.markdown-body h1 {
+  margin: .67em 0;
+  font-weight: 600;
+  padding-bottom: .3em;
+  font-size: 2em;
+  border-bottom: 1px solid hsla(210,18%,87%,1);
+}
+
+.markdown-body mark {
+  background-color: #ff0;
+  color: #24292f;
+}
+
+.markdown-body small {
+  font-size: 90%;
+}
+
+.markdown-body sub,
+.markdown-body sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.markdown-body sub {
+  bottom: -0.25em;
+}
+
+.markdown-body sup {
+  top: -0.5em;
+}
+
+.markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: #ffffff;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre,
+.markdown-body samp {
+  font-family: monospace,monospace;
+  font-size: 1em;
+}
+
+.markdown-body figure {
+  margin: 1em 40px;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid hsla(210,18%,87%,1);
+  height: .25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #d0d7de;
+  border: 0;
+}
+
+.markdown-body html [type=button],
+.markdown-body [type=reset],
+.markdown-body [type=submit] {
+  -webkit-appearance: button;
+}
+
+.markdown-body [type=button]::-moz-focus-inner,
+.markdown-body [type=reset]::-moz-focus-inner,
+.markdown-body [type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.markdown-body [type=button]:-moz-focusring,
+.markdown-body [type=reset]:-moz-focusring,
+.markdown-body [type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+.markdown-body [type=checkbox],
+.markdown-body [type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body [type=number]::-webkit-inner-spin-button,
+.markdown-body [type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.markdown-body [type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+.markdown-body [type=search]::-webkit-search-cancel-button,
+.markdown-body [type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.markdown-body ::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54;
+}
+
+.markdown-body ::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body hr::before {
+  display: table;
+  content: "";
+}
+
+.markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body details:not([open])>*:not(summary) {
+  display: none !important;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  line-height: 10px;
+  color: #24292f;
+  vertical-align: middle;
+  background-color: #f6f8fa;
+  border: solid 1px rgba(175,184,193,0.2);
+  border-bottom-color: rgba(175,184,193,0.2);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2);
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h2 {
+  font-weight: 600;
+  padding-bottom: .3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid hsla(210,18%,87%,1);
+}
+
+.markdown-body h3 {
+  font-weight: 600;
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-weight: 600;
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-weight: 600;
+  font-size: .875em;
+}
+
+.markdown-body h6 {
+  font-weight: 600;
+  font-size: .85em;
+  color: #57606a;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: #57606a;
+  border-left: .25em solid #d0d7de;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body tt,
+.markdown-body code {
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-size: 12px;
+  word-wrap: normal;
+}
+
+.markdown-body :-ms-input-placeholder {
+  color: #6e7781;
+  opacity: 1;
+}
+
+.markdown-body ::-ms-input-placeholder {
+  color: #6e7781;
+  opacity: 1;
+}
+
+.markdown-body ::placeholder {
+  color: #6e7781;
+  opacity: 1;
+}
+
+.markdown-body .pl-c {
+  color: #6e7781;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: #0550ae;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: #8250df;
+}
+
+.markdown-body .pl-smi,
+.markdown-body .pl-s .pl-s1 {
+  color: #24292f;
+}
+
+.markdown-body .pl-ent {
+  color: #116329;
+}
+
+.markdown-body .pl-k {
+  color: #cf222e;
+}
+
+.markdown-body .pl-s,
+.markdown-body .pl-pds,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sre,
+.markdown-body .pl-sr .pl-sra {
+  color: #0a3069;
+}
+
+.markdown-body .pl-v,
+.markdown-body .pl-smw {
+  color: #953800;
+}
+
+.markdown-body .pl-bu {
+  color: #82071e;
+}
+
+.markdown-body .pl-ii {
+  color: #f6f8fa;
+  background-color: #82071e;
+}
+
+.markdown-body .pl-c2 {
+  color: #f6f8fa;
+  background-color: #cf222e;
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: bold;
+  color: #116329;
+}
+
+.markdown-body .pl-ml {
+  color: #3b2300;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: bold;
+  color: #0550ae;
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: #24292f;
+}
+
+.markdown-body .pl-mb {
+  font-weight: bold;
+  color: #24292f;
+}
+
+.markdown-body .pl-md {
+  color: #82071e;
+  background-color: #FFEBE9;
+}
+
+.markdown-body .pl-mi1 {
+  color: #116329;
+  background-color: #dafbe1;
+}
+
+.markdown-body .pl-mc {
+  color: #953800;
+  background-color: #ffd8b5;
+}
+
+.markdown-body .pl-mi2 {
+  color: #eaeef2;
+  background-color: #0550ae;
+}
+
+.markdown-body .pl-mdr {
+  font-weight: bold;
+  color: #8250df;
+}
+
+.markdown-body .pl-ba {
+  color: #57606a;
+}
+
+.markdown-body .pl-sg {
+  color: #8c959f;
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: #0a3069;
+}
+
+.markdown-body [data-catalyst] {
+  display: block;
+}
+
+.markdown-body g-emoji {
+  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 1em;
+  font-style: normal !important;
+  font-weight: 400;
+  line-height: 1;
+  vertical-align: -0.075em;
+}
+
+.markdown-body g-emoji img {
+  width: 1em;
+  height: 1em;
+}
+
+.markdown-body::before {
+  display: table;
+  content: "";
+}
+
+.markdown-body::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.markdown-body>*:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body>*:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body .absent {
+  color: #cf222e;
+}
+
+.markdown-body .anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body blockquote>:first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body sup>a::before {
+  content: "[";
+}
+
+.markdown-body sup>a::after {
+  content: "]";
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: #24292f;
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  padding: 0 .2em;
+  font-size: inherit;
+}
+
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+
+.markdown-body ol[type="1"] {
+  list-style-type: decimal;
+}
+
+.markdown-body ol[type=a] {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body ol[type=i] {
+  list-style-type: lower-roman;
+}
+
+.markdown-body div>ol:not([type]) {
+  list-style-type: decimal;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li>p {
+  margin-top: 16px;
+}
+
+.markdown-body li+li {
+  margin-top: .25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid #d0d7de;
+}
+
+.markdown-body table tr {
+  background-color: #ffffff;
+  border-top: 1px solid hsla(210,18%,87%,1);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body table img {
+  background-color: transparent;
+}
+
+.markdown-body img[align=right] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align=left] {
+  padding-right: 20px;
+}
+
+.markdown-body .emoji {
+  max-width: none;
+  vertical-align: text-top;
+  background-color: transparent;
+}
+
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+
+.markdown-body span.frame>span {
+  display: block;
+  float: left;
+  width: auto;
+  padding: 7px;
+  margin: 13px 0 0;
+  overflow: hidden;
+  border: 1px solid #d0d7de;
+}
+
+.markdown-body span.frame span img {
+  display: block;
+  float: left;
+}
+
+.markdown-body span.frame span span {
+  display: block;
+  padding: 5px 0 0;
+  clear: both;
+  color: #24292f;
+}
+
+.markdown-body span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-center>span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.markdown-body span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.markdown-body span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-right>span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+
+.markdown-body span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+
+.markdown-body span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-right>span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body code,
+.markdown-body tt {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(175,184,193,0.2);
+  border-radius: 6px;
+}
+
+.markdown-body code br,
+.markdown-body tt br {
+  display: none;
+}
+
+.markdown-body del code {
+  text-decoration: inherit;
+}
+
+.markdown-body pre code {
+  font-size: 100%;
+}
+
+.markdown-body pre>code {
+  padding: 0;
+  margin: 0;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+
+.markdown-body pre code,
+.markdown-body pre tt {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+  padding: 5px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.markdown-body .csv-data .blob-num {
+  padding: 10px 8px 9px;
+  text-align: right;
+  background: #ffffff;
+  border: 0;
+}
+
+.markdown-body .csv-data tr {
+  border-top: 0;
+}
+
+.markdown-body .csv-data th {
+  font-weight: 600;
+  background: #f6f8fa;
+  border-top: 0;
+}
+
+.markdown-body .footnotes {
+  font-size: 12px;
+  color: #57606a;
+  border-top: 1px solid #d0d7de;
+}
+
+.markdown-body .footnotes ol {
+  padding-left: 16px;
+}
+
+.markdown-body .footnotes li {
+  position: relative;
+}
+
+.markdown-body .footnotes li:target::before {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  bottom: -8px;
+  left: -24px;
+  pointer-events: none;
+  content: "";
+  border: 2px solid #0969da;
+  border-radius: 6px;
+}
+
+.markdown-body .footnotes li:target {
+  color: #24292f;
+}
+
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+  font-family: monospace;
+}
+
+.markdown-body [hidden] {
+  display: none !important;
+}
+
+.markdown-body ::-webkit-calendar-picker-indicator {
+  filter: invert(50%);
+}
+
+
+
+
+.markdown-body .token.tag .attr-value {
+  color: #032f62;
+}
+.markdown-body .token.property,
+.markdown-body .token.tag,
+.markdown-body .token.boolean,
+.markdown-body .token.number,
+.markdown-body .token.function-name,
+.markdown-body .token.constant,
+.markdown-body .token.symbol,
+.markdown-body .token.deleted {
+  color: #0060c9;
+}
+.markdown-body .token.punctuation {
+  color: #a0a0a0;
+}
+.markdown-body code[class*="language-"] {
+  color: black;
+}
+.markdown-body code[class*="language-"] .token.selector,
+.markdown-body code[class*="language-"] .token.attr-name,
+.markdown-body code[class*="language-"] .token.string,
+.markdown-body code[class*="language-"] .token.char,
+.markdown-body code[class*="language-"] .token.function,
+.markdown-body code[class*="language-"] .token.builtin {
+  color: #6f42c1;
+}
+.markdown-body code[class*="language-"] .token.inserted {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.markdown-body code[class*="language-"] .token.deleted {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+.markdown-body code[class*="language-"] .token.class-name {
+  color: #6f42c1;
+}
+.markdown-body code[class*="language-"] .code-block {
+  color: #032f62;
+}
+.markdown-body code[class*="language-"] .token.comment,
+.markdown-body code[class*="language-"] .token.block-comment,
+.markdown-body code[class*="language-"] .token.prolog,
+.markdown-body code[class*="language-"] .token.doctype,
+.markdown-body code[class*="language-"] .token.cdata {
+  color: #7D8B99;
+}
+.markdown-body code[class*="language-"] .token.punctuation {
+  color: #a0a0a0;
+}
+.markdown-body code[class*="language-"] .token.operator,
+.markdown-body code[class*="language-"] .token.entity,
+.markdown-body code[class*="language-"] .token.url,
+.markdown-body code[class*="language-"] .token.variable {
+  color: #d73a49;
+  background: rgba(255, 255, 255, 0.5);
+}
+.markdown-body code[class*="language-"] .token.atrule,
+.markdown-body code[class*="language-"] .token.attr-value {
+  color: #004698;
+}
+.markdown-body code[class*="language-"] .token.keyword {
+  color: #d63200;
+}
+.markdown-body code[class*="language-"] .token.regex,
+.markdown-body code[class*="language-"] .token.important {
+  color: #e90;
+}
+.markdown-body code[class*="language-"] .token.string {
+  color: #0a53c1;
+}
diff --git a/template/styl/mixins/reset.styl b/template/styl/mixins/reset.styl
index 8c5aca08bb..7cf791f48d 100644
--- a/template/styl/mixins/reset.styl
+++ b/template/styl/mixins/reset.styl
@@ -1,17 +1,17 @@
-body,html,ul,li,p{
+body,html,ul,li,p {
   margin 0
   padding 0
 }
-body,html{
+body,html {
   font-size 12px
   font-family 'HanHei SC','PingFang SC','Helvetica Neue','Helvetica','STHeitiSC-Light','Arial',sans-serif
 }
-html{
+html {
   -webkit-tap-highlight-color rgba(0,0,0,0)
 }
 a {
   text-decoration none
-  &:hover{
+  &:hover {
     color #333
   }
 }