使用语法高亮显示的额外换行符(prism js)

Question

我正在制作HTML, JS和CSS中的语法高亮代码编辑器。

工作原理:有两个部分是重叠的。最上面的是你要编辑的。下面的代码模仿你输入的内容，但是被格式化了(使用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);

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

编辑:

我为#code设置了CSS，使文本透明，颜色为高亮显示的黑色。这隐藏了输入，使其看起来像正确的换行符，但换行问题仍然发生。

Answer 1

解决方案

我改变了

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

<div id="codeContainer">
<pre>
<div id="highlight"></div>
</pre>
<textarea name="code" id="code" cols="30" rows="10"></textarea>
</div>