<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeMirror Element</title>
  <script src="https://markwylde.com/codemirror-element/1.2.0/CodeMirrorEditor.js"></script>
</head>
<body>
  <codemirror-editor value="function main () {}"></codemirror-editor>
</body>
</html>

API

theme

You can switch between the light and dark theme by setting the theme attribute on the element.

<codemirror-editor theme="light"></codemirror-editor>
<codemirror-editor theme="dark"></codemirror-editor>

document.body.querySelector('codemirror-editor').theme = 'light';
document.body.querySelector('codemirror-editor').theme = 'dark';

value

You can read and update the value by setting the value attribute on the element.

<codemirror-editor value="const two = 1 + 1;"></codemirror-editor>

document.body.querySelector('codemirror-editor').value = 'const two = 1 + 1;';

changes

You can listen for changes by adding a change event listener to the element.

const element = document.body.querySelector('codemirror-editor')
element.addEventListener('change', event => {
  console.log('new value is', event.target.value);
});

linting

Eslint is built in, and can be enabled after the element is created:

const element = document.body.querySelector('codemirror-editor')
element.enableLint({
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    es2015: true,
    es2017: true,
    es2020: true
  },
  rules: {
    ...element.defaultLintRules,
    semi: ['error', 'never']
  }
});

You can also get the eslint results:

const element = document.body.querySelector('codemirror-editor')
const results = element.verifyLint();

/* results === [
    {
        "ruleId": "no-unused-vars",
        "severity": 2,
        "message": "'main' is defined but never used.",
        "line": 1,
        "column": 10,
        "nodeType": "Identifier",
        "messageId": "unusedVar",
        "endLine": 1,
        "endColumn": 14
    }
]*/

License

This project is licensed under the terms of the MIT license.

FAQs

What is codemirror-element?

Is codemirror-element well maintained?

Package last updated on 10 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

codemirror-element