Terminal-Elements Logo

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.

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

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:

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.

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

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

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>

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

This imports highlight.js. and terminal-elements.js

<script src="https://cdn.jsdelivr.net/gh/DoctorDemon/Terminal-Elements/terminal-elements.js" defer></script>
<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>
<terminal-element theme="monokai-sublime">
 <span class="user">user@hostname:</span> echo "Hello, Terminal!"
</terminal-element>

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

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.

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