How To Implement CodeMirror Code Editors

The basic structure for implementing the code editor should look like this:

<div data-editor-wrapper id="ENTER_ID" >
          <div data-theme="vscode" data-codemirror="css" data-type="mid" data-placeholder="Hello World"></div>
    </div>
    <details>
      <summary></summary>
      <div class="accordion-content">
          <form>
            // select for code language
            // select for editor theme
            // Checkbox if lang is js or ts
          </form>
      </div>
    </details>

You can customize the theme, coding language, height, and initial code of the code editor by customizing the data-theme, data-codemirror, data-type, data-placeholder and attributes, respectively.
The coding language and editor theme should be one of the values seen in the sets below:

const VALID_LANGUAGES = new Set([
      "cpp", // lang-cpp
      "css", // lang-css
      "html", // lang-html
      "java", // lang-java
      "javascript", // lang-javascript
      "markdown", // lang-markdown
      "python",// lang-python
      "sql",// lang-sql
      "typescript",// lang-javascript
    ] as const);
    const VALID_THEMES = new Set([
      'abcdef',
      'abyss',
      'androidstudio',
      'andromeda',
      'atomone',
      'aura',
      'bbedit',
      'basic light', // import light and basic dark from `basic`
      'basic dark', // import light and basic dark from `basic`
      'bespin',
      'copilot',
      'dracula',
      'darcula',
      'duotone light', // import duotone light and duotone dark from 'duotone'
      'duotone dark', // import duotone light and duotone dark from 'duotone'
      'eclipse',
      'github light', // import github light and github dark from 'github'
      'github dark', // import github light and github dark from 'github'
      'gruvbox dark', // import gruvbox dark and gruvbox light from gruvbox-dark
      'gruvbox light',
      'material light',
      'material dark', // material 
      'monokai',
      'monokai dimmed', //monoky-dimmed
      'kimbie',
      'noctis-lilac',
      'nord',
      'okaidia',
      'quietlight',
      'red',
      'solarized light', // solarized light && solarized dark from 'solarized'
      'solarized dark',
      'sublime',
      'tokyo-night',
      'tokyo-night-storm', //--
      'tokyo-night-day',
      'tomorrow-night-blue',
      'white dark', // both from 'white'
      'white light', // both from 'white'
      'vscode',
      'xcode light', // xcode
      'xcode dark' // xcode
    ] as const);

The height of the code editors is controlled by the data-type attribute, which can be set to tiny, min, mid, or full depending on if you want a code editor with a height of 150px, 200px, 250px or an editor with a min height of basically the entire page that expands downward when the user enters in more code. I included the tiny, min, and mid sizes because I might want to allow the users to insert custom html and css into lexical code editors as a decorator block. All editors are held in a code mirror object:

const CODE_MIRROR_EDITORS: {[index: string]: {editor: EditorView, language: Compartment, theme: Compartment}} = {};

Which can be used to change the theme, language, and typescript functionality of the code editors. To be able to edit the theme, language and typescript functionality of the editors, you must include a <form> inside the <div data-editor-wrapper> . The form must have an <input type="text" data-language-select /> and a <input type="text" data-theme /> to edit the coding language and theme, respectively, and a <input type="checkbox" data-typescript /> to edit the typescript functionality of the editor. These are not required, however.

How To Use HTML, CSS, JavaScript Playground

The HTML, CSS, JavaScript code below will be inserted inside the <main> tag of the page. Enter HTML, CSS, and JavaScript into the code editors below and click the Output tab to see the result. I have included code language customization just to show myself how it works.