# Adelie Editor - Standalone Usage
The Adelie Editor is a vim-enabled CodeMirror editor with a retro aesthetic, syntax highlighting, and theme support.
## Quick Start
### 1. Include the files
```html
```
### 2. Add a container element
```html
```
### 3. Initialize the editor
```html
```
## API Reference
### `adelieEditor.init(element, options)`
Initialize an editor in the specified element.
**Parameters:**
- `element` (string | HTMLElement) - Container element or CSS selector
- `options` (optional):
- `language` ('javascript' | 'css' | 'html') - Programming language (default: 'javascript')
- `initialCode` (string) - Initial code content (default: '')
- `theme` ('light' | 'dark') - Color theme (default: auto-detected from `data-theme` attribute)
**Returns:** EditorView instance
**Example:**
```javascript
const editor = adelieEditor.init('#my-editor', {
language: 'css',
initialCode: '.my-class { color: red; }'
});
```
### Theme Switching
The editor automatically detects theme changes on the `` element:
```javascript
// Switch to dark mode
document.documentElement.setAttribute('data-theme', 'dark');
// Switch to light mode
document.documentElement.removeAttribute('data-theme');
```
The editor will automatically update its theme when the `data-theme` attribute changes.
## Features
- **Vim Mode**: Full vim keybindings (enabled by default)
- **Relative Line Numbers**: Vim-style relative numbering
- **Auto-closing Brackets**: Automatically closes `()`, `{}`, `[]`, `""`, `''`
- **Whitespace Indicators**: Shows dots for spaces/tabs when text is selected
- **Syntax Highlighting**: Matches Prism.js colors for consistency
- **Theme Support**: Light and dark themes with retro styling
## Complete Example
See `example-editor.html` for a working example:
```html
```
## File Size
- **bundle.css**: ~23 KB (minified)
- **adelie-editor.js**: ~596 KB (minified, includes CodeMirror + vim mode)
The editor bundle is self-contained and includes all dependencies.