Code Box

Getting Started

Welcome to the Code Box documentation. Code Box is a JavaScript library developed in TypeScript, designed for showcasing code samples on the web. While it doesn't provide syntax highlighting itself, it serves as a container that allows users to select and display different code samples. You can either enable users to switch between different code samples with a few buttons or present the entire source code in a project-like format. For syntax highlighting, you can use libraries like highlight.js.

Installation

Code box is installed via NPM like any other package.

npm install @jirkasa/code-box --save

After installation, you need to integrate the core CSS styles into your project. If you're using a CSS preprocessor, you can import the styles as shown below. If you're not using a preprocessor, simply copy the CSS file from the node_modules folder.

@import "@jirkasa/code-box/dist/style.min.css";

Usage Example

The most basic component of the library is the CodeView. It is simply a code sample. The following example shows how to create it.

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

console.log("result: " + (x + y));</code></pre>
import { CodeView } from "@jirkasa/code-box";

new CodeView(document.getElementById("MyCodeView"));
let x = 1;
let y = 2;

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

The library also includes CodeBox components, which are composed of multiple CodeViews. These are the main components of the library. The following example demonstrates how to create a TabCodeBox, which offers the ability to switch between code samples using tabs.

<div id="MyTabCodeBox">
    <pre data-cb-name="addition" data-cb-active><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
    <pre data-cb-name="connecting strings"><code>let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);</code></pre>
</div>
import { TabCodeBox } from "@jirkasa/code-box";

new TabCodeBox(document.getElementById("MyTabCodeBox"), {
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download"
    }
});
let x = 1;
let y = 2;

console.log("result: " + (x + y));
let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);

Another type of CodeBox is a ProjectCodeBox. This component is designed to simulate a complete project by displaying the entire source code. The following example demonstrates how to create it.

<div id="MyProjectCodeBox">
    <pre data-cb-active data-cb-name="style.css" data-cb-folder="css" data-cb-active><code>h1 {
    font-size: 16px;
    color: red;
}</code></pre>
    <pre data-cb-name="main.js" data-cb-folder="js"><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
</div>
import { ProjectCodeBox } from "@jirkasa/code-box";

new ProjectCodeBox(document.getElementById("MyProjectCodeBox"), {
    minCodeViewLinesCount: 10,
    projectName: "example",
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download",
        panelOpenButton: "double-arrow-right",
        folderArrow: "arrow-right",
        folder: "folder",
        project: "inventory",
        package: "package"
    }
});
h1 {
    font-size: 16px;
    color: red;
}
let x = 1;
let y = 2;

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

Styling

Code Box comes with only the core styles, leaving the rest up to you. For more details on how to customize the styling, refer to the chapter on styling.

Automatic Code Box Creation

If you have multiple code boxes and want to avoid creating them manually, you can generate them all at once using a creator. The example below shows how to do this for tab code boxes. You simply create a creator and call its create method, passing in a selector to target the elements from which the code boxes will be generated. For more details, refer to the chapter on creators.

<div data-my-code-box>
    <pre data-cb-name="addition" data-cb-active><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
    <pre data-cb-name="connecting strings"><code>let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);</code></pre>
</div>

<br>

<div data-my-code-box>
    <pre data-cb-name="arrays" data-cb-active><code>let numbers = [5, 3, 1];
let strings = ["code", "box"];</code></pre>
    <pre data-cb-name="object"><code>let book = {
    title: "Design Patterns",
    year: 1994
}</code></pre>
</div>
import { TabCodeBoxCreator } from "@jirkasa/code-box";

const creator = new TabCodeBoxCreator({
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download"
    }
});
creator.create("[data-my-code-box]");
let x = 1;
let y = 2;

console.log("result: " + (x + y));
let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);

let numbers = [5, 3, 1];
let strings = ["code", "box"];
let book = {
    title: "Design Patterns",
    year: 1994
}

Contents