code-syntax

Code syntax highlight Web Component

`npm i code-syntax` `pnpm add code-syntax` `yarn add code-syntax`

## Examples

# web

Try it live

# view source

```ts 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 = ` 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) } } ` ```

## API

# CodeSyntaxElement

src/element.ts#L45

# constructor()

# new CodeSyntaxElement()

CodeSyntaxElement

# codeHTML

src/element.ts#L53

string

# codeRawText

src/element.ts#L54

string

# codeRef

src/element.ts#L52

HTMLElement

# highlight

src/element.ts#L55

# (s)

# s

string

(s) =>

string

# language = $.String

src/element.ts#L48

undefined | string

# onTextContent

src/element.ts#L56

# (textContent)

# textContent

string

(textContent) =>

void

# onmounted

EventHandler<CodeSyntaxElement, CustomEvent<any>>

# onunmounted

EventHandler<CodeSyntaxElement, CustomEvent<any>>

# root = ...

src/element.ts#L46

ShadowRoot

# syntax

src/element.ts#L51

SyntaxOrImport

# theme = $.String

src/element.ts#L49

undefined | string

# mounted($)

src/element.ts#L58

# $

Context<CodeSyntaxElement & JsxContext<CodeSyntaxElement> & Omit<{

# ctor

Class<T>

CleanClass

# ctx

T | Class<T>

Wrapper

__module

"transition"

mounted($) =>

void

# PatchOptions

src/util.ts#L3

# theme

src/util.ts#L4

string

# getLanguage(el)

src/util.ts#L5

# el

Element

getLanguage(el) =>

string

# SyntaxDefinition

src/syntax.ts#L6

# RegExpMap

src/syntax.ts#L3

Record<string, RegExpMapped>

# RegExpMapped

src/syntax.ts#L4

RegExp & {

# keys

src/syntax.ts#L4

Set<string>

# map

src/syntax.ts#L4

RegExpMap

# SyntaxOrImport

src/syntax.ts#L10

SyntaxDefinition | Promise<{

# default

src/syntax.ts#L10

SyntaxDefinition

# languages = {}

src/element.ts#L8

Record<string, SyntaxOrImport>

# compile(def, keys) – Compiles a syntax definition.

src/syntax.ts#L24

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

# def – The syntax definition to compile. Can be a promise returned by import().

SyntaxOrImport

# keys = ...

Set<string>

compile(def, keys) =>

Promise

RegExpMapped

# patchElements(elements, Partial<PatchOptions>)

src/util.ts#L8

# elements

Element []

Partial

PatchOptions

patchElements(elements, Partial<PatchOptions>) =>

void

# patchPreCodeElements(opts)

src/util.ts#L27

# opts

Partial<PatchOptions>

patchPreCodeElements(opts) =>

void

# syntax(regexp, s) – Syntax highlights a string as html with the given syntax.

src/syntax.ts#L68

```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) =>

string

## Credits - [html-escaper](https://npmjs.org/package/html-escaper) by [Andrea Giammarchi](https://github.com/WebReflection) – fast and safe way to escape and unescape &<>'" chars - [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework ## Contributing [Fork](https://github.com/stagas/code-syntax/fork) or [edit](https://github.dev/stagas/code-syntax) and submit a PR. All contributions are welcome! ## License MIT © 2022 [stagas](https://github.com/stagas)

code-syntax

npm i code-syntax pnpm add code-syntax yarn add code-syntax

`npm i code-syntax` `pnpm add code-syntax` `yarn add code-syntax`