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

import 'code-syntax/themes/default.css'
import 'plenty-themes/laser.css'

import { CodeEditElement, languages } from 'code-edit'

languages.js = import('code-syntax/languages/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;
  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 – CodeEdit custom element

src/code-edit.tsx#L74

import { CodeEditElement } from 'code-edit'
customElements.define('code-edit', CodeEditElement)

<code-edit autofocus autoresize language="js" theme="deep"> ... </code-edit>

# constructor()

# new CodeEditElement()

CodeEditElement

# autoFocus = false – Autofocus to the element when page loads

src/code-edit.tsx#L83

boolean

# autoResize = false – Whether to autoresize to the height of the contents

src/code-edit.tsx#L85

boolean

# comments = '// /* */' – Comment

src/code-edit.tsx#L95

string

# language = '' – Language for syntax highlighting

src/code-edit.tsx#L87

string

# syntax = {} – Passing a syntax definition regexp manually

src/code-edit.tsx#L108

SyntaxOrImport

# tabSize = 2 – Tab size

src/code-edit.tsx#L91

number

# tabStyle = 'spaces' – Tab style

src/code-edit.tsx#L93

"spaces" | "tabs"

# theme = '' – Theme to use

src/code-edit.tsx#L89

string

# value = '' – The editor's value

src/code-edit.tsx#L81

string

# scrollLeft

src/code-edit.tsx#L217

# scrollTop

src/code-edit.tsx#L220

Credits

code-syntax by stagas – Code syntax highlight Web Component
debounce-micro by stagas – wrap a function in a debounce microtask
mixter by stagas – A Web Components framework.
super-impose by stagas – Web Component that super imposes one child over another to the same scroll position
textarea-code by stagas – Web Component that extends a textarea element with code editor behavior.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

code-edit

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

Examples

API

Credits

Contributing

License

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