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 odd `em` font sizing in all browsers
pre,
code,
kbd,
samp {
  font-family: $monospace; // 1
  font-size: 1rem; // 2
}

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


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

pre,
code,
kbd {
  background: var(--code-inlined);
  color: var(--code-color-1);
  font-size: 85%;
  font-weight: 400;
  line-height: initial;

  @if map-get($breakpoints, "sm") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "sm")) {
      font-size: 83%;
    }
  }

  @if map-get($breakpoints, "md") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "md")) {
      font-size: 81%;
    }
  }

  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "lg")) {
      font-size: 79%;
    }
  }
  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "xl")) {
      font-size: 77%;
    }
  }
}

code,
kbd {
  display: inline-block;
  padding: .375rem .5rem;
  border-radius: $round;
}

pre {
  display: block;
  margin-bottom: $spacing-block;
  padding: $spacing-block $spacing-gutter;
  overflow-x: auto;
  background: var(--code-background);

  > code {
    display: block;
    padding: 0;
    background: transparent;
    font-size: 14px;
    line-height: $line-height;
  }
}

// Code Syntax highlighting
code {

  // Tags
  b {
    color: var(--code-color-2);
    font-weight: normal;
  }

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

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

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

// kbd
kbd {
  background-color: var(--secondary);
  color: var(--secondary-inverse);
  font-weight: bolder;
}