Skip to content

Latest commit

 

History

History
96 lines (76 loc) · 33.3 KB

README.md

File metadata and controls

96 lines (76 loc) · 33.3 KB

code-edit

Lightweight code editor Web Component with syntax highlighting

npm i code-edit pnpm add code-edit yarn add code-edit

Examples

# web
    # view source example/web.ts

    import 'code-syntax/themes/default.css'
    import 'plenty-themes/laser.css'
    
    import { CodeEditElement, languages } from 'code-edit'
    
    languages.js = import('code-syntax/languages/js.js')
    customElements.define('code-edit', CodeEditElement)
    
    const style = document.createElement('style')
    style.textContent = /*css*/ `
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    body {
      background: #333;
    }
    pre {
      color: var(--color);
      background: var(--background);
    }
    code-edit {
      margin: 15px;
      padding: 15px;
      width: 300px;
      height: 100px;
      font-family: monospace;
      resize: both;
    }
    `
    document.head.appendChild(style)
    
    document.body.innerHTML = /*html*/ `
    <code-edit id="demo" autoresize autofocus language="js" theme="laser">export interface HTMLCodeEditElement {
      value?: string
      language?: string
      syntax?: SyntaxDefinition | Promise&lt;{ default: SyntaxDefinition }&gt;
      theme?: string
      tabsize?: number
      tabstyle?: 'tabs' | 'spaces'
      comments?: string
    }</code-edit>
    `

API

# CodeEditElement src/code-edit.tsx#L172
# Lens src/code-edit.tsx#L37
# Marker src/code-edit.tsx#L23
# SyntaxOrImport

    SyntaxDefinition | Promise<{

    # default

      SyntaxDefinition

    }>

# languages

Credits

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas