Languages

Registration

Languages must be registered by the RyuseiLight.register() static function before highlighting code. Each language is a function that returns a Language object:

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

RyuseiLight.register( json() );
JavaScript

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


RyuseiLight.register( json() );

The method accepts an array for multiple languages:

import { RyuseiLight, json, typescript } from '@ryusei/light';

RyuseiLight.register( [ json(), typescript() ] );
JavaScript

import { RyuseiLight, json, typescript } from '@ryusei/light';


RyuseiLight.register( [ json(), typescript() ] );

Default Language

The RyuseiLight class takes default options through the constructor. The apply() and html() member methods respect the defaults.

const ryuseilight = new RyuseiLight( { language: 'jsx' } );

// Highlights elements by JSX.
ryuseilight.apply( '.jsx-code' );

// Generates HTML by JSX.
const html = ryuseilight.html( '<div>message</div>' );
JavaScript

const ryuseilight = new RyuseiLight( { language: 'jsx' } );


// Highlights elements by JSX.
ryuseilight.apply( '.jsx-code' );


// Generates HTML by JSX.
const html = ryuseilight.html( '<div>message</div>' );

The default options can be overwritten by local options:

ryuseilight.apply( '.json-code', { language: 'json' } );

const html = ryuseilight.html( '{ title: "Ryusei" }', { language: 'json' } );
JavaScript

ryuseilight.apply( '.json-code', { language: 'json' } );


const html = ryuseilight.html( '{ title: "Ryusei" }', { language: 'json' } );

Data Attribute

If a page contains some code snippets in different languages, it may be hard to apply each language to each element. By using the data-rl-language data attribute, the language can be specified from HTML.

<pre data-rl-language="js">
console.log( 'hello!' );
</pre>

<pre data-rl-language="css">
body { color: skyblue; }
</pre>
HTML

<pre data-rl-language="js">
console.log( 'hello!' );
</pre>


<pre data-rl-language="css">
body { color: skyblue; }
</pre>

const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre' );
JavaScript

const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre' );

Here is a list of languages that are currently available. Not many, but I will try to add more (slowly).

Language	ID/Alias
CSS	css
HTML	html, markup
JavaScript	javascript, js
JSON	json
JSX	jsx, react
TSX	tsx
NONE	none
SCSS	scss
SVG	svg
TypeScript	typescript, ts
Vue	vue
XML	xml

Registration

Default Language

Data Attribute

Language List