CodeMirrorでリアルタイムエディタを作りたい

CodeMirror・marked.jsを使いリアルタイムエディタを作りたくご相談をさせていただきます。

目標としては、CodePenのように[ HTML・CSS・JavaScript ]というように、
3つのtextareaを表示させたいのですが、どしてもうまくいかないためご教示いただけますでしょうか。

実現させたいこと

HTML・CSS・JSの3つのテキストエリアを作りたい
その結果をリアルタイムプレビューに反映させたい

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>CodeMirror_demo</title>
6<link rel="stylesheet" href="lib/codemirror.css">
7
8</head>
9<body>
10<div class="wrapper">
11  <div id="editorWrapper">
12    <div id="htmlbox" class="editor-box">
13      <textarea id="htmleditor" class="editor-textarea"></textarea>
14    </div>
15    <div id="cssbox" class="editor-box">
16      <textarea id="csseditor" class="editor-textarea"></textarea>
17    </div>
18    <div id="jsbox" class="editor-box">
19      <textarea id="jseditor" class="editor-textarea"></textarea>
20    </div>
21  </div>
22  <div id="previewWrapper">
23    <div id="preview"></div>
24  </div>
25</div>
26<script src="lib/codemirror.js"></script> 
27<script src="mode/htmlmixed/htmlmixed.js"></script> 
28<script src="mode/css/css.js"></script>
29<script src="mode/javascript/javascript.js"></script> 
30<script src="marked.min.js"></script>
31</body>
32</html>

JavaScript
1<script>
2        var preview = document.getElementById("preview");
3        var editor = CodeMirror.fromTextArea(document.getElementById('editor'),
4            {
5            mode: "gfm",
6            mode: 'htmlmixed',
7            mode: 'css',
8            mode: 'javascript',
9            lineNumbers: true,
10            matchBrackets: true,
11            lineWrapping: true,
12            autoCloseBrackets: true,
13            extraKeys: {
14                "Enter": "newlineAndIndentContinueMarkdownList"
15            }
16        });
17        editor.on("change", function (e) {
18            preview.innerHTML = marked(e.getValue());
19        });
20    </script>

CSS
1.wrapper {
2    display: flex;
3    align-items: flex-end;
4}
5#editorWrapper {
6    display: flex;
7    flex-direction: column;
8    width: 50%;
9}
10.editor-label {
11    margin: 10px 0 20px;
12}
13.editor-label>label {
14    border: 1px solid;
15    padding: 5px 15px;
16    cursor: pointer;
17}
18.editor-textarea {
19    width: 100%;
20}
21#editorWrapper .CodeMirror {
22    width: 100%;
23    height: 500px;
24    background-color: #ccc;
25    border: solid 1px #ccc;
26}
27#previewWrapper {
28    width: 50%;
29    height: 500px;
30    border: solid 1px #ccc;
31}