Code Editor in HTML Frontends
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.