如何使HTML预处理块和代码块可编辑

Question

我想使用highlight.js项目(实际上并不相关(来制作一个带有语法高亮显示的文本编辑器。在它的文档中，它说它会自动突出显示所有块。我想知道是否有可能使HTML块可编辑。

Answer 1

您可以使用HTMLcontenteditable属性。

属性可以采用true或false作为其值。

这里有一个例子：

code {
display: block;
}

<pre>
<code contenteditable="true" spellcheck="false">Write code here!</code>
</pre>

我还使用了spellcheck属性来禁用拼写检查。

可以使用outline样式禁用code标记周围的轮廓。

示例：

pre > code {
outline: none;
display: block;
}

<pre>
<code contenteditable="true" spellcheck="false">Write code here!</code>
</pre>