分享一个把 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

2016/9/5 posted in  MWeb

MWeb 2.0.7 版发布!

更新前针对 MAS 上的评论重点说一下:MWeb 是支持直接对本地文件夹操作的,不用导入到文档库!请使用外部模式!请使用外部模式!!请使用外部模式!!! 重要的话讲三次!使用方法是 CMD + E 打开外部模式并把文件夹拖进左侧即可。

重要说明: Mac App Store 版已提交审核,还没正式发布,想必明天应该是能通过。官网版已经可以更新了。

这次的更新主要是修正一些 bug, 详细为:

  • 加把 HTML 粘贴为 Markdown 的功能,在菜单: 编辑 - 把 HTML 粘贴为 Markdown。提示:此功能可以快速把网页上的内容保存为 markdown,下面有 gif 演示。
  • 加支持打开所有扩展名的文档。
  • 加重新加载文档库的功能,菜单:文件 - 重新加载文档库。
  • 加:当当前视图模式为仅预览模式时,用 CMD + P 会打印当前预览的结果。
  • 正 CMD + Shift + S 复制文件的 bug
  • 正预览可能会变空白的问题
  • 正在表格编辑中,如果有 LaTex 公式,再编辑时公式会出问题的 bug。
  • 它的一些 Bug 修正和性能提高。

把 HTML 粘贴为 Markdown 功能演示:

这个功能默认会把远程的图片保存到本地,如果你不想保存图片,可以使用 CMD + Shift + N 新建文档再用此功能。

2016/7/27 posted in  MWeb

自定义预览样式,让 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 打开这个文档,然后选择这个预览样式并预览就可以看到效果。

Read more   2016/7/19 posted in  MWeb

MWeb 2.0 版正式发布,¥50 促销一周,一周后将变为 ¥98,所以也算 50% OFF 了!

Read more   2016/7/17 posted in  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。

Read more   2016/7/4 posted in  MWeb

MWeb 1.9.7 发布!这次增加了一个有意思的改进,有必要说一下。

有必要说明的预览方面的改进

这次的改进跟上图中的两个选项有关。

Read more   2016/2/26 posted in  MWeb

MWeb 1.9.3 发布!图床支持七牛、修正发布到 Wordpress https 问题、中文版不能发布到 Medium 问题等

详细更新说明:

新增:

  • 图床功能现在支持七牛 (qiniu.com) 了
  • 文档库增加清倒废纸篓功能
  • 全屏快捷键:Control + CMD + F
  • 发布到印象笔记时会记住上一次选择的笔记本

修正:

  • 发布到 Wordpress 和 MetaWeblog API 不支持 https 问题
  • 中文版不能发布到 Medium 问题
  • 导出 PDF 选择带目录时某些情况下目录结构不对问题
  • 特殊文档不能正确解析问题(CPU 100%,切换文档不能显示)
  • 像 wow_great_stuff 这种写法不会解析成下划线了
  • 其它一些 Bug 修正和细节改进。
Read more   2016/1/19 posted in  MWeb

MWeb 1.9 发布!新图标、编辑器大改进、导出 PDF 改进、增加图床功能、中文版等!

新图标


换了一个新的图标,新图标是由 Producter
http://weibo.com/u/5642390620 设计的,MWeb 终于有了一个高大上的图标了!非常感谢 Producter!

Read more   2015/12/18 posted in  MWeb