
.article {
  padding: 40px 20px;
  font-size: 1rem;
  line-height: 1.6;
  word-wrap: break-word;
  &:before {
    display: table;
    content: ""
  }
  &:after {
    display: table;
    clear: both;
    content: ""
  }
  &>*:first-child {
    margin-top: 0 !important
  }
  &>*:last-child {
    margin-bottom: 0 !important
  }
   a:not([href]) {
    color: inherit;
    text-decoration: none
  }
  strong,b{
    font-weight: 500;
  }
  h1,h2,h3,h4,h5,h6{
    margin-top: 1em;
    margin-bottom: 16px;
    font-weight: 500;
    line-height: 1.4
  }
  h1 {
    padding-bottom: 0.3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee
  }
  h2 {
    padding-bottom: 0.3em;
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee
  }
  h3 {
    font-size: 1.5em;
    line-height: 1.43
  }
  h4 {
    font-size: 1.25em
  }
  h5 {
    font-size: 1em
  }
  h6 {
    font-size: 1em;
    color: #777
  }
  p,blockquote,ul,ol,dl,table,pre {
    margin-top: 0;
    margin-bottom: 16px
  }
  hr {
    height: 4px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none
  }
  ul,ol {
    padding-left: 2em
  }
  ul {
    list-style: disc;
  }
  ol {
    list-style: decimal;
  }
  ul ul, ul ol, ol ol, ol ul {
    margin-top: 0;
    margin-bottom: 0
  }
  li{
    list-style: inherit;
    &>p {
      margin-top: 16px
    }
  }
  dl {
    padding: 0
  }
  dl dt {
    padding: 0;
    margin-top: 16px;
    font-size: 1em;
    font-style: italic;
    font-weight: bold
  }
  dl dd {
    padding: 0 16px;
    margin-bottom: 16px
  }
  blockquote {
    padding: 0 15px;
    color: #777;
    border-left: 4px solid #ddd;
    &>:first-child {
      margin-top: 0
    }
    &>:last-child {
        margin-bottom: 0
    }
  }
  table {
    display: block;
    width: 100%;
    overflow: auto;
    word-break: normal;
    word-break: keep-all;
    th {
        font-weight: bold
    }
    th, td {
        padding: 6px 13px;
        border: 1px solid #ddd
    }
    tr {
        background-color: #fff;
        border-top: 1px solid #ccc;
        &:nth-child(2n) {
            background-color: #f8f8f8
        }
    }
  }
  img {
      max-width: 100%;
      box-sizing: content-box;
      background-color: #fff
  }
  a {
    color: #4078c0;
    text-decoration: none;
    &:hover,
    &:active {
      text-decoration: underline
    }
  }
  code, tt {
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    font-size: 85%;
    background-color: rgb(245, 245, 245);
    border-radius: 3px
  }
  code:before, code:after, tt:before, tt:after {
    letter-spacing: -0.2em;
    content: "\00a0"
  }
  del code {
    text-decoration: inherit
  }
  pre {
    word-wrap: normal;
    code, tt {
        display: inline;
        max-width: initial;
        padding: 0;
        margin: 0;
        overflow: initial;
        line-height: inherit;
        word-wrap: normal;
        background-color: transparent;
        border: 0;
        &:before,&:after{
            content: normal
        }
    }
  }
}
//代码高亮
.highlight{
  counter-reset: section 0;
  word-break: normal;
  white-space: pre;
  margin-bottom: 2em;
  padding: 1em 0;
  font-family: monospace;
  background: #f8f8f8;
  overflow: auto;
  &>div{
    position: relative;
    counter-increment: section;
    padding: 6px 10px 6px 3em;
    min-height: 1em;
    line-height: 1em;
    &:before{
      content: counter(section);
      display: block;
      position: absolute;
      margin-left: -2em;
      color: #ddd;
    }
    &:hover{
      background: #eee;
      &:before{
        color: #aaa;
      }
    }
  }
  &.javascript {
    .comment{
      color: #969896;
    }
    .string{
      color: #183691
    }
    .global,
    .number{
      color:#0086b3
    }
    .keywords{
      color:#a71d5d;
    }
    .regex{
      color:#009a1a
    }
  }
  &.html{
    .comment{color:#999988;font-style:italic}
    .doctype{color:#008080}
    .tag{color: #881280;}
    .attribute{color: #008080; }
    .data {color:#d14}
    .string{color: #888}
  }
  &.css{
    .comment{color:#008000}
    .properties{color:#008080}
    .selectors{color:#800000}
    .units{color:#f00}
    .urls{color:#f0f}
    .colors{color:#808000}
    .important{color:#00f}
  }
}
