Terminal-Elements is a cutting-edge JavaScript library that allows developers to build styled terminal-like UI components using modern web technologies. It offers custom web components for creating terminal outputs with encapsulated styling using the Shadow DOM.

Features

Components

• <terminal-element>: A customizable terminal-like display component supporting multiple themes and syntax highlighting.
  Each terminal element scales dynamically in the width.

Themes

Terminal-Elements supports the following pre-defined themes for <terminal-element>:

• Atom One Dark (Default)
• Agate
• An Old Hope
• Monokai Sublime

Here is a preview of the supported themes:

Atom One Dark

Agate

An Old Hope

Monokai Sublime

Each theme applies distinct background colors and text styles. Custom themes can also be added by linking appropriate CSS files and overriding the background color.

Note: the white corners are not part of the element.

Installation

1. Using a local copy

Download the terminal-elements.js file and include it in your project using a <script> tag.

<script src="path/to/terminal-elements.js"></script>

2. Including Highlight.js

The library uses Highlight.js for syntax highlighting. Include the Highlight.js library and styles in your project:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

1. Using jsdelivr

Include the import in your project using a <script> tag.

<script src="https://cdn.jsdelivr.net/gh/DoctorDemon/Terminal-Elements/terminal-elements.js" defer></script>

Note: You still need to include highlight.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

Usage

Example: <terminal-element>

<terminal-element theme="monokai-sublime">
  <span class="user">user@hostname:</span> echo "Hello, Terminal!"
</terminal-element>

Contribution

Contributions are welcome! Please submit issues or pull requests on the GitHub repository to propose changes or report bugs.

License

This project is licensed under the MIT License.
Terminal-Elements colors the content in the terminals via highlight.js.
Licence and copyright for highlight.js apply:
Copyright (c) 2006, Ivan Sagalaev.
All rights reserved.
We do NOT claim ownership of highlight.js!

Credits

Built with ❤️ by developers for developers. Designed for simplicity, elegance, and flexibility.
Big thank you to highlight.js for their awesome library.