Highlight JS Web Component


Highlight JS Web Component was created to ease the use of the Hightlight.js library.

Highlight-js-wc works by appending the needed style and theme during initialization, eliminating the need to
bundle or build.

Demo

$3

You can use Highlight-js-wc through a CDN or by installing it from npm with

``bash
npm install highlight-js-wc
`

$3

You can import the libary through a npm CDN, and use it straight away

`html








addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
});





`

However if you're using a framwork, it's also easy to use:

`js
import { LitElement, html } from 'lit-element';
import 'highlight-js-wc';

class DemoClass extends LitElement {
render() {
// prettier-ignore
return html

addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
});

;
}
}
`

$3

If you're getting your code formatted weirdly by prettier etc due to the lack of a

` -tag, you can use the
ignore command of the formatting library to ignore the node in the formatting process.
$3
-   Optimize importing process (less is more)
-   Check for language support on all languages