https://github.com/s9e/hljs-loader
Loader for the highlight.js library
https://github.com/s9e/hljs-loader
Last synced: 3 months ago
JSON representation
Loader for the highlight.js library
- Host: GitHub
- URL: https://github.com/s9e/hljs-loader
- Owner: s9e
- License: mit
- Created: 2019-10-17T18:30:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-14T16:43:17.000Z (6 months ago)
- Last Synced: 2025-01-10T01:53:54.360Z (5 months ago)
- Language: JavaScript
- Size: 104 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
hljs-loader is a small (3 KB) script that can be added to any webpage to automatically load and run [highlight.js](https://highlightjs.org/) on all `pre > code` blocks. It automatically loads additional languages specified via the first `lang-*` or `language-*` class name of each code block.
### Usage
Add this anywhere to your HTML page:
```html
```
### Configuration
No configuration is required but a number of options are available and can be set on the `script` element that loads this script.
```html
```
data-hljs-observe- The value should be a CSS selector such as
bodyor#content. The first element that matches this selector will be observed for changes via a MutationObserver instance and new code blocks will be automatically highlighted. data-hljs-options- The value should be a JSON-encoded object that will be passed to
hljs.configure(). data-hljs-style- Name of the highlight.js style to load. If set to
none, no style will be loaded. Defaults todefault. data-hljs-url- The root URL used for loading highlight.js files. Defaults to jsDelivr's URL.
### API
By default, all code blocks are highlighted when the library is loaded and you do not need to call the library explicitly. However, there may be some situations where you want to manually trigger highlighting or observe a section of the page for new code blocks.
hljsLoader.highlightBlocks(element)- Highlight all blocks in element's subtree. New languages may be loaded and some blocks may be highlighted asynchronously.
```js
hljsLoader.highlightBlocks(document.body);
``` hljsLoader.observe(selector)- Observe the first element that matches given CSS selector and automatically highlight new code blocks.
```js
hljsLoader.observe('#id');
``` hljsLoader.disconnect()- Disconnect the observer and stop looking for new code blocks.