Electron implements markdown Note Software (4), electronmarkdown

Source: Internet
Author: User

Electron implements markdown Note Software (4), electronmarkdown
About this markdown Note Software (4) -- md rendering and production project source code

Https://github.com/andytt/ErtuilEditor

Directory

About this markdown Note Software (I)-General ideas and introduction

About this markdown Note Software (2) -- model layer design

About this markdown Note Software (iii) -- View Layer Design

About this markdown Note Software (4) -- Rendering and generation of md

About this markdown Note Software (5)-electron Library

About this markdown Note Software (6)-Application logic, electron dialog box

About this markdown Note Software (7)-Other details and summary

Markdown rendering library

Node. there are two markdown rendering frameworks on js, one is markdown and the other is marked. I tried the following for both libraries and finally chose marked according to the final selection, because it can be better configured according to your own needs. The specific rendering code is in./js/buildMarkdown. js. (If the naming style is not uniform, try it lightly)

Introduce the marked package:

var marked = require('marked')

The calling method is as follows:

    var rendererMD = new marked.Renderer();    marked.setOptions({        renderer: rendererMD,        gfm: true,        tables: true,        breaks: false,        pedantic: false,        sanitize: false,        smartLists: true,        smartypants: false    });    fs.readFile(file_path+title+'.md', 'utf8', function (err, data) {        if (err) {            throw err;        }        data = preword + marked(data) + lastword;        fs.writeFile(file_path+title+'.html', data, function(err) {            if(err){                console.log("convert failed.");            }        });        ipcRenderer.send('open-view',title);    });

First define the target object renderermd, and then use markedto upload the corresponding. mdfile to A. html file.

Extended Rendering

Notedata = preword + marked(data) + lastword;Statement. Where,marked(data)Is the subject rendered by the marked library. Preword and lastword are two strings used to extend the following functions:

The specific content is:

 var preword = "<!DOCTYPE html>\n\r \    

Path is the folder path, and value corresponds to the file name of one of multiple css files.
In this way, a complete html file is created and output.

Display

The process of electron is divided into two types: Master process and rendering process.
At last, the rendering process sends the event 'open-view' to the main process through the ipcRenderer module of the electron, and passes the title as a parameter. After the main process monitors events, it creates a new window and imports and displays the generated html file.

ipcMain.on('open-view' ,(event ,arg) => {    if(viewWindow){        viewWindow.emit('close');        viewWindow  = null;    }    viewWindow = new BrowserWindow({ width: 800, height: 600 })    viewWindow.setTitle(arg);    viewWindow.loadURL('file://' + __dirname + '/data/'+arg+'/'+arg+'.html');    viewWindow.on('closed', function() {        viewWindow = null;    });})

The effect is as follows:

In the next section, I will write the relevant content of the specific electron library!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger. Http://blog.csdn.net/Ertuil/article/details/78971385

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.