Code Box

Examples

This page showcases a few examples of what can be created with Code Box.

Code View

Simple Code View

<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));

Highlighting

<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);

Code Boxes

Tab Code Box

<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 data-cb-name="Image.png" data-cb-file="./img/Image.png"></div>
</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);

Project Code Box

<div id="MyProjectCodeBox">
    <ul data-cb-folders>
        <li>
            src
            <ul>
                <li>
                    main
                    <ul>
                        <li>java</li>
                        <li>resources</li>
                        <li>webapp</li>
                    </ul>
                </li>
                <li>
                    test
                    <ul>
                        <li>java</li>
                        <li>resources</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>target</li>
    </ul>

    <pre data-cb-name="MyApp.java" data-cb-package="io.github.jirkasa" data-cb-active><code>package io.github.jirkasa;

public class MyApp {
    public static void main(String[] args) {
        System.out.println("Hello world!");
    }
}</code></pre>

    <pre data-cb-name="pom.xml"><code><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>example-app</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>example-app</name>
</project></code></pre>
</div>
import { ProjectCodeBox } from "@jirkasa/code-box";

new ProjectCodeBox(document.getElementById("MyProjectCodeBox"), {
    minCodeViewLinesCount: 20,
    projectName: "example-app",
    packagesFolderPath: "src/main/java",
    foldersDelimiterForPackages: ".",
    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"
    }
});
  • src
    • main
      • java
      • resources
      • webapp
    • test
      • java
      • resources
  • target
package io.github.jirkasa;

public class MyApp {
    public static void main(String[] args) {
        System.out.println("Hello world!");
    }
}
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>example-app</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>example-app</name>
</project>

Project Code Box Inheritance

<div id="CodeBox1">
    <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>
</div>

<br>

<div style="font-size: 3.2rem;">&darr;</div>

<br>

<div id="CodeBox2">
    <pre data-cb-name="main.js" data-cb-folder="js" data-cb-active><code>let x = 1;
let y = 2;

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

const codeBox1 = new ProjectCodeBox(document.getElementById("CodeBox1"), {
    minCodeViewLinesCount: 10,
    openPanelOnInit: true,
    svgSpritePath: "./img/icon-sprite.svg",
    projectName: "example-app",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download",
        panelOpenButton: "double-arrow-right",
        folderArrow: "arrow-right",
        folder: "folder",
        project: "inventory",
        package: "package"
    }
});

new ProjectCodeBox(document.getElementById("CodeBox2"), {
    minCodeViewLinesCount: 10,
    openPanelOnInit: true,
    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"
    }
}, codeBox1);
h1 {
    font-size: 16px;
    color: red;
}

↓

let x = 1;
let y = 2;

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

Styling

Styling Code View

<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: "4"
});
.cb-code-view {
    background-color: #191A1B;
}

.cb-code-view__gutter {
    font-family: "Ubuntu Sans Mono", monospace;
    background-color: #282B2C;
}

.cb-code-view__line-number {
    color: #A4A9AA;
}

.cb-code-view__content code {
    font-family: "Ubuntu Sans Mono", monospace;
    color: #E3EBEC;
}

.cb-code-view__highlight {
    background-color: rgba(#3EDCF5, .15);
    border: .1rem solid #5D97A0;
    border-radius: .4rem;
}
let x = 1;
let y = 2;

let result = x + y;

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

Styling Tab Code Box

<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 data-cb-name="Image.png" data-cb-file="./img/Image.png"></div>
</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"
    }
});
.cb-code-view {
    background-color: #191A1B;
}

.cb-code-view__gutter {
    font-family: "Ubuntu Sans Mono", monospace;
    background-color: #282B2C;
}

.cb-code-view__line-number {
    color: #A4A9AA;
}

.cb-code-view__content code {
    font-family: "Ubuntu Sans Mono", monospace;
    color: #E3EBEC;
}

.cb-code-view__highlight {
    background-color: rgba(#3EDCF5, .15);
    border: .1rem solid #5D97A0;
    border-radius: .4rem;
}

.cb-tab-code-box__tab,
.cb-tab-code-box__tab:link,
.cb-tab-code-box__tab.visited {
    background-color: #99c7ce;
    padding: 0.4rem 0.8rem;
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}

.cb-tab-code-box__tab--active,
.cb-tab-code-box__tab--active:link,
.cb-tab-code-box__tab--active:visited {
    background-color: #54BBCA;
    border: none;
}

.cb-tab-code-box__tab:hover,
.cb-tab-code-box__tab:focus-visible {
    background-color: #54BBCA;
}

.cb-tab-code-box__tab:focus-visible {
    outline: 0.2rem solid #282B2C;
    outline-offset: -0.2rem;
}

.cb-tab-code-box__tab-icon svg {
    fill: #282B2C;
}

.cb-tab-code-box__tab-download-icon svg {
    fill: #282B2C;
}

.cb-tab-code-box__tab-text {
    color: #282B2C;
}

.cb-tab-code-box__no-code-view {
    background-color: #191A1B;
}

.cb-tab-code-box__no-code-view-message {
    color: #E3EBEC;
}
let x = 1;
let y = 2;

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

console.log(string1 + string2);

Styling Project Code Box

<div id="MyProjectCodeBox">
    <ul data-cb-folders>
        <li>
            src
            <ul>
                <li>
                    main
                    <ul>
                        <li>java</li>
                        <li>resources</li>
                        <li>webapp</li>
                    </ul>
                </li>
                <li>
                    test
                    <ul>
                        <li>java</li>
                        <li>resources</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>target</li>
    </ul>

    <pre data-cb-name="MyApp.java" data-cb-package="io.github.jirkasa" data-cb-active><code>package io.github.jirkasa;

public class MyApp {
    public static void main(String[] args) {
        System.out.println("Hello world!");
    }
}</code></pre>

    <pre data-cb-name="pom.xml"><code><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>example-app</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>example-app</name>
</project></code></pre>
</div>
import { ProjectCodeBox } from "@jirkasa/code-box";

new ProjectCodeBox(document.getElementById("MyProjectCodeBox"), {
    minCodeViewLinesCount: 20,
    projectName: "example-app",
    packagesFolderPath: "src/main/java",
    foldersDelimiterForPackages: ".",
    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"
    }
});
.cb-code-view {
    background-color: #191A1B;
}

.cb-code-view__gutter {
    font-family: "Ubuntu Sans Mono", monospace;
    background-color: #282B2C;
}

.cb-code-view__line-number {
    color: #A4A9AA;
}

.cb-code-view__content code {
    font-family: "Ubuntu Sans Mono", monospace;
    color: #E3EBEC;
}

.cb-code-view__highlight {
    background-color: rgba(#3EDCF5, .15);
    border: .1rem solid #5D97A0;
    border-radius: .4rem;
}
    
.cb-project-code-box {
    background-color: #191A1B;
}

.cb-project-code-box__no-code-view {
    background-color: #191A1B;
}

.cb-project-code-box__no-code-view-message {
    color: #E3EBEC;
}

.cb-project-code-box__panel {
    background-color: #191A1B;
}

.cb-project-code-box__panel-content {
    background-color: #bacccf;
}

.cb-project-code-box__panel-open-button {
    background-color: #54BBCA;
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

.cb-project-code-box__panel-open-button svg {
    fill: #282B2C;
}

.cb-project-code-box__panel-heading {
    font-weight: 600;
    color: #282B2C;
}

.cb-project-code-box__panel-item,
.cb-project-code-box__panel-item:link,
.cb-project-code-box__panel-item:visited {
    color: #282B2C;
    gap: 0.4rem;
}

.cb-project-code-box__panel-item--project .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--project:link .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--project:visited .cb-project-code-box__panel-item-icon svg {
    fill: #258291;
}

.cb-project-code-box__panel-item--package .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--package:link .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--package:visited .cb-project-code-box__panel-item-icon svg {
    fill: #5079ae;
}

.cb-project-code-box__panel-item--default-package .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--default-package:link .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--default-package:visited .cb-project-code-box__panel-item-icon svg {
    fill: #5E6364;
}

.cb-project-code-box__panel-item--folder .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--folder:link .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--folder:visited .cb-project-code-box__panel-item-icon svg {
    fill: #806f9b;
}

.cb-project-code-box__panel-item--file .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--file:link .cb-project-code-box__panel-item-icon svg,
.cb-project-code-box__panel-item--file:visited .cb-project-code-box__panel-item-icon svg {
    fill: #282B2C;
}

.cb-project-code-box__panel-item-arrow-icon {
    width: 1.8rem;
    height: 1.8rem;
}

.cb-project-code-box__panel-item-arrow-icon svg {
    fill: #5E6364;
}

.cb-project-code-box__panel-item-download-icon svg {
    fill: #258291;
}

.cb-project-code-box__panel-horizontal-rule {
    background-color: #a5b6b9;
}
  • src
    • main
      • java
      • resources
      • webapp
    • test
      • java
      • resources
  • target
package io.github.jirkasa;

public class MyApp {
    public static void main(String[] args) {
        System.out.println("Hello world!");
    }
}
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>io.github.jirkasa</groupId>
    <artifactId>example-app</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>example-app</name>
</project>

Other

Visualization of Code Execution

<pre id="MyCodeView"><code>let counter = 0;

// infinite loop
while (counter >= 0) {
    counter++;

    if (counter % 3 === 0) {
        console.log("Current count: " + counter);
    }
}</code></pre>
import { CodeView } from "@jirkasa/code-box";

const codeView = new CodeView(document.getElementById("MyCodeView"));

const highlightBox = codeView.addHighlight(1);
const steps = [4, 5, 7, 4, 5, 7, 4, 5, 7, 8];
let currentStep = 0;

setInterval(() => {
    const lineNumber = steps[currentStep];

    highlightBox.setRange(lineNumber);

    if (currentStep === (steps.length - 1)) {
        currentStep = 0;
    } else {
        currentStep++;
    }
}, 400);
let counter = 0;

// infinite loop
while (counter >= 0) {
    counter++;

    if (counter % 3 === 0) {
        console.log("Current count: " + counter);
    }
}

Contents