我正在做一个语法highling代码编辑器在HTML，JS和CSS。

**工作原理：**有两个div重叠。上面的一个是你编辑的。下面的一个模仿你输入的内容，但被格式化（使用prism js）。
问题：

只要有连续的换行符（一次不止一个换行符），格式化代码就会在键入的文本下面出现多次。
示例：
键入文本：

<span></span>


<h1></h1>

格式化：

<span></span>




<h1></h1>

编码

`#codeContainer {
            position: fixed;
            top: 10%;
            left: 0%;
            z-index: 1;
            width: 100%;
            height: 90%;
            outline: 0;
        }

        #code {
            position: absolute;
            left: 0%;
            top: 0%;
            width: 100%;
            height: 100%;
            background-color: transparent;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow: auto;
        }

        #highlight {
            position: absolute;
            left: 0%;
            top: 0%;
            z-index: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            font-size: 14px;
            color: white;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow: auto;
            margin-top: -6px;
            padding-left: 5px;
        }

        pre code {
            position: absolute;
            left: 0%;
            top: 0%;
            width: 100%;
            height: 100%;
            padding-left: 5px;
        }

        #code,
        #highlight {
            font-size: 14px;
            line-height: 1.5;
            font-family: 'Courier New', Courier, monospace;
        }

<div id="codeContainer">
        <div id="highlight"></div>
        <pre id="code">
            <code contenteditable="true"></code>
        </pre>
    </div>

const codeElement = document.getElementById('code');
        const highlightElement = document.getElementById('highlight');

        function updateHighlight() {
            const code = codeElement.innerText;
            var highlightedCode = Prism.highlight(code, Prism.languages.html, 'html');

            highlightElement.innerHTML = highlightedCode.toString();
        }

        codeElement.addEventListener('input', updateHighlight);

我真的不知道我怎么能解决这个问题，我真的不知道是什么原因导致的问题。任何帮助是感激。谢谢！

编辑：

我为#代码做了CSS，使文本透明，突出显示的颜色为黑色。这隐藏了键入的内容，使其看起来像正确的换行符，但换行符问题仍然发生。