Code syntax highlight Web Component

Examples

import 'plenty-themes/cobalt2.css'
import 'plenty-themes/laser.css'
import 'code-syntax/themes/default.css'

import { CodeSyntaxElement, languages } from 'code-syntax'
import js from 'code-syntax/languages/js'

customElements.define('code-syntax', CodeSyntaxElement)

languages.js = js // can also be import(code-syntax.) directly

document.body.innerHTML = `
<code-syntax id="demo" style="display:inline-flex;" language="js" theme="laser">class Vector {
  x: number
  y: number
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
  add(v: Vector): Vector {
    return new Vector(this.x + v.x, this.y + v.y)
  }
}
</code-syntax>
`

API

const r = await compile({
  foo: /[a-z]/,
  bar: /[0-9]/,
})

const regexp = await compile({
  foo: /[a-z]+/,
  bar: [
    /[0-9]+/,
    {
      bar: /[0-5]+/,
    },
  ],
})
const html = syntax(regexp, 'hello 123 789 world')

Credits

• html-escaper by Andrea Giammarchi – fast and safe way to escape and unescape &<>'" chars
• sigl by stagas – Web framework

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas