hugo/pipeline/scss/components/_code.scss

kbd {
  font-family: $code-font-family;
}

.body-copy {
  code,
  pre {
    font-family: $code-font-family;
    font-size: .9em;
    weight: inherit;
    font-weight: $code-font-base-weight;
    overflow-y: visible;
    z-index: 1;
  }
  > pre {
    position: relative;
    margin-bottom: 1.5em;
  }
  pre > code,
  .code {
    background-color: $code-block-background-color;
  }
  > pre {
    overflow-x: scroll;
  }
  ol,
  ul,
  div,
  strong,
  em,
  span,
  p,
  dd,
  dt,
  {
    code {
      background-color: $inline-code-background-color;
      @include MQ(retina) {
        background-color: $inline-code-background-color;
      }
    }
  }
}

.code {
  display: block;
  position: relative;
  overflow: hidden;
  padding: .5em;
  overflow-y: visible;
  margin-bottom: 1.5em;
}

code[class^="language-"] {
  &:after {
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    color: lighten($base-font-color, 35%);
    font-family: 'fontello';
    content: '\f121';
  }
}

.copy-button + .code-copy-content {
  code[class^="language-"] {
    &:after {
      // display: none;
      position: absolute;
      top: -4px;
      right: 4px;
    }
  }
}

code.language-html:after {
  font-family: 'FontAwesome';
  content: '\f13b';
}

code.language-js:after {
  font-family: 'fontello';
  content: '\e802';
  font-size: 16px;
  top: 2px;
}

code.language-hugo:after,
code.language-go:after,
code.language-golang:after {
  font-family: 'fontello';
  content: '\e801';
}

code.language-sass:after,
code.language-scss:after {
  font-family: 'fontello';
  content: '\e803';
}

code.language-bash:after,
code.language-sh:after {
  font-family: 'fontello';
  content: '\e808';
  right: 6px;
}

code.language-toml:after {
  content: 'TOML';
  font-size: .8em;
  padding-right: .3em;
  font-family: $code-font-family;
}

code.language-yaml:after,
code.language-yml:after {
  content: 'YAML';
  font-size: .8em;
  padding-right: .3em;
  font-family: $code-font-family;
}

code.language-md:after,
code.language-markdown:after {
  font-family: 'fontello';
  content: '\e818';
}

.copy-button + .code-copy-content {
  code[class^="language-"] {
    &:after {
      display: none;
      position: absolute;
      top: -8px;
      right: 4px;
    }
  }
}

//hides icons in the occasional code block in blockquotes and admonitions
blockquote,
.admonition {
  code[class^="language-"] {
    &:after {
      content: '';
    }
  }
}

.filename {
  font-family: $code-font-family;
  color: lighten($base-font-color, 25%);
  padding-left: 1em;
  padding-top: .25em;
  font-size: .7em;
  background-color: $code-block-background-color;
  width: 100%;
  font-style: italic;
  margin-bottom: 0px;
}

.code-icon {
  position: absolute;
  top: 2px;
  right: 4px;
}

.copy-button,
.download-button {
  transition: opacity .3s ease-in-out;
  opacity: 1;
  position: absolute;
  right: 1px;
  top: 1px;
  background-color: white;
  color: $base-font-color;
  border-radius: 0px;
  @include card(1);
  height: 30px;
  min-width: 70px;
  font-size: 12px;
  display: block;
  z-index: 15;
  &:hover {
    @include card(3);
  }
  span.button-text {
    text-transform: uppercase;
    margin-left: 0px;
  }
}

.download-button {
  position: absolute;
  min-width: 70px;
  top: 1px;
  right: 72px;
  //removes download button from iphone portrait
  @include MQ(retinaPortrait) {
    display: none;
  }
}

.tooltipped {
  position: absolute;
}

.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 2px 4px;
  font-size: .8em;
  font-weight: $base-font-bold-weight;
  font-family: $heading-font-family;
  color: $hugo-white;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background-color: $code-tooltip-bg-color;
  border-color: $code-tooltip-bg-color;
  border-radius: 0px;
  -webkit-font-smoothing: subpixel-antialiased
}

.tooltipped:before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: $code-tooltip-bg-color;
  pointer-events: none;
  content: "";
  border: 5px solid transparent;
}

.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
  display: inline-block;
  text-decoration: none;
}

.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
  display: table-cell;
}

.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
  top: 100%;
  right: 50%;
  margin-top: 5px;
  text-align: center;
}

.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
  top: auto;
  right: 50%;
  bottom: -5px;
  margin-right: -5px;
  border-bottom-color: $code-tooltip-bg-color;
  text-align: center;
}

.tooltipped-se:after {
  right: auto;
  left: 50%;
  // margin-left: -15px;
  text-align: center;
}

.tooltipped-sw:after {
  // margin-right: -15px
}

.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
  right: 50%;
  bottom: 100%;
  margin-bottom: 5px
}

.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
  top: -5px;
  right: 50%;
  bottom: auto;
  margin-right: -5px;
  border-top-color: $code-tooltip-bg-color;
}

.tooltipped-ne:after {
  right: auto;
  left: 50%;
  margin-left: -15px
}

.tooltipped-nw:after {
  margin-right: -15px
}

.tooltipped-s:after,
.tooltipped-n:after {
  transform: translateX(50%)
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  transform: translateY(50%)
}

.tooltipped-w:before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: $code-tooltip-bg-color;
}

.tooltipped-e:after {
  bottom: 50%;
  left: 100%;
  margin-left: 5px;
  transform: translateY(50%)
}

.tooltipped-e:before {
  top: 50%;
  right: -5px;
  bottom: 50%;
  margin-top: -5px;
  border-right-color: $code-tooltip-bg-color;
}

.tooltipped-multiline:after {
  width: max-content;
  max-width: 250px;
  word-break: break-word;
  word-wrap: normal;
  white-space: pre-line;
  border-collapse: separate
}

.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
  right: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%)
}

.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
  right: 100%
}