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

// .markdown-preview {
// }

.markdown-preview__content-title {
  font-size: var(--font-size-xxl);
  border-bottom: 1px solid var(--hl-sm);
  font-weight: bold;
  max-width: 50rem;
  line-height: 1.7em;
  margin: 0 0 var(--padding-md) 0;
  padding: 0;
}

.markdown-preview__content {
  margin-right: auto;

  & > *:not(pre) {
    max-width: 50rem;
  }

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

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

  h3 {
    font-size: var(--font-size-lg);
    font-weight: bold;
  }

  h4 {
    font-size: var(--font-size-md);
    font-weight: bold;
    opacity: 0.9;
  }

  h5 {
    font-size: var(--font-size-sm);
    font-weight: bold;
    opacity: 0.9;
  }

  h6 {
    font-size: var(--font-size-sm);
    font-weight: bold;
    opacity: 0.8;
  }

  & > * {
    line-height: 1.7em;
    margin: var(--padding-sm) 0 var(--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: var(--padding-xxs) var(--padding-md);

    p {
      margin: var(--padding-xs) 0;
    }
  }

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

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

  pre > code {
    padding: var(--padding-sm);
    overflow-x: auto;
  }

  & > ul,
  & > ol {
    padding-left: var(--padding-xs);
  }

  & > ul {
    list-style: disc;

    ul {
      list-style: circle;
    }
  }

  & > ol {
    list-style: decimal;

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

  ul,
  ol {
    margin-left: var(--padding-md);
  }

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

    td,
    th {
      padding: var(--padding-xxs) var(--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: var(--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;
    }
  }
}