:host ::ng-deep {
  .markdown, .editor-preview, .editor-preview-side {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.8;

    .material-icons {
      font-size: 14px;
    }

    kbd {
      display: inline-block;
      padding: 3px 5px;
      font-size: 11px;
      line-height: 10px;
      color: #444d56;
      vertical-align: middle;
      background-color: #fafbfc;
      border: solid 1px #c6cbd1;
      border-bottom-color: #959da5;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #959da5
    }

    pre code {
      display: block;
      background: white;
      color: rgba(0, 0, 0, 0.65);
      line-height: 1.7;
      border: 1px solid #e9e9e9;
      padding: 10px 15px;
      border-radius: 4px;
      font-size: 13px;
      white-space: pre;
      font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    }

    code[class*="language-"] {
      color: black;
      background: none;
      text-shadow: 0 1px white;
      font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      direction: ltr;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.5;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    pre[class*="language-"] {
      color: black;
      background: none;
      text-shadow: 0 1px white;
      font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      direction: ltr;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.5;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      &::-moz-selection, ::-moz-selection {
        text-shadow: none;
        background: #b3d4fc;
      }
    }

    code[class*="language-"] {
      &::-moz-selection, ::-moz-selection {
        text-shadow: none;
        background: #b3d4fc;
      }
    }

    pre[class*="language-"] {
      &::selection, ::selection {
        text-shadow: none;
        background: #b3d4fc;
      }
    }

    code[class*="language-"] {
      &::selection, ::selection {
        text-shadow: none;
        background: #b3d4fc;
      }
    }

    @media print {
      code[class*="language-"], pre[class*="language-"] {
        text-shadow: none;
      }
    }

    /* Code blocks */

    pre[class*="language-"] {
      padding: 1em;
      margin: 1.2em 0;
      overflow: auto;
    }

    :not(pre) > code[class*="language-"], pre[class*="language-"] {
      background: #f7f7f7;
    }

    :not(pre) > code[class*="language-"] {
      padding: .1em;
      border-radius: .3em;
      white-space: normal;
    }

    img {
      vertical-align: middle;
      max-width: 100%;
    }
    h1 {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 400;
      line-height: 40px;
      margin-bottom: 24px;
      margin-top: 8px;
      font-family: Lato, "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
      .subtitle {
        font-weight: normal;
        font-size: 90%;
        margin-left: 12px;
      }
    }
    h2, h3, h4, h5, h6 {
      color: rgba(0, 0, 0, 0.85);
      font-family: Lato, "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: 1.6em 0 0.6em;
      font-weight: 500;
      clear: both;
    }
    h1 {
      font-size: 28px;
    }
    h2 {
      font-size: 22px;
    }
    h3 {
      font-size: 18px;
    }
    h4 {
      font-size: 16px;
    }
    h5 {
      font-size: 14px;
    }
    h6 {
      font-size: 12px;
    }
    hr {
      height: 1px;
      border: 0;
      background: #e9e9e9;
      margin: 16px 0;
      clear: both;
    }
    p, pre {
      margin: 1em 0;
    }
    ul {
      padding: 0;
    }
    ul > li {
      list-style-type: circle;
      margin-left: 20px;
      padding-left: 4px;
      &:empty {
        display: none;
      }
    }
    ol > li {
      list-style-type: decimal;
      margin-left: 20px;
      padding-left: 4px;
    }
    ul > li > p, ol > li > p {
      margin: 0.2em 0;
    }
    code {
      margin: 0 1px;
      background: #f7f7f7;
      padding: .2em .4em;
      border-radius: 3px;
      font-size: .9em;
      border: 1px solid #eee;
    }
    pre {
      border-radius: 4px;
      background: #f7f7f7;
      font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      code {
        border: none;
        background: #f7f7f7;
        margin: 0;
        padding: 0;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.65);
        padding: 1em;
        overflow: auto;
      }
    }
    strong, b {
      font-weight: 600;
    }
    > table {
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #e9e9e9;
      width: 100%;
      margin: 8px 0 16px;
      th {
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
      }
      td {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
      }
      th {
        background: #f7f7f7;
      }
    }
    blockquote {
      font-size: 90%;
      background: rgba(239, 239, 239, 0.37);
      padding: 10px;
      border-left: 4px solid #108ee9;
      padding-left: 0.8em;
      margin: 1em 0;
      p {
        margin: 0;
      }
    }
    h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
      opacity: 1;
      display: inline-block;
    }
    > {
      br, p > br {
        clear: both;
      }
    }
  }
}