Code syntax highlight Web Component
npm install code-syntaxCode syntax highlight Web Component
npm i code-syntax | pnpm add code-syntax | yarn add code-syntax |
Try it live `` import { CodeSyntaxElement, languages } from 'code-syntax' customElements.define('code-syntax', CodeSyntaxElement) languages.js = js // can also be import(code-syntax.) directly document.body.innerHTML = #
web
#
example/web.ts view sourcets
import 'plenty-themes/cobalt2.css'
import 'plenty-themes/laser.css'
import 'code-syntax/themes/default.css'
import js from 'code-syntax/languages/js'
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)
}
}`
onmounted EventHandler<CodeSyntaxElement, CustomEvent<any>>
onunmounted EventHandler<CodeSyntaxElement, CustomEvent<any>>
mounted($) Context<CodeSyntaxElement & JsxContext<CodeSyntaxElement> & Omit<{ <T>(ctor) => #
$ CleanClass<T>
<T>(ctx) =>
"transition">> mounted($) =>
compile(def, keys) – Compiles a syntax definition.
`js`
const r = await compile({
foo: /[a-z]/,
bar: /[0-9]/,
})
def – The syntax definition to compile. Can be a promise returned by import().keys = ... Set<string>
compile(def, keys) =>
patchElements(elements, Partial<PatchOptions>) Element []Partial<PatchOptions> #
elements
patchElements(elements, Partial<PatchOptions>) =>
patchPreCodeElements(opts) Partial<PatchOptions>#
opts
patchPreCodeElements(opts) =>
syntax(regexp, s) – Syntax highlights a string as html with the given syntax.
`js``
const regexp = await compile({
foo: /[a-z]+/,
bar: [
/[0-9]+/,
{
bar: /[0-5]+/,
},
],
})
const html = syntax(regexp, 'hello 123 789 world')
regexp – The syntax definition returned by compile()RegExp | RegExpMapped
s – The string to highlight.string
syntax(regexp, s) =>
- html-escaper by Andrea Giammarchi – fast and safe way to escape and unescape &<>'" chars
- sigl by stagas – Web framework
All contributions are welcome!