pico/scss/content/_code.scss

/**
 * Code
 */

// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––

// 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the font sizing in all browsers
pre,
code,
kbd,
samp {
  font-family: var(--font-family); // 1
  font-size: 0.875em; // 2
}

// Prevent overflow of the container in all browsers (opinionated)
pre {
  -ms-overflow-style: scrollbar;
  overflow: auto;
}

// Pico
// ––––––––––––––––––––

pre,
code,
kbd {
  background: var(--code-background-color);
  color: var(--code-color);
  font-weight: var(--font-weight);
  line-height: initial;
  border-radius: var(--border-radius);
}

code,
kbd {
  display: inline-block;
  padding: 0.375rem 0.5rem;
}

pre {
  display: block;
  margin-bottom: var(--spacing);
  overflow-x: auto;

  > code {
    background: transparent;
    display: block;
    padding: var(--spacing);
    font-size: 14px;
    line-height: var(--line-height);
  }
}

// Code Syntax
code {
  // Tags
  b {
    color: var(--code-tag-color);
    font-weight: var(--font-weight);
  }

  // Properties
  i {
    color: var(--code-property-color);
    font-style: normal;
  }

  // Values
  u {
    color: var(--code-value-color);
    text-decoration: none;
  }

  // Comments
  em {
    color: var(--code-comment-color);
    font-style: normal;
  }
}

// kbd
kbd {
  background-color: var(--code-kbd-background-color);
  color: var(--code-kbd-color);
  vertical-align: middle;
}