使用monaco编辑预览markdown文件

本打算使用remark来解析markdown的，但vite无论如何都不能编译成功，总是缺少一堆相关依赖，并且npm上还找不到相关的包，估计是版本依赖关系问题，暂时没时间来检查修改问题，遂采用marked来解析。

<div>
    toolbar
</div>
<div style="display: flex; height: 40vh">
    <div style="flex: 50%; height: 100%">
        <div id="editor" style="height: 100%; width: 100%;"></div>
    </div>
    <div style="flex: 50%; height: 100%">
        <div id="previewer" style="height: 100%; width: 100%; overflow: auto"></div>
    </div>
</div>
<script type="module">
    import * as monaco from "monaco-editor";
    import { marked } from "marked";

    let content = "# Hello";
    let editor = monaco.editor.create(document.getElementById("editor"), {
        automaticLayout: true,
        language: "markdown",
        value: content,
        wordWrap: "on",
        wrappingIndent: "same",
    });

    editor.onDidChangeModelContent((e) => {
        preview();
    });

    function preview() {
        content = editor.getValue();
        const html = marked.parse(content);
        document.getElementById("previewer").innerHTML = html;
    }
</script>