highlight-js-wc
v1.1.3
Published
A Web Component wrapper for the Highlight JS library
Downloads
21
Readme
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.
Install
You can use Highlight-js-wc through a CDN or by installing it from npm with
npm install highlight-js-wcUsage
You can import the libary through a npm CDN, and use it straight away
<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/highlight-js-wc.min.js"></script>
</head>
<body>
<!-- prettier-ignore -->
<highlight-js lang="javascript" theme="gruvbox-dark">
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
});
</highlight-js>
<script src="src/index.js" type="module"></script>
</body>
</html>However if you're using a framwork, it's also easy to use:
import { LitElement, html } from 'lit-element';
import 'highlight-js-wc';
class DemoClass extends LitElement {
render() {
// prettier-ignore
return html`
<highlight-js lang="javascript">
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
});
</highlight-js>
`;
}
}Gotcha's
If you're getting your code formatted weirdly by prettier etc due to the lack of a <pre> -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