Code Box

Styling

Code Box comes with only the core styles. It's entirely up to you how you style it. It doesn't offer any pre-built themes, giving you complete flexibility to match the look and feel of your project. In this section, you’ll find out how you can do that.

Rules For Styling

You have the freedom to style the code view and code box components however you like, with a few exceptions. For code boxes, do not set the height for the element that displays the message when no code view is selected, and do not set a minimum height for the code view container. For code view, do not set line height. These properties are controlled by options (or data attributes) to support lazy initialization.

Styling Code View

Core Styles

Following code sample shows the core CSS styles for CodeView (written in LESS preprocessor).

.cb-code-view {
    display: flex;

    background-color: #bbb;

    font-family: monospace;

    &__gutter {
        flex: 0 1;

        font-size: 1.6rem;
        text-align: right;

        background-color: #aaa;

        padding: .8rem;

        &--hidden {
            display: none;
        }
    }

    &__line-number {
        color: #000;

        &--hidden {
            display: none;
        }
    }

    &__container {
        flex: 1 1;

        position: relative;
        width: 100%;
        overflow: hidden;
    }

    &__content {
        width: 100%;
        height: 100%;

        overflow-x: auto;
        overflow-y: hidden;
        padding: .8rem;

        pre {
            width: 100%;
        }

        code {
            font-size: 1.6rem;

            color: #000;

            overflow: visible;
        }
    }

    &__highlight {
        position: absolute;
        top: .8rem;
        left: .8rem;

        width: ~"calc(100% - 1.6rem)";

        background-color: rgba(#1f8199, .15);
    }
}

Example of styling

The following code sample demonstrates how to style the CodeView.

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

    &__gutter {
        font-family: "Ubuntu Sans Mono", monospace;
        background-color: #282B2C;
    }

    &__line-number {
        color: #A4A9AA;
    }

    &__content {
        code {
            font-family: "Ubuntu Sans Mono", monospace;
            color: #E3EBEC;
        }
    }

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

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

Styling Tab Code Box

Core Styles

Following code sample shows the core CSS styles for TabCodeBox (written in LESS preprocessor).

.cb-tab-code-box {

    &__tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }

    &__tab {
        &, &:link, &:visited {
            display: flex;
            gap: .4rem;
            align-items: center;
            
            font-family: inherit;
            text-decoration: none;
            white-space: nowrap;
    
            background-color: #999;
            border: none;
    
            cursor: pointer;
        }

        &--active {
            &, &:link, &:visited {
                border: .1rem solid #000;
            }
        }
    }

    &__tab-icon {
        width: 1.6rem;
        height: 1.6rem;

        svg {
            width: 100%;
            height: 100%;
            fill: #000;
        }
    }

    &__tab-text {
        font-size: 1.6rem;
        color: #000;
    }

    &__tab-download-icon {
        width: 1.2rem;
        height: 1.2rem;

        svg {
            width: 100%;
            height: 100%;
            fill: #000;
        }
    }

    &__code-view-container {
        display: flex;
        flex-direction: column;

        &--hidden {
            display: none;
        }

        > div {
            flex-grow: 1;
        }
    }

    &__no-code-view {
        background-color: #bbb;
        display: flex;
        justify-content: center;
        align-items: center;

        &--hidden {
            display: none;
        }
    }

    &__no-code-view-message {
        font-size: 1.6rem;

        color: #000;
    }
}

Example of styling

The following code sample demonstrates how to style the TabCodeBox (CodeView is already styled).

