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

example/web.ts

``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>
        
  <T>(ctor)   =>  
CleanClass<T>
  #  ctx    
    T | Class<T>
        
  <T>(ctx)   =>  
Wrapper<T>
} & __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 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

Examples

# web

Try it live

# view source

example/web.ts

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

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>
        
  <T>(ctor)   =>  
CleanClass<T>
  #  ctx    
    T | Class<T>
        
  <T>(ctx)   =>  
Wrapper<T>
} & __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

# 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

code-syntax

code-syntax

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

Examples

API

Credits

Contributing

License

code-syntax

code-syntax

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

Examples

API

Credits

Contributing

License

`npm i code-syntax`

`pnpm add code-syntax`

`yarn add code-syntax`

`API`

`npm i code-syntax`

`pnpm add code-syntax`

`yarn add code-syntax`

`API`