Language Name

Overview

The LanguageName component displays a language name on the top of a code snippet.

.button {
  $root: &;


  font-family: Roboto, 'Avenir Next Pro', sans-serif;
  font-size: .9rem;


  &--primary {
    color: white;


    #{ $root }__inner {
      background: $main-color;
    }
  }
}
SCSS

It works with the Copy component:

console.log( 'Hi!' );
JavaScript

Usage

Register Overlay and LanguageName components:

import { RyuseiLight, Overlay, LanguageName } from '@ryusei/light';


RyuseiLight.compose( { Overlay, LanguageName } );
JavaScript

Or import the component files:

<script src="path-to-the-file/overlay.min.js"></script>
<script src="path-to-the-file/language-name.min.js"></script>
HTML

Then, set the languageName option to true:

const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { languageName: true } );


// or enables it as default:
const ryuseilight = new RyuseiLight( { languageName: true } );
ryuseilight.apply( 'pre' );
JavaScript

If you want to display the name on the left side, set the value to 'topLeft':

ryuseilight.apply( 'pre', { languageName: 'topLeft' } );
JavaScript

Now the name will move to the left:

console.log( 'Hello!' );
JavaScript