One, foreword

As a developer, I think it’s cool to document with Markdown. Before, I wanted to find a suitable Markdown platform to take notes, so I tried to use youdao Cloud, Evernote, Homework tribe and other platforms, which required fees or could not meet the needs of many functions. In addition, the style of product design was not what I wanted, so I wanted to create a Markdown note-taking platform of my own style.

Ii. Differences between Markdown notes on different platforms

evernote

Evernote mainly focuses on Word text editing. Currently, Markdown syntax is not supported on the Web side. In 2018, the Imaging Note client began to support Markdown syntax.

Some of the pitfalls of using Markdown:

• Too few editor topics
• The document area code does not support theme Settings
• External chain access is limited, only support mobile open, and download the APP to preview.
• The MD file and batch export are not supported

2. Youdao Cloud Notes

Youdao Cloud also focuses on Word text editing and supports markdown syntax development. The interface is nicer than Evernote.

Some of the pitfalls of using Markdown:

• The edit/preview area scrolling is not very friendly and a bit stiff.
• Preview area code does not support theme Settings
• Batch export is not supported

3. Other platforms

For example, homework Tribe is a platform mainly focused on markdown note writing and developed by individuals. Some other functions need to be used by charging, and their functions are limited.

Generally speaking, the comparison of each platform has its own advantages, but also has some defects, which also initiates the Hbook platform.

3. Hbook notes

1. Introduction

Hbook Notes is a platform focused on Markdown notes.

Features:

• Support editor, document area theme arbitrary switch
• Support editing, document area to adjust the size of the window
• You can export MD files one by one or in batches
• Supported Document Screenshot
• The document directory
• Article Support classification
• Support control of external chain access
• Have your own personal homepage

2. How to implement it?

Here is an architectural diagram of the whole project:

There are some basic skills and qualifications you need to complete this project:

• A domain name
• One server (Ali Cloud, Tencent Cloud)
• Web development
• Nodejs development
• Install the node
• Install the pm2
• Install nginx
• Mysql installation
• Install redis

Seems like a lot, you know? I’ve prepared a step-by-step tutorial for you on how to install and deploy.

Installation and Deployment Tutorial

The front desk to implement

The core implementation of the front page is actually an editor. The third-party BRACE plug-in is used here. Brace supports editors of various languages, and Markdown syntax is used here.

Core basic Configuration:

import ace from 'brace' import 'brace/mode/markdown' editor = ace.edit('editor'); editor.focus(); // Set the font. Do not mess with the font, otherwise it will affect the cursor position.  editor.setOption('fontFamily', 'Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'sans-serif'); Editor. setOption('fontSize', '18px'); // Set the content editor.setValue(editContent); // Clear editor.clearSelection(); Editor.getsession ().setmode ('ace/mode/markdown'); // Set the skin vm.changeEditorSkin(vm.themedata.editor) // wrap it to off to close editor.setoption ('wrap', 'free') / / Settings are read-only editor. The setReadOnly (true | | false). Editor. setOption('showGutter', false); editor.setOption('autoScrollEditorIntoView', true); // Use the soft label editor.getSession().setusesofttabs (false); / / the line editor. The renderer. SetShowPrintMargin (false); / / set editor margins around the editor. The renderer. SetPadding (35);Copy the code

Things to note in the process of using:

• Do not use the font arbitrarily. It is recommended to use the default font, otherwise the cursor position will be affected.

• XSS problems occur after the editor content is saved, and the corresponding tags of the article content need to be processed.

In addition, once you have the text, you will need to convert the Markdown syntax into HTML, which is a third-party haggis plugin. Click on the detailed documentation.

Example:

import showdown from 'showdown'
const converter = new showdown.Converter({
    tables:true,
    tasklists:true,
    ghCodeBlocks:true,
    simpleLineBreaks:true,
    openLinksInNewWindow:true,
    backslashEscapesHTMLTags:true
});
const content = converter.makeHtml(val);
Copy the code

Preview display has been implemented, the natural directory is also necessary, directory as long as the corresponding title tag all find out the line, and then give each different title to do some different levels of style spacing can be implemented:

