Styling

Font Family

RyuseiCode uses a regular san-serif font for texts, and a monospace font for code. To change the main font, set font-family to the root element:

.ryuseicode {
  font-family: Gotham, sans-serif;
}
CSS

But to change the monospace font, use the monospaceFont option because it is referred by some elements:

new RyuseiCode( { monospaceFont: `'Fira Code', monospace` } );
JavaScript

Border Radius

The root element (.ryuseicode) must not have overflow:hidden. If you want to set border-radius to round the corner of the editor, set the style to the view element:

.ryuseicode__view {
  border-radius: 10px;
}
CSS

or add a custom class to it:

new RyuseiCode( { viewClasses: 'round-me' } );
JavaScript

Background Color

Set the background-color to the view element:

.ryuseicode__view {
  background-color: #000;
}
CSS

or add a custom class to it:

new RyuseiCode( { viewClasses: 'dark-background' } );
JavaScript

Line Height

Update the lineHeight option as a number. This does not accept the CSS format:

new RyuseiCode( { lineHeight: 1.4 } );
JavaScript

Advanced Styling

If you'd like to fully customize the appearance, creating your own theme may be more simple and efficient than overriding each class and property, because most of the essential values are exposed in the dart SASS way like this:

@use '../../core/object/token' with (
  $keyword: #e75a77,
  $constant: #06b297,
  $symbol: #06b297,
  $comment: #8baad1,
  $tag: #f75766,
  $selector: #72bc31,
  $atrule: #e75a77,
  $attr: #06b297,
  $prop: #06b297,
  ...
);
SCSS

See this page for more details.