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.
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.html
file and add adiv
element with thenotebook
ID and a nestedsection
element with themain
class. 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...