Editora Light Code Editor

Quick Start

Installable via npm or load the UMD build. Example usage:

// Import (ESM)
import { LightCodeEditor, SyntaxHighlightingExtension } from '@editora/light-code-editor';

const editor = new LightCodeEditor(document.getElementById('editor-root'), {
  language: 'javascript',
  value: "console.log('Hello world');",
  readOnly: false
});

editor.use(new SyntaxHighlightingExtension());

CDN / UMD

Load the UMD bundle and instantiate from the global API (UMD names vary by build):

<script src="https://unpkg.com/@editora/light-code-editor@1.0.3/dist/index.umd.js"></script>
<script>
  // Example: window.LightCodeEditor or global exports may be available
  // const editor = new window.LightCodeEditor(...)
</script>

Playground

Styles

The editor ships a small stylesheet in dist/light-code-editor.css. You can include it in three common ways:

Bundler (recommended): import the CSS from the package in your application entry.
```
import '@editora/light-code-editor/dist/light-code-editor.css';
```

Node modules (dev/test): add a plain link that points to node_modules when serving locally:

<link rel="stylesheet" href="/node_modules/@editora/light-code-editor/dist/light-code-editor.css">

CDN (no build): point to a CDN host such as unpkg or jsdelivr:

<link rel="stylesheet" href="https://unpkg.com/@editora/light-code-editor@1.0.2/dist/light-code-editor.css">

Note: the package's package.json currently exposes the JS entrypoints but does not list the CSS under exports. The CSS file exists in dist/light-code-editor.css, so CDN or direct subpath imports will work, but some Node resolver configurations may restrict non-exported subpath imports. If you need guaranteed subpath exports, add an appropriate entry to exports or a top-level style field in package.json.

API Examples

// Highlighting extension usage
import { SyntaxHighlightingExtension } from '@editora/light-code-editor';

const ext = new SyntaxHighlightingExtension({ theme: 'dark' });
editor.use(ext);