Version: v0.5.0 - Beta.  We welcome contributors & feedback.  THanks!

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'); }}
}

See Also