分享一个把 HTML 转换成印象笔记格式的库,支持代码高亮和把 ECharts、mermaid 转成印象笔记支持的图片,另外:MWeb 半价促销一周。
先说说 html2enml 这个库,github 网址:https://github.com/cyhhao/html2enml。
这个库是由 cyhhao 特意为 MWeb 做的,但是我觉得对于有分享到印象笔记功能需求的朋友非常有用,所以分享出来。
这个库的原理和用法在作者的 github 中有详细说明了,我这里主要说说在套进 MWeb 过程中遇到的小问题的解决方案。
第一个问题是 SVG 问题,Mermaid 是用 SVG 而不是 Canvas 画图的,不能直接像 Canvas 这样转。解决这个问题花了不少时间,但是其实很简单。只需要在增加 inline 样式后,再用以下代码就可以搞定了:
$('svg').each(function(){
var ele = $(this);
var w = ele.width();
var serializer = new XMLSerializer();
var source = serializer.serializeToString(this);
$('<img src="data:image/svg+xml;charset=utf8,'+encodeURIComponent(source) +'" />').whith(w).insertAfter(ele);
ele.parent().removeAttr('data-processed');
ele.remove();
});
另外就是,印象笔记的 enml 格式实际上是一个 xml,但是一般的 html 都不会严格按照 xml 格式,这就要转化为 xml 格式,测试下来,我发现以下代码的方法非常合适而且好用,代码如下:
var html = $('body').html();
var bodyStyle = $('body').attr('style'); if(!bodyStyle) bodyStyle = '';
var htmlString = "<div style=\"" + bodyStyle + "\">" + html + "</div>";
var doc = new DOMParser().parseFromString(htmlString, 'text/html');
var result = new XMLSerializer().serializeToString(doc);
最后做一下广告:MWeb 半价促销一周 (9/5~9/11),¥98 --> ¥50!这次应该是今年最后一次促销了,需要的朋友不要错过了!
MWeb 官网:http://zh.mweb.im/
MAS :https://itunes.apple.com/cn/app/mweb-pro-markdown-writing/id954188948?l=zh&ls=1&mt=12
自定义预览样式,让 MWeb 支持 ECharts、mermaid、PlantUML 等任何 JS 画图库
之前 MWeb 2.0 说要支持 PlantUML,后来又否定了,因为我发现大部分朋友只需要自定义预览样式就可以做到的这种 PlantUML 支持,而早在 MWeb 1.2 版都支持了自我增加这功能了,介绍文章为:自定预览 CSS。2.0 中的自定预览功能有所变化,这也是今天要介绍的内容。
今天要说的是一步到位,做一个支持 ECharts、mermaid、PlantUML 这三个常用的画图库的预览样式。如果你不想看到制作方法,只想使用,可以直接下载 (>>点此下载<<) 这个预览样式(如果你的主题中已有名称为 sample-custom-html-charts 的样式,可以直接用这个,不用下载了),解压后,把整个文件夹复制到 MWeb 的预览样式所在文件夹,然后点一下刷新按钮即可。 你可以在 偏好设置 - 主题&样式 中点一下 预览样式 右边的编辑按钮来打开预览样式所以文件夹。这个预览样式中还包含了一个测试的 Markdown 文档,用 MWeb 打开这个文档,然后选择这个预览样式并预览就可以看到效果。
MWeb 2.0 版正式发布,¥50 促销一周,一周后将变为 ¥98,所以也算 50% OFF 了!
MWeb 2.0 版为重大升级版,这个版本主要为:
- 文档库支持自定义保存位置(现在可以把文档库保存到网盘来同步了)。偏好设置 - 通用设置 中可以设置
- 文档库和外部模式都增加 Tabs 支持
- 文档库支持 Tags
- 增加工具栏
- 重新设计了文档大纲和文档库的文档属性设置方式
- 改进表格编辑和插入功能,提供了 UI 界面并支持全键盘操作,使用方式:
Ctrl + Shift + T或按工具栏的插入表格按钮。 - UI 有所调整。
这次发布我做了一个介绍视频,基本上把 MWeb 的功能和使用都演示了一下,包括 2.0 版的功能,感兴趣的朋友可以去以下地址看看:
- B 站(bilibili)地址:http://www.bilibili.com/video/av5366059/
- Youtube 地址:https://www.youtube.com/watch?v=85RwOuxthoE
当然,视频也放上官网了。
Product Hunt 上求投票!
这次在 @im61 的帮助下,分享到了 Product Hunt !网址:https://www.producthunt.com/tech/mweb MWeb 在国外推广非常艰难,目前我仅知道 Product Hunt,所以这次对 MWeb 的发展非常重要!希望各位帮助一下!
MWeb 2.0 测试版可以下载啦,这次是公开测试,感兴趣的朋友可以试试
2.0 版是 MWeb 发布以来,最重要的一个版本。MWeb 自去年一月份发布以来,获得了很多朋友的建议,在此非常感谢!没有你们,2.0 版可能就不能出来!然后再次感谢 Producter: http://weibo.com/u/5642390620 为 MWeb 设计的图标!
2.0 改动蛮多的,用写的可能表达不大好,我本想录个视频的,但是录起来效果更渣,只好再用写的了。。
新版的 MWeb 界面如下,这个版本终于是可以自定义文档库的位置了,可以打开 偏好设置 - 通用设置 里设置文档库的位置。另外也增加了 Tabs 功能,MWeb 的 Tabs 的功能设计得跟 Sublime 相同,就是一个窗口中会有一个可替换的 Tab,用点击第二栏的列表时,会使用这个可替换的 Tab 显示点击的文档。如下图,如果用 右键 - 在新标签中打开 或者双击则会打开一个固定的新 Tab。

Copyright © 2015 Powered by MWeb, Theme used GitHub CSS.

