diy_markdown 的 html 显示

参考： https://www.cnblogs.com/zhangjk1993/p/5442676.html#_label2

1. 直接在 App.vue 引入

2. 在工程项目中 编写 样式

3. 给显示 markdown 的标签加上 class="diy_markdown" 即可

4. 显示效果

5. diy_markdown.styl

• .diy_markdown
    color #444444
    h1,
    h2,
    h3,
    h4
      color #111111
      font-weight 400
      margin-top 1em
  
    h1,
    h2,
    h3,
    h4,
    h5,
    p ,
    dl
      margin-bottom 16px
      padding 0
  
    h1
      font-size 28px
      line-height 54px
  
    h2
      font-size 24px
      line-height 42px
  
    h1,
    h2
      border-bottom 1px solid #EFEAEA
      padding-bottom 10px
  
    h3
      font-size 18px
      line-height 30px
  
    h4
      font-size 16px
      line-height 26px
  
    h5
      font-size 14px
      list-style 23px
  
    a
      color #0099ff
      margin 0
      padding 0
      vertical-align baseline
  
    a:hover
      text-decoration none
      color #ff6600
  
    ul,
    ol
      padding 0
      padding-left 24px
      margin 0
  
    li
      line-height 24px
  
    p,
    ul,
    ol
      font-size 16px
      line-height 24px
  
  
    ol ol,
    ul ol
      list-style-type lower-roman
  
    code,
    pre
      border-radius 3px
      background-color #f7f7f7
      color inherit
  
  
    code
      font-family Consolas, Monaco, Andale Mono, monospace
      margin 0 2px
  
    pre
      line-height 1.7em
      overflow auto
      padding 6px 10px
      border-left 5px solid #6CE26C
  
    pre
      > code
        border 0
        display inline
        max-width initial
        padding 0
        margin 0
        overflow initial
        line-height inherit
        font-size .85em
        white-space pre
        background 0 0
  
    code
      color #666555
  
    aside
      display block
      float right
      width 390px
  
    blockquote
      border-left .5em solid #eee
      padding 0 0 0 2em
      margin-left 0
  
    blockquote  cite
      font-size 14px
      line-height 20px
      color #bfbfbf
  
    blockquote cite:before
      content '2014 0A0'
  
    blockquote p
      color #666
  
    hr
      text-align left
      color #999
      height 2px
      padding 0
      margin 16px 0
      background-color #e7e7e7
      border 0 none
  
    dl
      padding 0
  
    dl
      dt
        padding 10px 0
        margin-top 16px
        font-size 1em
        font-style italic
        font-weight bold
  
    dl
      dd
        padding 0 16px
        margin-bottom 16px
  
    dd
      margin-left 0
  
    /* Code below this line is copyright Twitter Inc. */
  
    button,
    input,
    select,
    textarea
      font-size 100%
      margin 0
      vertical-align baseline
  
    button, input
      line-height normal
  
    button::-moz-focus-inner,
           input::-moz-focus-inner
             border 0
             padding 0
  
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"]
      cursor pointer
      -webkit-appearance button
  
    input[type=checkbox],
    input[type=radio]
      cursor pointer
  
    /* override default chrome & firefox settings */
    input:not([type="image"]),
    textarea
      -webkit-box-sizing content-box
      -moz-box-sizing content-box
      box-sizing content-box
  
  
    input[type="search"]
      -webkit-appearance textfield
      -webkit-box-sizing content-box
      -moz-box-sizing content-box
      box-sizing content-box
  
    input[type="search"]::-webkit-search-decoration
      -webkit-appearance: none
  
    label,
    input,
    select,
    textarea
      font-size 13px
      font-weight normal
      line-height normal
      margin-bottom 18px
  
    input[type=checkbox],
    input[type=radio]
      cursor pointer
      margin-bottom 0
  
    input[type=text],
    input[type=password],
    textarea,
    select
      display inline-block
      width 210px
      padding 4px
      font-size 13px
      font-weight normal
      line-height 18px
      height 18px
      color #808080
      border 1px solid #ccc
      -webkit-border-radius 3px
      -moz-border-radius 3px
      border-radius 3px
  
    select,
    input[type=file]
      height 27px
      line-height 27px
  
    textarea
      height auto
  
    /* grey out placeholders */
    :-moz-placeholder
      color #bfbfbf
  
    ::-webkit-input-placeholder
      color #bfbfbf
  
    input[type=text],
    input[type=password],
    select,
    textarea
      -webkit-transition border linear 0.2s, box-shadow linear 0.2s
      -moz-transition border linear 0.2s, box-shadow linear 0.2s
      transition border linear 0.2s, box-shadow linear 0.2s
      -webkit-box-shadow inset 0 1px 3px rgba(0, 0, 0, 0.1)
      -moz-box-shadow inset 0 1px 3px rgba(0, 0, 0, 0.1)
      box-shadow inset 0 1px 3px rgba(0, 0, 0, 0.1)
  
    input[type=text]:focus,
    input[type=password]:focus,
    textarea:focus
      outline none
      border-color rgba(82, 168, 236, 0.8)
      -webkit-box-shadow inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)
      -moz-box-shadow inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)
      box-shadow inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)
  
    /* buttons */
    button
      display inline-block
      padding 4px 14px
      font-size 13px
      line-height 18px
      -webkit-border-radius 4px
      -moz-border-radius 4px
      border-radius 4px
      -webkit-box-shadow inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
      -moz-box-shadow inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
      box-shadow inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
      background-color #0064cd
      background-repeat repeat-x
      background-image -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd))
      background-image -moz-linear-gradient(to top, #049cdb, #0064cd)
      background-image -ms-linear-gradient(to top, #049cdb, #0064cd)
      background-image -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd))
      background-image -webkit-linear-gradient(to top, #049cdb, #0064cd)
      background-image -o-linear-gradient(to top, #049cdb, #0064cd)
      background-image linear-gradient(to top, #049cdb, #0064cd)
      color #fff
      text-shadow 0 -1px 0 rgba(0, 0, 0, 0.25)
      border 1px solid #004b9a
      border-bottom-color #003f81
      -webkit-transition 0.1s linear all
      -moz-transition 0.1s linear all
      transition 0.1s linear all
      border-color #0064cd #0064cd #003f81
      border-color rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
      &:hover
        color #fff
        background-position 0 -15px
        text-decoration none
      &:active
        -webkit-box-shadow inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05)
        -moz-box-shadow inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05)
        box-shadow inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05)
      &::-moz-focus-inner
        padding 0
        border 0
  
    table td,
    .table th
      border-left 1px solid #ccc
      border-top 1px solid #ccc
      padding 10px
      text-align left
  
    table
      width 100%
      border-spacing 0
      border solid #ccc 1px
      -moz-border-radius 6px
      -webkit-border-radius 6px
      border-radius 6px
      tr:hover
        background #fbf8e9
        -o-transition all 0.1s ease-in-out
        -webkit-transition all 0.1s ease-in-out
        -moz-transition all 0.1s ease-in-out
        -ms-transition all 0.1s ease-in-out
        transition all 0.1s ease-in-out
      th
        background-color #dce9f9
        background-image -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9))
        background-image -webkit-linear-gradient(to top, #ebf3fc, #dce9f9)
        background-image    -moz-linear-gradient(to top, #ebf3fc, #dce9f9)
        background-image     -ms-linear-gradient(to top, #ebf3fc, #dce9f9)
        background-image      -o-linear-gradient(to top, #ebf3fc, #dce9f9)
        background-image         linear-gradient(to top, #ebf3fc, #dce9f9)
        border-top none
        text-shadow 0 1px 0 rgba(255,255,255,.5)
        padding 5px
      td:first-child,
      th:first-child
        border-left none
      th:first-child
        -moz-border-radius 6px 0 0 0
        -webkit-border-radius 6px 0 0 0
        border-radius 6px 0 0 0
      th:last-child
        -moz-border-radius 0 6px 0 0
        -webkit-border-radius 0 6px 0 0
        border-radius 0 6px 0 0
      th:only-child
        -moz-border-radius 6px 6px 0 0
        -webkit-border-radius 6px 6px 0 0
        border-radius 6px 6px 0 0
      tr:last-child
        td:first-child
          -moz-border-radius 0 0 0 6px
          -webkit-border-radius 0 0 0 6px
          border-radius 0 0 0 6px
        td:last-child
          -moz-border-radius 0 0 6px 0
          -webkit-border-radius 0 0 6px 0
          border-radius 0 0 6px 0