A basic note editor
We will start small with a very simple markdown note app that only displays a text editor on the left and a markdown preview on the right. Then, we will turn it into a full notebook with multiple note support.
Setting up the project
For this project, we will have a few files ready to get us started:
- First, download simple-notebook project files and extract them in the same folder. Open the
index.htmlfile and add adivelement with thenotebookID and a nestedsectionelement with themainclass. You should have the following content inside the file:
<html>
<head>
<title>Notebook</title>
<!-- Icons & Stylesheets -->
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Include the library in the page -->
<script src...
