insomnia/packages/insomnia-app/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,
  & > ol {
    padding-left: @padding-xs;
  }

  & > ul {
    list-style: disc;

    ul {
      list-style: circle;
    }
  }

  & > ol {
    list-style: decimal;

    ol {
      list-style: lower-alpha;
    }
  }

  ul,
  ol {
    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-selector-tag,
    .hljs-subst {
      color: var(--color-font);
    }

    .hljs-variable {
      color: var(--color-success);
    }

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

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

    .hljs-number {
      color: var(--color-info);
    }

    .hljs-sts {
      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;
    }
  }
}