<!DOCTYPE html>
<html lang="en">
  <head>
    <title>contenteditable demo</title>
  </head>
  <body>
    <h1>contenteditable can be applied to visible style tags</h1>
    <p contenteditable="true">
      This paragraph is editable, as is the style tag below. Edit it to see the layout change in real time.
    </p>
    <pre>
    <style contenteditable="true">
      body {
        margin: 40px auto;
        max-width: 650px;
        line-height: 1.6;
        font-size: 18px;
        color: #444;
        padding: 0 10px;
      }

      h1, h2, h3 {
        line-height: 1.2;
      }

      style {
        background: rgb(222, 237, 255);
        display: block;
        font-size: 12px;
      }

      *[contenteditable=true] {
        padding: 1em;
        border: 1px solid rgb(145, 145, 145);
      }
    </style>
    </pre>
  </body>
</html>