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