Introduction

You can create a customizable code area using the class : .code inside the pre tag.

Example :

.code {
  background-color : green;
}            
          

You can use the .data-lang option inside the pre tag to specifie which langage use your code.

.code {
  background-color : green;
}            
          

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the code component.
// ---------------------------------------------------------------

code {
  background: #fcf2f2;
  border-radius: .1rem;
  color: #d73e48;
  font-size: 85%;
  line-height: 1.2;
  padding: .1rem .2rem;
}

.code {
  border-radius: .1rem;
  color: #3b4351;
  position: relative;
  &::before {
    color: #bcc3ce;
    content: attr(data-lang);
    font-size: .7rem;
    position: absolute;
    right: .4rem;
    top: .1rem;
  }
  code {
    background: #f7f8f9;
    color: inherit;
    display: block;
    line-height: 1.5;
    overflow-x: auto;
    padding: 1rem;
    width: 100%;
  }
}