Electron实现markdown笔记软件（四）

最新推荐文章于 2024-05-17 20:56:10 发布

Elliot Chenn

最新推荐文章于 2024-05-17 20:56:10 发布

阅读量1.6k

点赞数 1

分类专栏： electron node-js noteApp 文章标签： markdown node.js electron 软件

本文链接：https://blog.csdn.net/Ertuil/article/details/78971385

版权

electron 同时被 3 个专栏收录

7 篇文章 1 订阅

订阅专栏

node-js

7 篇文章 0 订阅

订阅专栏

noteApp

7 篇文章 0 订阅

订阅专栏

关于这个markdown笔记软件（四）——md的渲染和生成

项目源码

https://github.com/andytt/ErtuilEditor

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也是两个字符串，用于扩展以下功能：

导入mathjax.js实现数学公式的渲染
导入highlight.js实现代码的高量
根据用户的选择，导入对应的css文件，使得界面更加美观。

具体内容为：

 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库的有关内容！

Elliot Chenn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Electron实现markdown笔记软件（四）

关于这个markdown笔记软件（四）——md的渲染和生成项目源码https://github.com/andytt/ErtuilEditormarkdown的渲染库node.js上有两个markdown渲染框架，一个是markdown，一个是marked，，两个库我都试了以下，最后根据最后选择了marked，因为可以更好都按照自己都需求配置。具体都渲染代码在./js/buildMarkdown.j
复制链接

扫一扫