Home > Developer > Web Develop
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
DirectoryAbout 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 libraryNode. 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 RenderingNotedata = 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 Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
