Skip to content

3.1 Main form

Christophe Avonture edited this page Mar 27, 2017 · 3 revisions

Once you've install the program and add your own notes in the docsfolder, go to http://localhost/marknotes and, if needed, refresh your screen.

You'll obtain a screen with two parts :

  1. Your folder structure
  2. Your note

1. Your folder structure

The left part will of the screen is the treeview : you'll find there any subfolders where .md files have been found (so, a folder with no .md file won't be mentionned). You can open a folder by just double-clicking on it, like you do everywhere else.

Then, apart of the folders, you'll find files. Just click one on a file and the system will display its html representation at the right.

html representation = the note is well written in Markdown but, for displaying it in a nice way, a translation will be made 'on-the-fly' and a .html file will be generated.  Every Markdown tags (like # A title) will be translated into his html value (<h1>A title</h1>)

Main interface

jsTree is used here

At the top of that left part, you'll find a search box. By typing a word, you'll be able to restrict the list in the treeview for notes that contains that word.

Note : you can type several keywords. The logic behind is a AND operator : notes should contains every keywords to be displayed.

jQuery Flexdatalist is used for the search functionnality.

2. Your content

Just click on a file from the left part and you'll see its content in the right part like illustrated here above.

In the top of the right part, you'll find a toolbar with a few icons.

The HTML conversion is based on the Parsedown class

To make the note smarter and his use more comfortable, a few jQuery plugins will be automatically fired :

  • DataTables is used to transform html tables into dynamic table with sorting, filtering, pagination, ... feature,
  • jquery.highlight.js is used to highlight the keyword used in the search engine,
  • lazysizes will be used for optimization reasons : only images that are "near" the visible content will be loaded. So, if you've a very long page with a lot of images, by displaying the first "page", only images that appears on that page and the second page will be loaded. By scrolling down, images will be loaded only on that time (remark : lazysizes is disabled if the lazyload setting of settings.json is set to 0),
  • linkifyjs allow to convert plain text emails and URLs into clickable ones,
  • Prism is used for syntax coloring (based on the language, Prism will put language's instruction in color),
  • ... and a few own made javascript script will enhance the page like the "tags" script