Getting Started

Installation

You have 3 options to include RyuseiCode on your site, NPM, hosting files and CDN.

NPM

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

$ npm install @ryusei/code

$ npm install @ryusei/code

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

import { RyuseiCode, javascript, Gutter, History } from '@ryusei/code';
// const { RyuseiCode, javascript, Gutter, History } = require( '@ryusei/code' );

RyuseiCode.register( [ javascript() ] );
RyuseiCode.compose( { Gutter, History } );
JavaScript

import { RyuseiCode, javascript, Gutter, History } from '@ryusei/code';
// const { RyuseiCode, javascript, Gutter, History } = require( '@ryusei/code' );


RyuseiCode.register( [ javascript() ] );
RyuseiCode.compose( { Gutter, History } );

If you desire to install all extensions, just pass the Extensitions object:

import { RyuseiCode, Extensions } from '@ryusei/code';
RyuseiCode.compose( Extensions );
JavaScript

import { RyuseiCode, Extensions } from '@ryusei/code';
RyuseiCode.compose( Extensions );

Visit this page for more details about extensions.

Download

You can download the RyuseiCode package from the following link:

Download

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

File	Description
`ryuseicode.min.js`	Contains Dialog, Indentation, History and Shortcuts extensions.
`ryuseicode-extensions.min.js`	Contains all extensions.
`ryuseicode-complete.min.js`	Contains all languages and components (not recommended).

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

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

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

Then, install languages by simply adding files located in the "languages" directory.

<script src="path-to-the-file/ryuseicode.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/ryuseicode.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 add extra extensions the package does not have in the same way, but some of them require dependencies. For example, the Search extension requires the Toolbar extension:

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

<script src="path-to-the-file/ryuseicode.min.js"></script>
<script src="path-to-the-file/toolbar.min.js"></script>
<script src="path-to-the-file/search.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

Next, select a theme CSS file and link it to your site. You can preview themes in this page.

Files

Go to the dist/css/themes directory, and pick the theme CSS file.

Linking The Style Sheet

Link to the selected theme with a <link> element as usual:

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

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

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

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


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


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

Applying RyuseiCode

Finally, apply the editor to the target element.

RyuseiCode accepts any kinds of HTML elements, such as <pre>, <textarea>, and <div>, and uses their text contents as initial code.

<pre>
console.log( 'Hi!' );
</pre>
HTML

<pre>
console.log( 'Hi!' );
</pre>

Using Import

Import the RyuseiCode class, create a new instance, and apply it to the specific element by apply() with a selector.

import RyuseiCode from '@ryusei/code';

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'pre' );
JavaScript

import RyuseiCode from '@ryusei/code';


const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'pre' );

The apply method also accepts an HTML element:

const pre = document.querySelector( 'pre' );
const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( pre );
JavaScript

const pre = document.querySelector( 'pre' );
const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( pre );

Using The Global Class

If you include the library via a <script> tag, the RyuseiCode class will be globally available:

<script>
  var ryuseiCode = new RyuseiCode();
  ryuseiCode.apply( 'pre' );
</script>
HTML

<script>
  var ryuseiCode = new RyuseiCode();
  ryuseiCode.apply( 'pre' );
</script>

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

Multiple Editors

The RyuseiCode instance accepts only a single target. If you want to create multiple editors, create same number of instances.

This example mounts editors to all <pre> elements in a document:

const elms = document.getElementsByTagName( 'pre' );

for ( let i = 0; i < elms.length; i++ ) {
  const ryuseiCode = new RyuseiCode();
  ryuseiCode.apply( elms[ i ] );
}
JavaScript

const elms = document.getElementsByTagName( 'pre' );


for ( let i = 0; i < elms.length; i++ ) {
  const ryuseiCode = new RyuseiCode();
  ryuseiCode.apply( elms[ i ] );
}

Generating HTML

RyuseiCode provides the way to generate an HTML string for an editor by html(). Of course, it doesn't have any functionality as a code editor, but it works without document and window objects.

const ryuseiCode = new RyuseiCode();
const html = ryuseiCode.html( `console.log( 'hello!' )` );
JavaScript

const ryuseiCode = new RyuseiCode();
const html = ryuseiCode.html( `console.log( 'hello!' )` );

Make sure to apply the editor after the HTML is available.