index.html

<!doctype html>
<head>
    <meta charset="utf-8" /> 
</head>
<body>
    <style>
    html, body {
        overflow: hidden;
    }

    body {
        margin: 0px;
        width: 100%;
        height: 100%;
    }

    #editor {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        image-rendering: pixelated
    }

    .ͼ1 .cm-content {
        font-size: 55px;
    }
    .ͼo {
        background-color: #2e344033;
    }
    .ͼo .cm-activeLine {
        background-color: #4c566a33;
    }

    #runButton {
        position: absolute;
        top: 0;
        right: 0;
        margin: 20px;
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
        font-size: 35px;
    }
    </style>
    <meta charset=utf8>
    <canvas id="canvas"></canvas>
    <div id="editor"></div>
    <button id="runButton">▶️</button>

    <script src="bundle.js"></script>
</body>