CSS Style

Custom Properties

.terminal {
    --color: green;
    --background: white;
    --link-color: darkblue;
    --animation: terminal-underline;
    --line-thickness: 3;
}

Size

.terminal {
    --size: 1.5;
}

You can change the size depending on the size of the terminal (browser window) using media queries.

See Responsive Font Size

Height

From version 2.43.0 (with a fix in 2.43.1) you can use --rows CSS variable to set the terminal to the fixed number of rows:

.terminal {
    --rows: 25;
}

The --cols was not implemented because it was not possible to set the width and taking scrollbar into account.

Resize

If you create your terminal as part of the page (not full screen) you may want to add resize (default CSS feature):

.terminal {
   resize: both;
   overflow: hidden;
}

You can also set resize to vertical if you resize in one dimension (horizontal also works). Resize will change the height and/or of the terminal main element and will overwrite any dimension set by the library.

Style just the cursor

.cmd-cursor {
    --original-color: white;
}

Check this Codepen demo to see the styling of a different parts of the terminal.

Glow

From version 2.29.0 there is css variable that can be easily used to enable glow effect:

.terminal {
    --color: rgba(0, 200, 0, 0.99);
    --animation: terminal-glow;
    --glow: 1;
}

From version 2.31.0 you don't need to change animation to have glow on the cursor.

See Glow Demo

Using custom properties with formatting

You can use custom properties on a single piece of text that you render using echo.

See Attribute Formatter.

Creating Terminal that fits into 3D image

You can use CSS transform to fit the terminal into any image. An example image of a computer or laptop. Here is a demo that shows how to calculate the matrix needed for transformation.

Using Terminal style outside of Terminal

If you want to use links with the same style as the terminal or set background/color in one place. For instance if you want footer in same style as the terminal you can use this code (added in 2.32.0):

<div class="terminal external">
   this is random text with <a href="https://example.com">link</a>
<div>

Reduced motion

You can respect user settings and disable cursor animation with this bit of CSS:

@media (prefers-reduced-motion) {
    :root {
        --animation: terminal-none;
    }
}

animation-none was added in version 2.33.0. The above CSS is the default since version 2.34.0.

Custom font

If you want to use custom font with the library:

:root {
    --size: 1.4;
    --font: msdos;
}
@font-face {
    font-family: msdos;
    src: url("https://cdn.jsdelivr.net/gh/jcubic/static/assets/dos-vga.ttf");
}

You need to create dummy element that will force the load of the font:

.preloader {
    font-family: msdos;
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

and use this HTML:

<div class="preloader visually-hidden">x</div>

and then in JavaScript wait for the all fonts to load:

document.fonts.ready.then(() => {
    const term = $('body').terminal();
});

See this CodePen demo to see this in action

The code was abstracted away in version 2.37.0

Color Transition

Another cool effect that you can create is color transition. You can create the animation of two colors (CSS variables like --color or --background) and animate them when registering the CSS variable as color.

First, add a class to some text:

term.echo('[[;;;item]HELLO]');

@property --color {
  syntax: '<color>';
  inherits: true;
  initial-value: #ccc;
}

then you can add transition:

.item {
    --color: hsl(0deg, 100%, 50%);
    cursor: pointer;
    --glow: 1;
    transition: --color 0.5s linear;
}
.item:hover {
    --color: hsl(180deg, 100%, 50%);
}

Those @property were added to the library in version 2.35.0.

See this demo.

See also

• responsive font size