Markdown Notes

index.html

<div class="container-fluid h-100 notes-app-container">
  <div class="row h-100 ">
    <div class="col-2 p-0 folder-list">
      <ul class="list-group">
        <li class="d-flex justify-content-between align-items-center">
          All Notes
          <span class="badge">51</span>
        </li>
        <li class="d-flex justify-content-between align-items-center">
          Daily Tasks
          <span class="badge">10</span>
        </li>
        <li class="d-flex justify-content-between align-items-center">
          Meetings
          <span class="badge">2</span>
        </li>
        <li class="d-flex justify-content-between align-items-center active">
          Upcoming Events
          <span class="badge">15</span>
        </li>
        <li class="d-flex justify-content-between align-items-center">
          Books
          <span class="badge">1</span>
        </li>
        <li class="d-flex justify-content-between align-items-center">
          Reading Lists
          <span class="badge">7</span>
        </li>
        <li class="d-flex justify-content-between align-items-center">
          Jobs
          <span class="badge">5</span>
        </li>
      </ul>
      <span class="new-folder">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
        </svg>
        New Folder
      </span>
    </div>
    <div class="col-3 p-0 notes-list">
      <div class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida.</p>
          <small>3 days ago</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida.</p>
          <small class="text-muted">3 days ago</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida.</p>
          <small class="text-muted">3 days ago</small>
        </a>
      </div>
    </div>
    <div class="col-7 note">
      <p>Note</p>
      <textarea id="editor"></textarea>
    </div>
  </div>
</div>

markdown-notes.markdown

Markdown Notes

A Pen by Subodh Ghulaxe on CodePen.

License.

script.js

var simplemde = new SimpleMDE({ 
  element: document.getElementById("editor"),
  autofocus: true
});

scripts

<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

style.scss

html, body {
  height: 100%;
}

.notes-app-container {
  color: #FFFFFF;
  height: 100%;
  .row {
    .col-2, .col-3, .col-7 {
      border: 1px solid #0B0B0B;
    }
    .folder-list {
      background-color: #2F3135;
      ul {
        list-style: none;
        li {
          font-size: 13px;
          padding-left: 10px;
          padding-right: 7px;
          padding-top: 3px;
          padding-bottom: 3px;
         .badge {
            color: #6C6D73;
          }
        }
        .active {
          background-color: #0565D1;
          .badge {
            color: #FFFFFF;
          }
        }
      }
      .new-folder {
        color: #B5B7BC;
        font-size: 13px;
        position: absolute;
        bottom: 0;
        padding-left: 7px;
        margin-bottom: 7px;
        cursor: pointer;
      }
    }
    .notes-list {
      background-color: #1E1F22;
      color: #DDDDDD;
      .list-group-item {
        background-color: #1E1F22;
        h5 {
          font-size: 14px;
        }
        p {
          font-size: 12px;
          margin-bottom: 0 !important;
        }
        small {
          font-size: 10px;
        }
      }
      .list-group-item.active {
        background-color: #343538;
        border-color: #343538;
      }
      .list-group-item-action {
        color: #DDDDDD;
      }
    }
    .note {
      background-color: #282828;
    }
  }
}

.editor-toolbar, .CodeMirror {
  background-color: #282828;
  // border-color: #282828;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/xcatliu/simplemde-theme-dark/master/dist/simplemde-theme-dark.min.css" rel="stylesheet" />