Lightweight code editor Web Component with syntax highlighting

Examples

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

Credits

• code-syntax by stagas – Code syntax highlight Web Component
• get-element-offset by stagas – Get accurate DOM element offset.
• relative-mouse by stagas – Get mouse position relative to a DOM element.
• sigl by stagas – Web 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!

License

MIT © 2022 stagas