使用 CodeMirror 6 建立網頁程式碼編輯器

建立專案

建立專案。

1
2
3
4
5
npm create vite
✔ Project name: … codemirror-example
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript
cd codemirror-example

安裝依賴套件。

1
npm install

實作

安裝 codemirror 套件。

1
npm install codemirror

修改 index.html 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="editor"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

修改 style.css 檔。

1
2
3
4
5
6
7
:root {
background: black;
}

#editor {
background: white;
}

修改 main.ts 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import './style.css';
import { minimalSetup, EditorView } from 'codemirror';

const initialText = 'console.log("Hello, World!")';

const targetElement = document.querySelector('#editor') as Element;

new EditorView({
doc: initialText,
extensions: [
minimalSetup,
],
parent: targetElement,
});

啟動服務。

1
npm run dev

進階使用

安裝依賴套件。

1
2
3
4
5
6
7
8
npm install @codemirror/lang-javascript \
@codemirror/state \
@codemirror/view \
@codemirror/autocomplete \
@codemirror/commands \
@codemirror/language \
@codemirror/lint \
@codemirror/search

修改 main.ts 檔。

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
import './style.css';
import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from '@codemirror/language';
import { lintKeymap } from '@codemirror/lint';
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
import { EditorState } from '@codemirror/state';
import { crosshairCursor, drawSelection, dropCursor, EditorView, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, rectangularSelection } from '@codemirror/view';

const initialText = 'console.log("Hello, World!")';
const targetElement = document.querySelector('#editor') as Element;

new EditorView({
parent: targetElement,
state: EditorState.create({
doc: initialText,
extensions: [
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
dropCursor(),
EditorState.allowMultipleSelections.of(true),
EditorView.theme({
'&': {
// ...
},
}, { dark: true }),
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap,
]),
javascript(),
],
}),
});

啟動服務。

1
npm run dev

程式碼

參考資料