https://github.com/naokim03/codemirror-svelte
Provides a CodeMirror wrapper component for Svelte.
https://github.com/naokim03/codemirror-svelte
codemirror svelte svelte-components
Last synced: 4 months ago
JSON representation
Provides a CodeMirror wrapper component for Svelte.
- Host: GitHub
- URL: https://github.com/naokim03/codemirror-svelte
- Owner: NaokiM03
- License: mit
- Created: 2022-05-04T11:07:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-04T20:15:56.000Z (over 2 years ago)
- Last Synced: 2025-06-26T10:53:01.770Z (6 months ago)
- Topics: codemirror, svelte, svelte-components
- Language: TypeScript
- Homepage:
- Size: 124 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# codemirror-svelte
Provides a CodeMirror wrapper component for Svelte.
The current library supports `CodeMirror 6`. If you want to use `CodeMirror 5`, install version `1.2.1`.
In CodeMirror 6, it has been modularized. This library was intended to be a thin wrapper, so perhaps it is not needed. If you want a high-level library with abstraction, there is [svelte-codemirror-editor](https://github.com/touchifyapp/svelte-codemirror-editor).
## Installation
```sh
npm install -D codemirror-svelte
```
## Usage
Check the [CodeMirror Reference Manual](https://codemirror.net/docs/ref/).
```svelte
import Codemirror, { basicSetup } from "codemirror-svelte";
import { EditorView } from "@codemirror/view";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { oneDarkTheme } from "@codemirror/theme-one-dark";
// initial content
let doc = "";
const extensions = [
basicSetup,
markdown({ base: markdownLanguage, codeLanguages: languages }),
oneDarkTheme,
EditorView.theme({
"&": {
height: "800px",
fontSize: "20px"
}
// ..
})
// ..
];
// ..
// ..
```
## License
codemirror-svelte is released under the MIT License