Displaying editable code snippets?

Question

So this code has little code snippets that you can edit. How was this achieved? I've tried everything.
https://code.sololearn.com/W4fGWXy4aOd6/?ref=app

Answer 1

If you look carefully at the source code, you'll see that they made the contents of the `<style>` tag visible using `display: block` (usually, they are invisible, since they're styles for the page), and made them editable at the same time using the `contenteditable` attribute.

BTW, this attribute was introduced in HTML5 and you can make any part of your page editable by the user, even the whole page.