1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
# 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
<!-- CSS (required for styling) -->
<link rel="stylesheet" href="https://beta.adelie.liz.coffee/bundle.css" />
<!-- Editor JS -->
<script src="https://beta.adelie.liz.coffee/adelie-editor.js"></script>
```
### 2. Add a container element
```html
<div id="my-editor"></div>
```
### 3. Initialize the editor
```html
<script>
adelieEditor.init('#my-editor', {
language: 'javascript',
initialCode: '// Your code here'
});
</script>
```
## 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 `<html>` 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/bundle.css" />
</head>
<body>
<div id="my-editor"></div>
<script src="dist/adelie-editor.js"></script>
<script>
adelieEditor.init('#my-editor', {
language: 'javascript',
initialCode: 'console.log("Hello World!");'
});
</script>
</body>
</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.
|
