TerminHTML Bootstrap
Automatically initialize TerminHTML terminals when elements come into view
Basic Usage
First, set up your HTML to something that can be rendered with
TerminHTML JS. To make it work
by default with the bootstrap script, just add the class terminhtml. For example:
<pre class="terminhtml">
$ echo woo
woo
</pre>Then also add the bootstrap script to your HTML:
<head>
<script src="https://unpkg.com/@terminhtml/bootstrap@1.x/dist/@terminhtml-bootstrap.umd.js"></script>
</head>This will automatically set up TerminHTML for any blocks with class terminhtml, and initialize them
once they come into view.
Install
You can simply add the script tag to your page as shown in the above example. If you want to customize the bootstrap behavior, you can use the NPM package:
npm install @terminhtml/bootstrapUsage
See the above example for basic usage. You can also import the bootstrap function directly to pass other options:
import { bootstrapTerminHTMLs } from "@terminhtml/bootstrap/dist/src/bootstrap";
bootstrapTerminHTMLs({ class: "my-terminhtml" });Development Status
This project uses semantic-release for versioning.
Any time the major version changes, there may be breaking changes. If it is working well for you, consider
pegging to the current major version, e.g. @terminhtml/bootstrap@v1, to avoid breaking changes. Alternatively,
you can always point to the most recent stable release with the @terminhtml/bootstrap@latest.
Developing
Clone the repo and then run npm install to set up the pre-commit hooks.
Run npm run dev to start the development server, and npm run build to create a production build
of the library.
The library files are stored in src, while the files for the development page are in dev-src.
Author
Created by Nick DeRobertis. MIT License.