<div class="container">
  <h1>Markdown Editor</h1>
  <div class="row">
    <div>
      <textarea name="" id="editor" cols="30" rows="10" placeholder="Markdown Editor">
# h1

## h2

### h3

#### h4

##### h5

###### h6

**Bold**

*Italic*

> quoted content

[link](https://joelbonetr.com/)

You can use inline `code` as well as code blocks:

```js 
const arr = new Array(); 
``` 

Lists:
- Apple 
- Orange 
- Peach 
- Banana

Adding images:

![JavaScript](https://www.iconninja.com/files/541/586/346/command-language-software-develop-code-programming-javascript-icon.png)
</textarea>
    </div>    
    <div>
      <div id="preview"></div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f0f0f0; 
}
::-webkit-scrollbar-thumb {
  background: #333; 
  border-radius: 5em;
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
body{
  background: #333;
  .container {
    max-width: 944px;
    margin: 44px auto;
    >h1 { 
      color: #fefefe; 
      font-family: monospace; 
      text-align: center;
      font-size: 48px;
    }
    .row {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      >div {
        display: flex;
        min-height: 128px;
        box-shadow: 0 0 3px #34343499;
        textarea {
          min-width: 100%;
          height: auto;
          resize: vertical;
          overflow-y: auto;
          font-family: monospace;
          font-size: 16px;
          outline: none;
          padding: 8px;
          border-radius: .25em 0 0 .25em;
        }
        >#preview {
          width: 100%;
          height: auto;
          padding: 0 8px;
          border-right: 2px double #aaa;
          pre, code {
            border-radius: .4em;
          }
          code {
            background: #333;
            color: white;
            padding: 8px;
            font-family: monospace;
          }
          blockquote {
            border-left: 4px solid bisque;
            padding-left: .5em;
            color: #353535bc;
          }
        }
        @media(max-width: 769px) {
          flex: 0 1 100%;
          max-width: 100%;
          &:first-of-type {
            border-bottom: 2px dashed #aaa;
            border-radius: .25em .25em 0 0;
            textarea {
              border-radius: .25em .25em 0 0;
            }
          }
          &:last-of-type {
            border: 2px double #aaa;
            border-top: 2px dashed #555;
            background: linear-gradient(90deg, snow 1px, #f9f9f9 1px);
            background-size: 5px 5px;
            border-radius: 0 0 .25em .25em;
          }
          textarea {
            min-height: 600px;
            border-bottom: 2px dashed #555;
          }
        }
        @media(min-width: 769px) {
          flex: 0 1 50%;
          max-width: 50%;
          &:first-of-type {
            border-right: 2px dashed #aaa;
            border-radius: .25em 0 0 .25em;
          }
          &:last-of-type {
            border: 2px double #aaa;
            border-left: 2px dashed #555;
            background: linear-gradient(90deg, snow 1px, #f9f9f9 1px);
            background-size: 5px 5px;
            border-radius: 0 .25em .25em 0;
          }
          textarea {
            border-right: 2px dashed #555;
          }
        }
      }
    }
  }
}

const interpretMd = (origin) => document.getElementById('preview').innerHTML = marked.parse(origin);
(() => interpretMd(document.getElementById('editor').value))();
document.getElementById('editor').addEventListener('input', (e) => interpretMd(e.target.value));