Getting Started

Installation

There are 3 ways to include RyuseiLight on your site.

NPM

The recommended installation method is using NPM. Install the latest version by the following command:

$ npm install @ryusei/light

$ npm install @ryusei/light

After the package is installed, register languages and extensions you want to use:

import { RyuseiLight, js, html, Gutter, LineNumbers } from '@ryusei/light';
// const { RyuseiLight, js, html, Gutter, LineNumbers } = require( '@ryusei/light' );

RyuseiLight.register( [ javascript(), html() ] );
RyuseiLight.compose( { Gutter, LineNumbers } );
JavaScript

import { RyuseiLight, js, html, Gutter, LineNumbers } from '@ryusei/light';
// const { RyuseiLight, js, html, Gutter, LineNumbers } = require( '@ryusei/light' );


RyuseiLight.register( [ javascript(), html() ] );
RyuseiLight.compose( { Gutter, LineNumbers } );

Languages are necessary, but extensions are not always required. Visit this page for more details about extensions.

Download

You can download the RyuseiLight package from the following link:

Download

Go to the dist/js directory, and you will see several JavaScript files.

File	Description
`ryuseilight.min.js`	The minimal build that includes JavaScript, HTML, CSS and XML without extensions.
`ryuseilight-extensions.min.js`	Contains default languages above and all extensions.
`ryuseilight-complete.min.js`	Contains all languages and extensions.

Pick the file you'd like to use and import it via a <script> tag:

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

<script src="path-to-the-file/ryuseilight.min.js"></script>

You can add languages by simply adding files located in the "languages" directory.

<script src="path-to-the-file/ryuseilight.min.js"></script>
<script src="path-to-the-file/json.min.js"></script>
<script src="path-to-the-file/typescript.min.js"></script>
HTML

<script src="path-to-the-file/ryuseilight.min.js"></script>
<script src="path-to-the-file/json.min.js"></script>
<script src="path-to-the-file/typescript.min.js"></script>

You can also add extensions in the same way, but some of them require dependencies. For example, the LineNumbers extension requires the Gutter extension:

<script src="path-to-the-file/ryuseilight.min.js"></script>
<script src="path-to-the-file/gutter.min.js"></script>
<script src="path-to-the-file/line-numbers.min.js"></script>
HTML

<script src="path-to-the-file/ryuseilight.min.js"></script>
<script src="path-to-the-file/gutter.min.js"></script>
<script src="path-to-the-file/line-numbers.min.js"></script>

Visit this page for more details about extensions.

CDN

You can also include this library from CDN instead of hosting it on your server.

jsDelivr

Importing Theme CSS

Secondly, select a theme file and link it to your site.

Files

Theme files are located on the dist/css/themes directory. You can preview themes in this page.

Linking The Style Sheet

Once select a theme, link it with <style> element.

<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/ryuseilight-ginga.min.css">

<!-- or the one installed in node_modules directory, -->
<link rel="stylesheet" href="node_modules/@ryusei/light/dist/css/themes/ryuseilight-ginga.min.css">

<!-- or link to the CDN -->
<link rel="stylesheet" href="url-to-cdn/ryuseilight-ginga.min.css">
HTML

<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/ryuseilight-ginga.min.css">


<!-- or the one installed in node_modules directory, -->
<link rel="stylesheet" href="node_modules/@ryusei/light/dist/css/themes/ryuseilight-ginga.min.css">


<!-- or link to the CDN -->
<link rel="stylesheet" href="url-to-cdn/ryuseilight-ginga.min.css">

Applying RyuseiLight

Finally, apply RyuseiLight to HTML elements.

Using Import

Import the RyuseiLight class and call the apply( selector, options ) method. For example, to highlight all pre elements by the JavaScript language:

import RyuseiLight from '@ryusei/light';

const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { language: 'js' } );
JavaScript

import RyuseiLight from '@ryusei/light';


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

Using The Global Class

If you include the library via a <script> tag, the RyuseiLight class can be accessed globally.

<script>
  var ryuseilight = new RyuseiLight();
  ryuseilight.apply( 'pre', { language: 'js' } );
</script>
HTML

<script>
  var ryuseilight = new RyuseiLight();
  ryuseilight.apply( 'pre', { language: 'js' } );
</script>

Make sure the target element is loaded before calling apply().

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var ryuseilight = new RyuseiLight();
    ryuseilight.apply( 'pre', { language: 'js' } );
  } );
</script>
HTML

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var ryuseilight = new RyuseiLight();
    ryuseilight.apply( 'pre', { language: 'js' } );
  } );
</script>

Multiple Languages

By assigning different classes to elements, you can apply RyuseiLight with different languages:

<pre class="lang-js"></pre>

<pre class="lang-html"></pre>
HTML

<pre class="lang-js"></pre>


<pre class="lang-html"></pre>

ryuseilight.apply( '.lang-js', { language: 'js' } );
ryuseilight.apply( '.lang-html', { language: 'html' } );
JavaScript

ryuseilight.apply( '.lang-js', { language: 'js' } );
ryuseilight.apply( '.lang-html', { language: 'html' } );

Or you can use a data attribute to specify the language from HTML. Visit here for more details.

Generating HTML

Instead of applying the highlighter to specific elements, you can get an HTML string by the html( code, options ) method.

const ryuseilight = new RyuseiLight();
const html = ryuseilight.html( `console.log( 'hello!' )`, { language: 'js' } );
JavaScript

const ryuseilight = new RyuseiLight();
const html = ryuseilight.html( `console.log( 'hello!' )`, { language: 'js' } );