title: How can I create a basic HTML/CSS editor with Javascript?
body: <p>How can I create a basic HTML/CSS editor using Javascript? I have the code below and when I press the button, the code from HTML and CSS sections should be display with formatting in the  element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          textarea {
              width: 45%;
              height: 200px;
              background: #eee;
              margin: 0 2%;
          }
          #content {
              margin: 0 20px;
              border: 1px solid #aaa;
              min-height: 200px
          }
          h1 {
              text-align: center;
              font-size: 20px
          }
          h2 {
              font-size: 18px
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;A basic HTML / CSS editor&lt;/h1&gt;
      &lt;textarea id="html-code" placeholder="Insert HTML here"&gt;&lt;/textarea&gt;
      &lt;textarea id="css-code" placeholder="Insert CSS here"&gt;&lt;/textarea&gt;
      &lt;button  onclick="editor()"&gt;Apply HTML and CSS&lt;/button&gt;
      &lt;h2&gt;Result&lt;/h2&gt;
      &lt;div id="content"&gt;
         
      &lt;/div&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>