README

lite-code-editor

Lightweight code editor web component using contentEditable=true and PrismJS-like highlighting

Demo

Quickstart

...
<link href='https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/prismjs/prism.js'></script>
<script type=module src='https://cdn.jsdelivr.net/npm/lite-code-editor/esm/prism-editor.mjs'></script>
...

<prism-code-editor lang='javascript'>
  if (true != false) {
    console.log(
      'A log message',
      { ts: new Date,
        meta: import.meta }
    )
  }
</prism-code-editor>

Code start

An alternative build of esm/prism-editor.mjs ::

import Prism from 'prismjs'
import {CodeEditor} from 'lite-code-editor/esm/editor.mjs'

class PrismCodeEditor extends CodeEditor ::
  _highlight_src(src_code, el_code) ::
    Prism.highlightElement(el_code)

customElements.define('prism-code-editor', PrismCodeEditor)

Thanks!

Special thanks to Sam Thorogood for creating Undoer and the excellent writeup unpacking the approach to implementing undo/redo with the browser's assistance.

Lightweight code editor inspired by similar CodeFlask and CodeJar projects.

License

BSD-2-Clause

Usage no npm install needed!