insomnia/app/ui/css/components/markdown-preview.less

@import '../constants/dimensions';
@import '../constants/colors';
@import '../constants/fonts';

.markdown-preview {
  .markdown-preview__content {
    max-width: 36em;
    margin-right: auto;

    h1 {
      font-size: @font-size-xxl;
      border-bottom: 1px solid var(--hl-sm);
      font-weight: bold;
    }

    h2 {
      font-size: @font-size-xl;
      border-bottom: 1px solid var(--hl-sm);
      font-weight: bold;
    }

    h3 {
      font-size: @font-size-lg;
      font-weight: bold;
    }

    h4 {
      font-size: @font-size-md;
      font-weight: bold;
      opacity: 0.9;
    }

    h5 {
      font-size: @font-size-sm;
      font-weight: bold;
      opacity: 0.9;
    }

    h6 {
      font-size: @font-size-sm;
      font-weight: bold;
      opacity: 0.8;
    }

    & > * {
      line-height: 1.7em;
      margin: @padding-sm 0 @padding-md 0;
      padding: 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    & > *, img {
      max-width: 100%;
    }

    blockquote {
      border-left: 0.4em solid var(--hl-md);
      padding: @padding-xxs @padding-md;

      p {
        margin: @padding-xs 0;
      }
    }

    *:not(pre) > code {
      padding: @padding-xxs @padding-xs;
      font-size: @font-size-sm;
      line-height: @font-size-xs;
      font-family: @font-monospace;
    }

    code {
      background-color: var(--hl-xs);
      border: 1px solid var(--hl-sm);
      border-radius: @radius-sm;
    }

    pre > code {
      padding: @padding-sm;
    }

    & > ul {
      padding-left: @padding-xs;
      list-style: disc;

      ul {
        list-style: circle;
      }
    }

    ul {
      margin-left: @padding-md;
    }

    table {
      width: 100%;
      background: @hl-xxs;
      border-spacing: 2px;
      border-collapse: collapse;

      td, th {
        padding: @padding-xxs @padding-sm;
      }

      th {
        text-align: left;
      }

      td, th {
        border: 1px solid var(--hl-sm);
        color: var(--color-font);
      }

      td {
        background: var(--color-bg);
      }

      thead tr {
        background: @hl-xxs;
      }
    }

    .hljs {
      width: 100%;
      box-sizing: border-box;

      .hljs-meta,
      .hljs-comment,
      .hljs-quote {
        color: var(--hl);
        font-style: italic;
      }

      .hljs-keyword,
      .hljs-selector-tag,
      .hljs-subst {
        color: var(--color-font);
      }

      .hljs-number,
      .hljs-literal,
      .hljs-variable,
      .hljs-template-variable,
      .hljs-built_in,
      .hljs-builtin-name,
      .hljs-type,
      .hljs-class .hljs-title,
      .hljs-tag .hljs-attr {
        color: var(--color-surprise);
      }

      .hljs-symbol,
      .hljs-bullet,
      .hljs-title,
      .hljs-section,
      .hljs-selector-id,
      .hljs-doctag {
        color: var(--color-danger);
      }

      .hljs-string {
        color: var(--color-notice);
      }

      .hljs-subst {
        font-weight: normal;
      }

      .hljs-tag,
      .hljs-name,
      .hljs-attr,
      .hljs-regexp,
      .hljs-link,
      .hljs-attribute {
        color: var(--color-success);
      }

      .hljs-deletion {
        background: #fdd;
      }

      .hljs-addition {
        background: #dfd;
      }

      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: bold;
      }
    }
  }
}