wildheart / wc-codemirror

CodeMirror as a vanilla web component

A Vanilla Web Component to embed a CodeMirror editor into a web page

---

Installation

npm i @vanillawc/wc-codemirror

Then import the index.js file at the root of the package.

---

Usage

Attributes

• src - load an external source file
• style - CSS styling (default height:100%;width:100%;)

Properties

• value - get/set the editor's contents

Note: The ID attribute is required when multiple editors instances are present

Basic Usage

<wc-codemirror src="sample.js"></wc-codemirror>

Syntax Highlighting

<wc-codemirror mode="javascript" src="sample.js"></wc-codemirror>

Modes require importing an additional plugin file that can be found in the 'modes' dir

<script type="module" src="[wc-codemirror]/mode/javascript/javascript.js"></script>

Theming

<wc-codemirror mode="javascript" theme="monokai" src="sample.js"></wc-codemirror>

Themes require importing an additional css file that contains the theme CSS definitions

<link rel="stylesheet" href="[wc-codemirror]/theme/monokai.css">

---

Demos

WC-CodeMirror - WebComponents.dev