Electron實現markdown筆記軟體(四),electronmarkdown
關於這個markdown筆記軟體(四)——md的渲染和產生項目源碼
https://github.com/andytt/ErtuilEditor
目錄
關於這個markdown筆記軟體(一)——總體的思路和介紹
關於這個markdown筆記軟體(二)——模型層設計
關於這個markdown筆記軟體(三)——視圖層設計
關於這個markdown筆記軟體(四)——md的渲染和產生
關於這個markdown筆記軟體(五)——electron庫
關於這個markdown筆記軟體(六)——應用邏輯、electron對話方塊
關於這個markdown筆記軟體(七)——其他細節、總結
markdown的渲染庫
node.js上有兩個markdown渲染架構,一個是markdown,一個是marked,,兩個庫我都試了以下,最後根據最後選擇了marked,因為可以更好都按照自己都需求配置。具體都渲染代碼在./js/buildMarkdown.js中。(吐槽命名風格不統一的,求輕噴)
引入marked包:
var marked = require('marked')
具體的調用方法如下:
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); });
首先定義了渲染對象rendererMD,再用marked將對應的.md檔案渲染成.html檔案。
擴充渲染功能
注意到上面給出的data = preword + marked(data) + lastword;
語句。其中,marked(data)
是由marked庫渲染的主體。而preword和lastword也是兩個字串,用於擴充以下功能:
具體內容為:
var preword = "<!DOCTYPE html>\n\r \ <html>\n\r \ <head><meta charset=\"utf-8\"/><meta name=\"Application Author\" content=\"Ertuil\" /> \n\r\ <script type=\"text/x-mathjax-config\"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']]}});</script> <script type=\"text/javascript\" src=\"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS- MML_HTMLorMML\"></script> \n\r\ <link href=\""+path+"/css/vs.css\" rel=\"stylesheet\"> \n\r\ <link href=\""+path+"/css/"+value+"\" rel=\"stylesheet\"> \n\r\ <script src=\""+path+"/js/highlight.pack.js\"></script> \n\r\ <script>hljs.initHighlightingOnLoad();</script>\n\r\ </head>\n\r<body>\n\r" var lastword = "</div></body></html>\n\r";
其中,path是檔案夾路徑,value對應了多個css檔案其中之一的檔案名稱。
這樣就構成了一個完整的html檔案,並輸出。
展示
electron的進程分為兩種,一種是主進程,一種是渲染進程。
在最後通過electron的ipcRenderer模組,渲染進程向主進程發送事件’open-view’,並把標題作為參數傳入。主進程監聽到事件後,建立新的視窗,並匯入產生的html檔案,加以展示。
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; });})
效果如下:
下一部分,我會寫具體的electron庫的有關內容!
著作權聲明:本文為博主原創文章,未經博主允許不得轉載。 http://blog.csdn.net/Ertuil/article/details/78971385