How do I make HTML pre and code blocks editable?-CodePudding

I wanted to use the highlight.js project (not really relevant) to make a text editor with syntax highlighting. On it's documentation, it says it automatically highlights all blocks. I wanted to know if it was possible to make a HTML block editable.

CodePudding user response：

You can use the HTML contenteditable attribute.

The attribute can take either true or false as its value.

Here is an example:

code {
  display: block;
}

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

I also used the spellcheck attribute to disable spell checking.

You can use the outline style to disable the outline around the code tag.

Example:

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

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