Frontend Code Editor

How to transform a textarea into a code input element using CodeMirror and webpack.

---

Given a <textarea id="code-editor">, the following Javascript snippet will transform it visually into a full blown source code editor (using CodeMirror).

// webpack import lines
import CodeMirror from 'codemirror/lib/codemirror.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/javascript/javascript.js'

// get the target textarea
const textarea = document.getElementById('code-editor')

// configure codemirror
const opts = { lineNumbers: true, theme: 'monokai', mode: 'javascript' }
CodeMirror.fromTextArea(textarea, opts)

I picked language support for javascript and the theme monokai here, but you can use whatever you want, Codemirror has support for many languages and color themes.