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

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