@scalar/code-highlight/dist/css/markdown.css

Central methods and themes for code highlighting in Scalar projects

@import url("./code.css");

.scalar-app {
  .markdown {
    font-family: var(--scalar-font);
    color: var(--scalar-color-1);
    word-break: break-word;
  }

  /* Apply base padding for all block elements */
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6,
  .markdown p,
  .markdown div,
  .markdown img,
  .markdown details,
  .markdown summary,
  .markdown ul,
  .markdown ol,
  .markdown table,
  .markdown blockquote,
  .markdown code {
    margin: 12px 0;
  }

  .markdown details {
    margin: 12px 0;
    color: var(--scalar-color-1);
  }
  .markdown summary {
    display: block;
    margin: 1em 0;
    padding-left: 20px;
    position: relative;
    font-weight: var(--scalar-semibold);
    cursor: pointer;
    user-select: none;
  }

  .markdown summary::after {
    display: block;
    content: "";

    position: absolute;
    top: -1px;
    left: -1px;

    width: 20px;
    height: 20px;

    background-color: var(--scalar-color-3);
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9 18 6-6-6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }

  .markdown summary:hover::after {
    background-color: var(--scalar-color-1);
  }

  .markdown details[open] summary::after {
    transform: rotate(90deg);
  }

  .markdown img {
    overflow: hidden;
    border-radius: var(--scalar-radius);
    max-width: 100%;
  }
  /* Don't add margin to the first block */
  .markdown > :first-child {
    margin-top: 0;
    margin-bottom: 0;
  }

  .markdown h1 {
    --font-size: 1.4em;
  }

  .markdown h2 {
    --font-size: 1.25em;
  }

  .markdown h3 {
    --font-size: 1.1em;
  }

  .markdown h4 {
    --font-size: 1em;
  }

  .markdown h6 {
    --font-size: 1em;
  }
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6 {
    font-size: var(--font-size);
    margin: 18px 0 6px;
    font-weight: var(--scalar-bold);
    display: block;
    line-height: 1.45;
  }
  .markdown b,
  .markdown strong {
    font-weight: var(--scalar-bold);
  }
  .markdown p {
    color: inherit;
    font-weight: var(--font-weight, var(--scalar-regular));
    line-height: 1.5;
    margin-bottom: 0;
    display: block;
  }

  .markdown ul,
  .markdown ol {
    padding-left: 24px;
    line-height: 1.5;
    margin: 12px 0;
    display: block;
  }

  .markdown ul {
    list-style: disc;
  }

  .markdown ol {
    list-style: decimal;
  }

  .markdown ul.contains-task-list {
    list-style: none;
    padding-left: 0;
  }

  .markdown li {
    margin: 6px 0;
    display: list-item;
  }
  .markdown ul:first-of-type li:first-of-type {
    margin-top: 0;
  }
  .markdown a {
    color: var(--scalar-link-color, var(--scalar-color-accent));
    font-weight: var(--scalar-link-font-weight, inherit);
    text-decoration: var(--scalar-text-decoration);
    cursor: pointer;
  }
  .markdown a:hover {
    color: var(--scalar-link-color-hover, var(--scalar-color-accent));
    text-decoration: var(--scalar-text-decoration-hover);
  }
  .markdown em {
    font-style: italic;
  }
  .markdown sup {
    font-size: var(--scalar-micro);
    vertical-align: super;
    font-weight: 450;
  }
  .markdown sub {
    font-size: var(--scalar-micro);
    vertical-align: sub;
    font-weight: 450;
  }
  .markdown del {
    text-decoration: line-through;
  }
  .markdown code {
    font-family: var(--scalar-font-code);
    background-color: var(--scalar-background-2);
    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
    font-size: var(--scalar-micro);
    border-radius: 2px;
    padding: 0 3px;
  }

  .markdown .hljs {
    font-size: var(--scalar-small);
  }

  .markdown pre code {
    display: block;
    white-space: pre;
    padding: 12px;
    line-height: 1.5;
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    min-width: 100px;
  }

  .markdown hr {
    border: none;
    border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);
  }

  .markdown blockquote {
    border-left: 3px solid var(--scalar-border-color);
    padding-left: 12px;
    margin: 0;
    display: block;
  }

  .markdown table {
    display: block;
    overflow-x: auto;
    position: relative;
    border-collapse: collapse;
    width: max-content;
    max-width: 100%;
    margin: 1em 0;
    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
    border-radius: var(--scalar-radius-lg);
  }
  .markdown tbody {
    display: table-row-group;
    vertical-align: middle;
  }
  .markdown thead {
    display: table-header-group;
    vertical-align: middle;
  }

  .markdown tr {
    display: table-row;
    border-color: inherit;
    vertical-align: inherit;
  }
  .markdown td,
  .markdown th {
    display: table-cell;
    vertical-align: inherit;
    min-width: 1em;
    padding: 6px 9px;
    vertical-align: top;
    line-height: 1.5;
    position: relative;
    word-break: initial;
    font-size: var(--scalar-small);
    color: var(--scalar-color-1);
    font-weight: var(--font-weight, var(--scalar-regular));
    border-right: var(--scalar-border-width) solid var(--scalar-border-color);
    border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);
  }

  .markdown td > *,
  .markdown th > * {
    margin-bottom: 0;
  }
  .markdown th:empty {
    display: none;
  }
  .markdown td:first-of-type,
  .markdown th:first-of-type {
    border-left: none;
  }

  .markdown td:last-of-type,
  .markdown th:last-of-type {
    border-right: none;
  }

  .markdown tr:last-of-type td {
    border-bottom: none;
  }

  .markdown th {
    font-weight: var(--scalar-semibold) !important;
    text-align: left;
    border-left-color: transparent;
    background: var(--scalar-background-2);
  }

  .markdown tr > [align="left"] {
    text-align: left;
  }
  .markdown tr > [align="right"] {
    text-align: right;
  }
  .markdown tr > [align="center"] {
    text-align: center;
  }

  /* Markdown Alert */
  .markdown .markdown-alert {
    align-items: stretch;
    border-radius: var(--scalar-radius-lg);
    background-color: color-mix(in srgb, var(--scalar-background-2), transparent);
    border: var(--scalar-border-width) solid var(--scalar-border-color);
    display: flex;
    font-size: var(--scalar-small);
    gap: 12px;
    padding: 12px;
    padding-left: 42px;
    position: relative;
  }

  .markdown .markdown-alert::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
  }

  .markdown .markdown-alert.markdown-alert-note::before,
  .markdown .markdown-alert.markdown-alert-tip::before {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 17v-6a.5.5 0 0 0-.5-.5l-.5.001h-1M12 17h-2m2 0h2m-2 5c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 7.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" fill="currentColor"/></svg>');
  }

  .markdown .markdown-alert.markdown-alert-important::before,
  .markdown .markdown-alert.markdown-alert-warning::before {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v4m10 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" fill="currentColor"/></svg>');
  }

  .markdown .markdown-alert.markdown-alert-caution::before {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" fill="currentColor"/></svg>');
    color: var(--scalar-color-red);
  }

  .markdown .markdown-alert.markdown-alert-success::before {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 9.5 10.5 15 8 12.5m14-.5c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    color: var(--scalar-color-green);
  }

  .markdown .markdown-alert.markdown-alert-note::before {
    color: var(--scalar-color-blue);
  }

  .markdown .markdown-alert.markdown-alert-tip::before {
    color: var(--scalar-color-2);
  }

  .markdown .markdown-alert.markdown-alert-important::before {
    color: var(--scalar-color-purple);
  }

  .markdown .markdown-alert.markdown-alert-warning::before {
    color: var(--scalar-color-orange);
  }

  .markdown .markdown-alert .markdown-alert-content {
    margin: 0;
    line-height: 1.5;
  }
}