https://github.com/stagas/code-syntax

Code syntax highlight Web Component
https://github.com/stagas/code-syntax

custom-element highlight syntax web-component

Last synced: about 1 year ago
JSON representation

Code syntax highlight Web Component

• Host: GitHub
• URL: https://github.com/stagas/code-syntax
• Owner: stagas
• License: mit
• Created: 2021-12-15T04:04:18.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-01T14:02:41.000Z (almost 4 years ago)
• Last Synced: 2025-03-12T09:09:27.614Z (over 1 year ago)
• Topics: custom-element, highlight, syntax, web-component
• Language: Jest Snapshot
• Homepage: https://stagas.github.io/code-syntax/
• Size: 179 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


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](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)