How do I make HTML pre and code blocks editable?

Question

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.

Try the `contentEditable`-attribute! All you need to do is to add the attribute and set the value to `true`: `
` — tacoshy, Aug 08 '22 at 22:04
huh? The answers to the posted question answer your question, with the exact same attribute as the answer you accepted. Not sure what "You too" is supposed to mean. — Heretic Monkey, Aug 09 '22 at 16:39
Oh my previous comment didn't send, I was trying to say thanks to @tacoshy as well as you — Craze XD, Aug 09 '22 at 17:49

score 1 · Accepted Answer · answered Aug 08 '22 at 22:14

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>

How do I make HTML pre and code blocks editable?

1 Answers1