const vm = this;
vm.anchorDom = [];

const anchorList  = rc.querySelectorAll('h1,h2,h3,h4,h5,h6');

anchorList.forEach(function(elem,index){
    const tag = elem.localName;
    vm.anchorDom.push({
        index:index,
        tag:tag,
        text:elem.innerText
    })
    elem.setAttribute('id','anchor-'+index);
})
Copy the code

In addition, when the editor scrolls, the preview area should also scroll to the corresponding position. Here, a relatively simple way is used to calculate the height ratio of the two areas.

GetScale () {const rightDiff = rc.offsetheight - right.offsetheight + 50; / / preview content highly minus the height of the box fixed const leftDiff = editor. The renderer. LayerConfig. MaxHeight - left. OffsetHeight; Return rightDiff/leftDiff; }Copy the code

Then listen to the two sides of the scroll event to do the corresponding processing:

// Edit editScroll() {const scale = this.getScale(); ShowScroll () {const scale = this.getScale(); // Const scale = this.getscale (); editor.getSession().setScrollTop(right.scrollTop / scale); }Copy the code

In addition, considering the flexible size of the editor and preview area, the middle scroll bar can be shrunk or expanded according to your preferences. The specific way to achieve this is to listen to the Mousemove event and change the width of the left and right sides.

The left menu to obtain the list of articles need to generate tree structure, implementation:

ForEach (function(item) {delete item.children; forEach(function(item) {delete item.children; }); Var map = {}; var map = {}; data.forEach(function(item, index) { map[item.id] = item; }); var val = []; Data. ForEach (function(item) {var parent = map[item.parent_id]; / / if found the index, it means that this is not the top, you need to add this to, he is corresponding to the parent of the if (the parent) {(parent. Children | | (parent. Children = [])), push (item); } else {// If no index ID is found in the map, add the current item directly to the val result set as the top-level val.push(item); }}); return val; }Copy the code

The background implementation

Nodejs is the main backend technology here, the core is mainly in the table structure design, other relatively good.

This project is a table structure design, only enough for your reference:

• The users table

field	type	If required	note
id	Number	is	id
username	String	is	The user name
password	String	is	password
email	String	no	mail
nickname	String	is	nickname
mobile	String	no	Mobile phone
desc	String	no	describe
avatar	String	no	Head portrait
province	String	no	provinces
city	String	no	city
source	String	is	source
status	Number	is	state

• Article classification table

field	type	If required	note
id	Number	is	id
user_id	Number	is	The user ID
parent_id	Number	is	Parent class ID. 0 is the first level
category_name	String	is	Category name

• The article table

field	type	If required	note
id	Number	is	id
title	String	is	The title
content	TEXT	no	The article content
state	Number	is	Article status 0 not open to public 1 Open to public 2 Prohibited article
password	String	no	Article access password
browser_num	INTEGER	is	Read the number

In addition, the content of the article can be set to a more detailed step of the label classification, through the label screen corresponding to the article, the implementation of the logic is more complex will not talk about, interested can exchange.

Basically meet the above 3 tables can build their own article library.

3. Follow-up optimization

1. Implement article password access rights
2. New exported PDF file
3. Editor text filter illegal tags
4. More accurate rolling areas on both sides

4. The vision

Vision: Make note-taking a habit and sharing a pleasure.

5. The last

The original original intention to make a note out to play, but did not expect to make their own but developed a habit of writing notes, recorded the work dribs and drabs, so that their harvest.

Finally, welcome to experience the product and put forward your valuable suggestions. Hbook

Four,

Through the above explanation, I believe you are familiar with the whole process, you can also try to move, if you have any questions, welcome to communicate with us.

The last

Finally, thank you for your reading. If you have any questions, please leave a message in the comment section to discuss and learn from each other. This month, we will launch more articles related to practice and award message activities

The resources

[1] Installation and deployment tutorial: bookcss.com/note/12/14

[2] brace: github.com/thlorenz/br…

[3] showdown: github.com/showdownjs/…

[4] Hbook: bookcss.com