JavaScript Plugins
THT comes with a few small JavaScript plugins that you can include on your site.
Just call the Js.plugin function at the bottom of your HTML body.
colorCode
Apply syntax highlighting to all <pre> blocks on the current page.
This feature is programming language-agnostic. It colorizes numbers, quote-enclosed strings, comments, and common programming keywords (e.g. if, function).
Add a .no-color-code class to any element that you want the plugin to skip. Or add a .no-color-code class to the document body to skip the entire page.
template yourHtml() {
<pre>>>
let num = 123;
let string = 'abcdef';
</>
// bottom of page ...
{{ Js.plugin('colorCode') }}
// Optional 2nd theme argument.
// Supported themes: light (default), dark
{{ Js.plugin('colorCode', 'dark') }}
}lazyLoadImages
Only load images with data-src attributes when they are about to enter the user’s viewport.
This can save nearly half (50%) of the bytes served by images on your site overall, providing a faster user experience for your visitors.
template yourHtml() {
<img data-src="path/to/image.png" />
// bottom of page ...
{{ Js.plugin('lazyLoadImages'); }}
}