.cb-tab-code-box {
    &__tab {
        &, &:link, &.visited {
            background-color: #99c7ce;
            padding: .4rem .8rem;
            border-top-left-radius: .8rem;
            border-top-right-radius: .8rem;
        }

        &--active {
            &, &:link, &:visited {
                background-color: #54BBCA;
                border: none;
            }
        }

        &:hover, &:focus-visible {
            background-color: #54BBCA;
        }

        &:focus-visible {
            outline: .2rem solid #282B2C;
            outline-offset: -.2rem;
        }
    }

    &__tab-icon {
        svg {
            fill: #282B2C;
        }
    }

    &__tab-download-icon {
        svg {
            fill: #282B2C;
        }
    }

    &__tab-text {
        color: #282B2C;
    }
    
    &__no-code-view {
        background-color: #191A1B;
    }

    &__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

Core Styles

Following code sample shows the core CSS styles for ProjectCodeBox (written in LESS preprocessor).

.cb-project-code-box {
    display: flex;
    flex-direction: row-reverse;
    background-color: #bbb;

    position: relative;
    width: 100%;

    overflow: hidden;

    &__panel-container {
        flex: 0 0 3.2rem;
    }

    &__code-view-container {
        flex: 2;
        overflow: hidden;

        &--hidden {
            display: none;
        }

        > div {
            height: 100%;
        }
    }

    &__no-code-view {
        flex: 2;
        background-color: #bbb;

        display: flex;
        justify-content: center;
        align-items: center;

        &--hidden {
            display: none;
        }
    }

    &__no-code-view-message {
        font-size: 1.6rem;

        color: #000;
    }

    &__panel {
        display: flex;
        flex-direction: row-reverse;

        position: absolute;
        top: 0;
        right: 100%;
        z-index: 10;
        transform: translateX(3.2rem);
        
        max-width: 75%;
        height: 100%;
        background-color: #aaa;

        transition: all .2s;

        &--opened {
            transform: translateX(100%);
        }
    }

    &__panel-content {
        flex: 2;

        white-space: nowrap;

        padding: .8rem;

        overflow: auto;
    }

    &__panel-open-button {
        flex-shrink: 0;
        width: 3.2rem;

        background-color: #999;
        border: none;

        cursor: pointer;

        position: relative;
    }

    &__panel-open-button-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 2.4rem;
        height: 2.4rem;

        svg {
            width: 100%;
            height: 100%;
            fill: #000;
        }
    }

    &__panel-open-button--opened &__panel-open-button-icon {
        transform: translate(-50%, -50%) scaleX(-1);
    }

    &__panel-heading {
        font-size: 1.6rem;
        line-height: 2rem;

        color: #000;

        margin-bottom: .4rem;
    }

    &__panel-folder-structure-container {
    }

    &__panel-packages-container {
    }

    &__panel-item {
        &, &:link, &:visited {
            display: flex;
            align-items: center;

            background-color: transparent;
            border: none;
            text-decoration: none;

            width: fit-content;

            cursor: pointer;

            margin-bottom: .4rem;
        }

        &--active {
            &, &:link, &:visited {
                text-decoration: underline;
            }
        }

        &--folder-opened {

        }

        &--project {

        }

        &--package {

        }

        &--default-package {

        }

        &--folder {

        }

        &--file {

        }
    }

    &__panel-item-arrow-icon {
        width: 1rem;
        height: 1rem;

        transition: transform .2s;

        svg {
            width: 100%;
            height: 100%;
            fill: #000;
        }
    }
    &__panel-item--folder-opened &__panel-item-arrow-icon {
        transform: rotate(90deg);
    }

    &__panel-item-icon {
        width: 2rem;
        height: 2rem;

        svg {
            width: 100%;
            height: 100%;
            fill: #000;
        }
    }

    &__panel-item-text {
        font-size: 1.6rem;
        line-height: 2rem;
        text-decoration: none;
        text-align: left;

        color: #000;
    }

    &__panel-item-download-icon {
        width: 1.6rem;
        height: 1.6rem;
        
        svg {
            width: 100%;
            height: 100%;
            fill: #000;
        }
    }

    &__panel-collapsible {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding-left: 1.9rem;

        &--opened {

        }
    }

    &__panel-horizontal-rule {
        border: none;
        background-color: #000;

        width: 100%;
        height: .1rem;

        margin: .8rem 0;
    }
}

Example of styling

The following code sample demonstrates how to style the ProjectCodeBox (CodeView is already styled).

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

    &__no-code-view {
        background-color: #191A1B;
    }

    &__no-code-view-message {
        color: #E3EBEC;
    }

    &__panel {
        background-color: #191A1B;
    }

    &__panel-content {
        background-color: #bacccf;
    }

    &__panel-open-button {
        background-color: #54BBCA;
        border-top-right-radius: .8rem;
        border-bottom-right-radius: .8rem;
    }

    &__panel-open-button {
        svg {
            fill: #282B2C;
        }
    }

    &__panel-heading {
        font-weight: 600;

        color: #282B2C;
    }

    &__panel-item {
        &, &:link, &:visited {
            color: #282B2C;
            gap: .4rem;
        }

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

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

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

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

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

    &__panel-item-arrow-icon {
        width: 1.8rem;
        height: 1.8rem;

        svg {
            fill: #5E6364;
        }
    }

    &__panel-item-download-icon {
        svg {
            fill: #258291;
        }
    }

    &__panel-horizontal-rule {
        background-color: #a5b6b9;
    }
}
package io.github.jirkasa;

public class MyApp {
    public static void main(String[] args) {
        System.out.println("Hello world!");
    }
}
public class Book {
    private String title;
    private int year;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public int getYear() {
        return year;
    }

    public void setYear(int year) {
        this.year = year;
    }
}
This is example app.

Virtual Code Box

VirtualCodeBox is a special type of code box, that is controlled only through code. Because it lacks any additional GUI, you don't have to style it if there will always be an active code view. However, if there isn't an active code view, you can style the element that is displayed when no code view is active. The following code sample shows the core CSS styles (written in LESS preprocessor).

.cb-virtual-code-box {

    &__code-view-container {
        display: flex;
        flex-direction: column;

        &--hidden {
            display: none;
        }

        > div {
            flex-grow: 1;
        }
    }

    &__no-code-view {
        background-color: #bbb;
        display: flex;
        justify-content: center;
        align-items: center;

        &--hidden {
            display: none;
        }
    }

    &__no-code-view-message {
        font-size: 1.6rem;
        color: #000;
    }
}

Contents