TerminHTML Bootstrap
<a href="https://nickderobertis.github.io/terminhtml/">
<img src="https://nickderobertis.github.io/terminhtml/_static/images/demo-output.gif" alt="TerminHTML example GIF">
</a>
This GIF doesn't do TerminHTML justice, check out the full version in a CodePen example
!npm packagenpm-imgnpm-url !Build Statusbuild-imgbuild-url !Downloadsdownloads-imgdownloads-url !Issuesissues-imgissues-url !Code Coveragecodecov-imgcodecov-url !Commitizen Friendlycommitizen-imgcommitizen-url !Semantic Releasesemantic-release-imgsemantic-release-url
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 classterminhtml
. 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.See this example on CodePen.
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/bootstrap
Usage
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 runnpm 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
.