Code View

CodeView is one of the core components of the library. While it is used by code boxes, it can also be created independently. It simply represents a code sample.

Usage Example

The following example demonstrates how to create a CodeView instance. Simply instantiate the CodeView class by passing a reference to the <pre> element that contains the <code> element. You can also provide additional options as a second parameter.

<pre id="MyCodeView"><code>let x = 1;
let y = 2;

let result = x + y;

console.log("result: " + result);</code></pre>

import { CodeView } from "@jirkasa/code-box";

new CodeView(document.getElementById("MyCodeView"), {
    highlight: "1-2,6"
});

let x = 1;
let y = 2;

let result = x + y;

console.log("result: " + result);

If you want to create multiple code views, you can use the CodeViewCreator. For more information, refer to the chapter on creators.

Options

CodeView offers options to customize its appearance. These options can be set either by passing an object to the constructor or by using data attributes. When both are provided, data attributes will override the values specified in the options object.

highlight : string

Default value: undefined

Data attribute alternative: data-cb-highlight

Specifies lines of code to be highlighted. For example, the string format can be "1" to highlight the first line, "1-5" to highlight lines 1 through 5, or "2-4,6-8" to highlight lines 2 through 4 and 6 through 8.

new CodeView(document.getElementById("MyCodeView"), {
    highlight: "1-3,7"
});

<pre id="MyCodeView" data-cb-highlight="1-3,7"><code>let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);</code></pre>

let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);

showGutter : boolean

Default value: true

Data attribute alternative: data-cb-show-gutter

Specifies whether the gutter (the area where line numbers appear) should be visible.

new CodeView(document.getElementById("MyCodeView"), {
    showGutter: false
});

<pre id="MyCodeView" data-cb-show-gutter="false"><code>let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);</code></pre>

let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);

showLineNumbers : boolean

Default value: true

Data attribute alternative: data-cb-show-line-numbers

Specifies whether line numbers should be visible.

new CodeView(document.getElementById("MyCodeView"), {
    showLineNumbers: false
});

<pre id="MyCodeView" data-cb-show-line-numbers="false"><code>let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);</code></pre>

let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);

lineHeight : number

Default value: 2

Data attribute alternative: data-cb-line-height

Specifies the line height. The unit for the line height can be set using the lineHeightUnit option.

new CodeView(document.getElementById("MyCodeView"), {
    lineHeight: 4
});

<pre id="MyCodeView" data-cb-line-height="4"><code>let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);</code></pre>

let x = 1;
let y = 2;
let z = 5;

let result = x + y + z;

console.log("result: " + result);

lineHeightUnit : string

Default value: "rem"

Data attribute alternative: data-cb-line-height-unit

Specifies the unit for line height. The line height value itself can be set using the lineHeight option.

cssClasses : string[]

Default value: undefined

Data attribute alternative: data-cb-css-classes

Specifies CSS classes to be added to the root element of the code view. When setting this option using a data attribute, separate multiple CSS classes with spaces.

Properties

CodeView has a few readonly properties. Do not change them when using plain JavaScript.

Methods

appendTo

appendTo(element: HTMLElement): void

Appends code view to element.

Params

detach

detach(): void

Detaches code view from its parent element.

reset

reset(): void

Resets code view to its initial state.

createMemento

createMemento(): CodeViewMemento

Creates memento (saved state of code view).

Returns

applyMemento

applyMemento(memento: CodeViewMemento): void

Applies memento (sets code view to the state defined by the provided memento).

Params

clone

clone(): CodeView

Creates a copy of code view. The copy reflects the state after initialization with the original options and does not include any changes made by subsequent method calls.

Returns

addHighlight

addHighlight(start: number, end: number = start): HighlightBox

Adds new highlight.

Params

Returns

removeHighlights

removeHighlights(start: number | null = null, end: number | null = start): void

Removes highlights based on provided range (all intersecting highlights are removed). If no parameters are provided, all highlights are removed.

Params

getHighlightBoxes

getHighlightBoxes(start: number | null = null, end: number | null = start): HighlightBox[]

Returns all highlight boxes (which represent highlights) in provided range. If no parameters are provided, all highlight boxes are returned.

Params

Returns

showGutter

showGutter(): void

Shows gutter (the area where line numbers appear).

hideGutter

hideGutter(): void

Hides gutter (the area where line numbers appear).

isGutterVisible

isGutterVisible(): boolean

Checks whether gutter (the area where line numbers appear) is visible.

Returns

showLineNumbers

showLineNumbers(): void

Shows line numbers.

hideLineNumbers

hideLineNumbers(): void

Hides line numbers.

areLineNumbersVisible

areLineNumbersVisible(): boolean

Checks whether line numbers are visible.

Returns

getCode

getCode(): string

Returns displayed code.

Returns