minetestblog.github.io/_sass/_code.scss

// Code
//-------------------------------
// Inline and block-level code snippets. Includes tweaks to syntax highlighted
// snippets from Rouge and Gist embeds.

code,
pre {
  font-family: $serif;
}

// small code thingies
code {
  padding: .25em .5em;
  font-size: .85em;
  // Could be mistaken for a link if the user choses a similar link-color, so better no colored inline code.
  // color: $code-color;
  background-color: var(--code-bg-color);
  // No border radius to prevent repaint on code scroll
  // border-radius: 3px;
}

code.highlighter-rouge {
  box-shadow: 0 1px 1px var(--shadow-color);
}

pre code {
  padding: 0;
  font-size: .75em;
  color: inherit;
  background-color: transparent;
}

figure, .figure {
  margin-left: -1rem;
  margin-right: -1rem;

  > *:first-child {
    padding: 1rem;
    background: var(--code-bg-color);
  }

  > figcaption, > .figcaption {
    font-size: smaller;
    color: #9a9a9a;
    text-align: center;
    font-style: italic;
    margin-top: 0.5rem;
    padding: 0 1rem;
  }
}

//http://www.minh.io/blog/2015/06/28/jekyll-line-numbers/
//https://drewsilcock.co.uk/proper-linenumbers
//https://sacha.me/articles/jekyll-rouge/#using-rouge-in-jekyll-3-on-github-pages
// Rouge
.highlight {
  margin-bottom: 1.5rem;
  font-size: .75em;
  // /* Prevent code linebreaks and allow side-scrolling (much better readability on mobile) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  // /* Make code same width as regular text, and scroll the full page width on mobile */
  @include figure2();

  backface-visibility: hidden;
  box-shadow: 0 1px 2px var(--shadow-color);
  position: relative;
  
  &:before {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.5em;
        background-color: var(--code-border);
        content: "\e86f";
        font-family: "icomoon" !important;
        line-height: 1;
        text-transform: none;
        speak: none;
        box-shadow: 0 1px 2px var(--shadow-color);
      }

  pre {
    line-height: 1.6;
    padding: .5rem 0 .5rem .5rem;
    margin-bottom: 0;
    overflow-x: auto;
  }

  .lineno {
    display: inline-block; // Ensures the null space also isn't selectable
    padding-right: .25rem;
    color: var(--metadata-color);
    // Make sure numbers aren't selectable
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  table {
    // resets down below
    width: 90%;
    background: transparent;
    box-shadow: none;
    margin-bottom: 0;
    font-size: inherit;

    td, th {
    padding: 0.25rem .5rem;
    }

    td:not(:first-child) {
    border-left: 0;
    }

    td.gutter {
      background: var(--code-border);
      box-shadow: 0 1px 2px var(--shadow-color);
      width: 6%;
    }

    td.code {
      position:relative;
      width: 90%;
    }
  }
}

@media (max-width: 48rem) {
  td.code:before {
    display: none;
  }
}

// Gist via GitHub Pages
// .gist .gist-file {
//   font-family: Menlo, Monaco, "Courier New", monospace !important;
// }
// .gist .markdown-body {
//   padding: 15px;
// }
// .gist pre {
//   padding: 0;
//   background-color: transparent;
// }
// .gist .gist-file .gist-data {
//   font-size: .8rem !important;
//   line-height: 1.4;
// }
// .gist code {
//   padding: 0;
//   color: inherit;
//   background-color: transparent;
//   border-radius: 0;
// }