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

Central methods and themes for code highlighting in Scalar projects

.scalar-app {
  :where(code.hljs) * {
    font-size: inherit;
    font-family: var(--scalar-font-code);
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.4;
    tab-size: 4;
  }
  code.hljs {
    all: unset;
    font-size: inherit;
    color: var(--scalar-color-2);
    font-family: var(--scalar-font-code);
    counter-reset: linenumber;
  }
  .hljs {
    background: transparent;
    color: var(--scalar-color-2);
  }

  .hljs .line::before {
    color: var(--scalar-color-3);
    display: inline-block;
    counter-increment: linenumber;
    content: counter(linenumber);
    margin-right: 0.875rem;
    /* Variable is set on the code element by the plugin when line numbers are used */
    min-width: calc(var(--line-digits) * 1ch);
    text-align: right;
  }
  /* ------------------------------------------------------------- */
  /* Data types */
  .hljs-comment,
  .hljs-quote {
    color: var(--scalar-color-3);
    font-style: italic;
  }

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

  .hljs-regexp,
  .hljs-string {
    color: var(--scalar-color-blue);
  }

  /** Globals such as `var()` and `!important` */
  .hljs-built_in {
    color: var(--scalar-color-blue);
  }

  /** Class initializers such as `Array` or `Date` */
  /** Type declarations such as `Record` */
  .hljs-title.class_ {
    color: var(--scalar-color-1);
  }

  /** Language indicators such as `new`, `const`, or `function` in JS  */
  .hljs-keyword {
    color: var(--scalar-color-purple);
  }

  /** Function names when declaring and calling */
  .hljs-title.function_ {
    color: var(--scalar-color-orange);
  }

  /** Template substitution */
  .hljs-subst {
    color: var(--scalar-color-blue);
  }

  /** HTML Tag name */
  .hljs-name {
    color: var(--scalar-color-blue);
  }

  /** Attribute name (ex. `class`, `id`) */
  .hljs-attr,
  .hljs-attribute {
    color: var(--scalar-color-1);
  }

  .hljs-addition,
  .hljs-literal,
  .hljs-selector-tag,
  .hljs-type {
    color: var(--scalar-color-green);
  }

  .hljs-selector-attr,
  .hljs-selector-pseudo {
    color: var(--scalar-color-orange);
  }
  .hljs-doctag {
    color: var(--scalar-color-blue);
  }

  .hljs-section,
  .hljs-title {
    color: var(--scalar-color-blue);
  }

  .hljs-selector-id,
  .hljs-template-variable,
  .hljs-variable {
    color: var(--scalar-color-1);
  }

  .hljs-name,
  .hljs-section,
  .hljs-strong {
    font-weight: var(--scalar-semibold);
  }

  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-symbol {
    color: var(--scalar-color-blue);
  }

  .hljs-deletion {
    color: var(--scalar-color-red);
  }

  .hljs-formula {
    background: var(--scalar-color-1);
  }

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

  /** Hide credentials */
  .credential .credential-value {
    font-size: 0;
    color: transparent;
  }

  /** Show a few dots instead */
  .credential::after {
    content: "·····";
    color: var(--scalar-color-3);
    user-select: none;
  }
}

/* -------------------------------------------------------------- */
/* Language specific overrides */

/** For HTML we leave the content strings brighter */
.hljs.language-html {
  color: var(--scalar-color-1);
}

/** For HTML make the attr text different than the content */
.hljs.language-html .hljs-attr {
  color: var(--scalar-color-2);
}

.hljs.language-curl .hljs-string {
  color: var(--scalar-color-blue);
}

.hljs.language-curl .hljs-literal {
  color: var(--scalar-color-1);
}

/** Compromise here */
.hljs.language-cpp .hljs-built_in {
  /* color: var(--scalar-color-1); */
}

.hljs.language-php .hljs-variable {
  color: var(--scalar-color-blue);
}

.hljs.language-objectivec .hljs-meta {
  color: var(--scalar-color-1);
}

.hljs.language-objectivec .hljs-built_in {
  color: var(--scalar-color-orange);
}

.hljs-built_in {
  color: var(--scalar-color-orange);
}