# Highlight JS Web Component
[](https://www.jsdelivr.com/package/npm/highlight-js-wc)
[](https://badge.fury.io/js/highlight-js-wc)
Highlight JS Web Component was created to ease the use of the [Hightlight.js](https://github.com/highlightjs/highlight.js) library.
Highlight-js-wc works by appending the needed style and theme during initialization, eliminating the need to
bundle or build.
[Demo](https://codesandbox.io/s/funny-heisenberg-g30ji?fontsize=14&hidenavigation=1&theme=dark)
### Install
You can use Highlight-js-wc through a CDN or by installing it from npm with
```bash
npm install highlight-js-wc
```
### Usage
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);
});
`;
}
}
```
### Gotcha's
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.
### TODO
- Optimize importing process (less is more)
- Check for language support on all languages