https://github.com/vanillawc/wc-codemirror
CodeMirror as a vanilla web component
https://github.com/vanillawc/wc-codemirror
codemirror editor vanilla web-componenets
Last synced: 2 months ago
JSON representation
CodeMirror as a vanilla web component
- Host: GitHub
- URL: https://github.com/vanillawc/wc-codemirror
- Owner: vanillawc
- License: mit
- Created: 2019-12-02T01:21:16.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-11-15T17:54:12.000Z (over 3 years ago)
- Last Synced: 2025-03-19T13:48:58.639Z (3 months ago)
- Topics: codemirror, editor, vanilla, web-componenets
- Language: JavaScript
- Size: 1.45 MB
- Stars: 42
- Watchers: 1
- Forks: 10
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<wc-codemirror> Easily embed a CodeMirror editor
## Setup
*Install and import from [NPM](https://www.npmjs.com/package/@vanillawc/wc-codemirror)*
```sh
npm i @vanillawc/wc-codemirror
```
```html
```
*Import from CDN*
```html
```
## Demo
Try it on [WebComponents.dev](https://webcomponents.dev/edit/uQEePfQ92jOWOpupDzps?sv=1&pm=1)
## Usage
**Attributes**
- `src` - load an external source file
- `style` - CSS styling (default `height:100%;width:100%;`)
- `viewport-margin`1 - sets the `viewportMargin` option of the CodeMirrror editor instance (default `10`)
- `readonly` - sets the codemirror's "readOnly" configuration attribute to true, you may set `readonly="nocursor"` if you want to disable the cursor and not let the user copy the text inside
*1Setting `viewport-margin` to `infinity` will auto-resize the editor to its contents. To see this in action, check out the [CodeMirror Auto-Resize Demo](https://codemirror.net/demo/resize.html).*
**Properties**
- `editor` - the CodeMirror editor instance
- `value` - get/set the editor's contents
*Note: The ID attribute is required when multiple editors instances are present*
### Basic Usage
An empty tag loads a basic CodeMirror editor pane
```html
```
### Inline Source
Inline source can be loaded by including a `` of type `wc-content` in the body of the component. The `<script>` wrapper is necessary so '<' and '>' chars in the source are not interpreted as HTML.
```html
<wc-codemirror mode="javascript">
<script type="wc-content">
function myGoodPerson(){
return "what can I do for you ?"
}
```
*Note: `` cannot be used inside of `` until it's the angle brackets are escaped (ie `<` and `>`)*
### External Source
Load an external source file with the `src` attribute
```html
<wc-codemirror src="sample.txt"></wc-codemirror>
```
### Syntax Highlighting
Syntax highlighting requires importing a `mode` module for the language
```html
<script type="module" src="[wc-codemirror]/mode/javascript/javascript.js">
```
Then specify the language with the `mode` attribute
```html
```
### Theming
Theming requires importing an editor theme stylesheet within `wc-codemirror` tag. You can import few themes this way and switch them with the `theme` attribute.
```html
```
*Note: Check out the [CodeMirror Theme Demo](https://codemirror.net/demo/theme.html) to try sample the full selection of editor themes.*
## Contributing
See [CONTRIBUTING.md](https://github.com/vanillawc/vanillawc/blob/main/CONTRIBUTING.md)