svelte-codemirror-editor
所属分类：代码编辑器
开发工具：Svelte
文件大小：0KB
下载次数：0
上传日期：2022-11-30 09:13:52
上 传 者：
sh-1993
说明： 用于创建CodeMirror 6+编辑器的svelte组件
(A svelte component to create a CodeMirror 6+ editor)
文件列表:
.eslintignore (166, 2023-11-27)
.eslintrc.cjs (695, 2023-11-27)
.npmrc (19, 2023-11-27)
.prettierignore (165, 2023-11-27)
.prettierrc (152, 2023-11-27)
.releaserc.yml (667, 2023-11-27)
CHANGELOG.md (1464, 2023-11-27)
LICENSE (1067, 2023-11-27)
package-lock.json (316607, 2023-11-27)
package.json (2232, 2023-11-27)
src/ (0, 2023-11-27)
src/app.d.ts (264, 2023-11-27)
src/app.html (236, 2023-11-27)
src/lib/ (0, 2023-11-27)
src/lib/CodeMirror.svelte (6266, 2023-11-27)
src/lib/index.ts (90, 2023-11-27)
src/lib/util.ts (910, 2023-11-27)
src/routes/ (0, 2023-11-27)
src/routes/+layout.svelte (3214, 2023-11-27)
src/routes/+layout.ts (31, 2023-11-27)
src/routes/+page.svelte (5347, 2023-11-27)
src/routes/_util/ (0, 2023-11-27)
src/routes/_util/code.ts (3092, 2023-11-27)
src/routes/css/ (0, 2023-11-27)
src/routes/css/+page.svelte (245, 2023-11-27)
src/routes/html/ (0, 2023-11-27)
src/routes/html/+page.svelte (276, 2023-11-27)
src/routes/javascript/ (0, 2023-11-27)
src/routes/javascript/+page.svelte (280, 2023-11-27)
src/routes/typescript/ (0, 2023-11-27)
src/routes/typescript/+page.svelte (300, 2023-11-27)
src/styles.css (240, 2023-11-27)
static/ (0, 2023-11-27)
... ...
# svelte-codemirror-editor
[](http://opensource.org/licenses/MIT)
[](https://npmjs.org/package/svelte-codemirror-editor)
[](https://npmjs.org/package/svelte-codemirror-editor)
[](https://github.com/semantic-release/semantic-release)
A svelte component to create a [CodeMirror 6](https://codemirror.net/6/) editor.
## Installation
```bash
npm install svelte-codemirror-editor
```
## Usage
To use `svelte-codemirror-editor`, you need to import the package and use it as any `Svelte` component.
```svelte
```
## Properties
| Property | Type | Description | Default value |
| ------------- | ----------------- | -------------------------------------------------------------------- | ------------- |
| `value` | `string` | The value that will be displayed and edited in the CodeMirror editor | `""` |
| `basic` | `boolean` | Whether to use CodeMirror `basicSetup` extensions. | `true` |
| `lang` | `LanguageSupport` | The language extension that will parse and highlight the value. | `undefined` |
| `theme` | `Extension` | The theme extension to customize the appearence of the editor. | `undefined` |
| `extensions` | `Extension[]` | Additional extensions to inject in the editor. | `[]` |
| `useTab` | `boolean` | Whether to use the `Tab` shortcut to handle indentation. | `true` |
| `tabSize` | `number` | The number of space of an indentation level. | `2` |
| `editable` | `boolean` | Whether to make the editor editable or not. | `true` |
| `readonly` | `boolean` | Whether to make the editor readonly or not. | `false` |
| `placeholder` | `string` | A placeholder to include when value is empty. | `undefined` |
| `styles` | `ThemeSpec` | In-place theme configuration. _See exemple below_. | `undefined` |
## Events
| Event | Type | Description |
| -------- | -------- | ----------------------------- |
| `change` | `string` | Trigger when the code changes |
## Usage with vite / svelte-kit
If you try to use this component with `vite` or `svelte-kit`, you have to disable dependency optimization for `codemirror` and all its extensions.
```javascript
// vite.config.js
const config = {
//...
optimizeDeps: {
exclude: ["codemirror", "@codemirror/language-javascript" /* ... */],
},
//...
}
```
## Exemples
### Basic usage
```svelte
```
### Custom theme
```svelte
```
### Custom styles
```svelte
```
## License
[MIT](LICENSE)
近期下载者：
相关文件：
收藏者：