@evergreen-wc/eve-highlight

eve-highlight

An Evergreen Highlight.js Web Component

Demo

Install

npm i @evergreen-wc/eve-highlight

Usage

import { html, LitElement } from 'lit';
import '@evergreen-wc/eve-highlight';

// highlightjs themes https://github.com/highlightjs/highlight.js/tree/master/src/styles
import github from '@evergreen-wc/eve-highlight/themes/github.css';

// Javascript example
// Escape $ with \
const code = `
class MyComponent extends LitElement {
  constructor() {
    this.name = 'helloworld'
  }

  renderThing() {
    if(this.name === 'helloworld'){
      console.log(this.name)
    }
  }
}
customElements.define('my-component', MyComponent);
`;

class SomeComponent extends LitElement {
  render() {
    return html`
      <eve-highlight type="js" theme="${github}" code="${code}"></eve-highlight>
    `;
  }
}
customElements.define('some-component', SomeComponent);

Props