pico/scss/content/_code.scss

@use "../settings" as *;

/**
 * Code
 */

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

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

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

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

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

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

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

  > code {
    display: block;
    padding: var(#{$✨}spacing);
    background: none;
    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: baseline;
}