scomper's blog

MarkEditor 2 的特点和体验

2018.02.23

自从博客迁移到 Bitcron 以后,MarkDown 编辑器就选择了和它同源的 MarkEditor,一方面是更新内容和同步非常方便,另外也喜欢 MarkEditor 匹配 Bitcron 的很多特性,例如对表格和动态图表的支持,对 Meta 声明的支持,加上微信公众号、图片的预览、PDF 导出这些功能点,感觉非常顺手。

MarkEditor 2 和 1 相比显得更精致,依旧是基于文件夹的开放性文档管理模式,图片处理上新增加了云端服务的支持,发布和分享内容变得更简单,利用 MarkEditor 的自有云服务,非博客用户也能方便的通过 URL 分享内容。

抛开版本迭代上的变化,MarkEditor 的诸多特性决定了它会是一个越来越受欢迎的编辑器,有很多或许一直是你正在期待的。

主题和配色自定义

视觉上的变化总是最直观的,MarkEditor 2 增加了主题模块,提供了多种主题配色供选择,也能方便的进行自定义。

主题的配色不仅体现在编辑器上,它也会影响你的输出结果,例如通过「导出 - 复制 MarkEditor URL」发布成网页时,内容的显示风格将和编辑器中显示的配色保持一致。如果是「复制富文本」粘贴在邮件中,也会形成独特的邮件风格。

通过右上角的主题选项中的「简约智能自定义」,可以修改主题的配色并保存成 csv 的文件,从而有一套自己独特的配色。

文档管理模式

开放的文档管理是选择 MarkEditor 的原因之一,不像 Ulysses 是个封闭的库环境,MarkEditor 选择的是索引 Finder 目录的方式。这样的好处是 md 文件不通过 MarkEditor 都能访问和备份,给予了用户最大的访问灵活性。如果把工作目录放在 iCloud 文件夹,备份和文件安全更多了一层保障。

初始工作环境设定时可通过双击 ⌥ 键或者菜单项「文件 - 工作目录管理器」来设定工作目录。

设定好工作目录后可以通过「视窗 - 根目录设置」来定义图片的保存位置,默认的路径是 ./_image/ ,当我们拖拽图片到编辑器中时,会自动在当前文档所在目录下自动生成一个 _image 的子文件夹,推荐将图片路径设置成 /_image/,统一将图片保存到根目录下的 _image 之中,便于管理和检索图片。

MarkEditor 索引的虽然是 Finder 中的目录,不过在编辑器内部还是有更多的灵活性,除了排序、文件夹图标以外,还可以设定排除的文件夹(在根目录上右键),这项设定主要是针对同步服务的,添加不想同步的文件夹和路径。文件夹图标的自定义只需要复制一个 icon.png 图片文件到文件夹里即可,MarkEditor 会将这个图片作为文件夹图标来显示。

通过 Finder 向文件夹中添加文件或文件夹后,MarkEditor 中会自动同步显示,不过编辑器里只会显示 md、txt 格式的文件,其他文件在同步时依旧会上传到云端服务器。

当我们将 ZIP、PDF 文件拖拽到编辑界面或者左栏的文件夹列表时,文件同样会复制到当前的文件夹,区别是如果拖拽到编辑器的文档之中,会以附件的形式存在并自动添加 URL,如果直接拖拽到文件夹之中则单纯以文件的形式复制到目录之中。

文档和文件夹排序

MarkEditor 的内容管理包含两个基础层级,一个是区分不同性质内容的工作目录,一个是当前目录的内容组织和管理。工作目录可以理解成依据不同需要单独设置的存储位置,例如,用于存储博客内容的 blog 文件夹,默认用来存储笔记的 ~/MarkEditorQuickNote 文件夹(菜单栏快速记录保存的位置),双击 Option 键切换工作目录;当前目录里的内容基于文件夹、子文件夹的层级方式进行组织,我们可以决定隐藏那些文件夹、同步时排除那些文件夹。

排序方式上,根目录的配置(视窗 - 根目录设置)中提供了传统的排序方式的设置项,可按名称和时间排序,同时在左侧的文件夹列表里也支持直接拖拽来调整顺序,具体文件夹中的文档也支持这样的排序方式。需要注意的是,如果你拖拽到其他文件夹之上而不是文件夹之间的话,这个文件夹会变成其子文件夹而不是顺序变化。

导出成 PDF 文件时(右键菜单 - 导出为 PDF 电子书),文档的排序是基于文档的 Meta 声明里的 date 或者创建日期来排序。

Meta 支持

MarkEditor 的 Markdown 解析,支持简洁性 Meta 声明,就是首行开始用 key: value 格式声明的一行行语句,通过这些 Meta 声明,不仅可以定义常用的文章标题和创建时间,还可以设置文档的状态、分类和关键词。

文章顶部的 Meta 声明对博客用户来说非常有用,导出文档时文件列表的标题显示也都会优先显示 Meta 声明的内容。例如上面图示中「列表中标题」的选择,图示底部的新文档模板等。

新文档模板中不仅用到了 Meta,还使用了一些特殊的变量,例如,自动获取时间的$date%Y-%m-%d %H:%M$ 以及获取文件名作为标题的$name$

下面列出了常用的各种 Meta 声明形式,一般只需要添加 title、date、tags 这几项,其他几项可以对应用在不同的场景中。

title: 文章标题
date: 创建时间
tags: 关键词
status: public // 文档的状态,public 为公开,system 为不可见
categories: 分类
comment: no //是否显示留言
toc: true //是否显示当前文章的内容索引
icon:  🐳
summary:  这是摘要的内容说明。
  • 如果同步后不希望文章显示在博客,可以用 status 把文章隐藏起来;
  • 文章后如果不想出现留言和评论的部分,添加一行 comment: no 即可;
  • Meta 声明中还可以使用 password: 的语句来设定文档的访问密码(需 Bitcron 网站的模板支持密码访问)。
  • 文章中单独一行 [TOC],最终会被解析为当前文章的内容索引,对于长篇的内容能提高阅读体验。
  • 文档中使用 icon: 🐳 ,文件列表中标题前面的图标会替换成你定义的 Emoji 图标,在笔记记录的场景中会很有意思。
  • 如果添加了摘要 summary: 部分,这里的内容会作为文章预览的部分显示在博客主题中。

MarkEditor 对图片的处理

MarkEditor 支持图片的直接预览,并将插入的图片自动保存到 /_image/ 文件夹。如果在编辑器中删除图片,会同步删除 /_image/ 文件夹中的图片,维护起来简单直观。

  • 图片可见,编辑器界面显示图片还是显示 MarkDown 的图片语句;
  • 路径,决定图片保存的具体位置,统一保存到根目录下填写 /_image/ ,作为子目录保存到当前文件夹填写./_image/
  • 归档方式,图片文件夹中按年月(基于文档的 Meta date 的时间)设置子目录保存图片,需要注意的是设置归档后图片路径会增加子目录这个层级,如果变更了文档中的 date 会找不到图片。

由 MarkDown 编辑器发布文档到互联网,以往经常操心的就是图床的问题,往往发布内容后需要单独再插入图片,MarkEditor 里解决这个问题采用了两种方式,一种是 Pro 版自带云端存储,选择「导出 - 复制为 MarkEditor URL」时会自动上传文本和图片,并生成可访问的 URL 链接。另一种方式是针对已经定义了「云端」(Bitcron、Amazon、七牛)服务的博客用户,选择「导出 - 复制公开的 URL」上传到自己的博客服务器并生成对应的链接。

自有云端服务的用户,因为图片都是保存到统一的文件夹,所以如果要更新文章中的图片,只需要替换本地图片文件夹中的图片,然后使用 MarkEditor 同步就可以,这一点对于维护文章和更新内容来说非常友好。

MarkEditor 的云服务和自有的云端服务之间的差别是,前者只是简单的内容上传,并不会永久保存,作为临时性的内容分享合适,但是不便于内容的长期保存和维护。

MarkDown 输入法优化

在 Markdown 中,经常需要输入 [ ] : < > 等特殊字符,MarkEditor 中可以忽略当前输入法的设定直接输出英文符号,前提是在菜单项中勾选启用「写作 - MarkDown 输入法 - 修正左右 Shift 键」,这样就能直接输入上面提到的几个英文符号,[ ] 符号不需要按 Shift 键直接回车就可以。菜单项里可以定义左右两个 Shift 键。也可以单独定义左或者右 Shift 键,定义单个 Shift 键的方式更好,既不影响现有的输入习惯同时也能在需要的时候直接输入 MarkDown 语法符号。

针对输入优化的另一个细节就是「中英文混合的空格补全」,输入过程中会自动在英文单词和字符后空格,极大的提高了输入效率。启用此特性只需在菜单项中勾选 「写作 - 中英文间自动空格」,后续书写过程中 MarkEditor 会自动帮你补全中英文之间的空格。

其他几个有益于写作的选项:

  • 聚焦模式,灰掉当前段落以外的其他内容,突出显示当前光标所在的段落;
  • 居中保持,自动保持光标所在的位置处于编辑器中间部分;
  • 禁用高亮,以更朴素的方式显示内容,不显示 MarkDown 语法区别的颜色和风格,能提高软件的响应速度;
  • 全屏模式,全屏显示编辑区(⇧⌘F),无干扰式的写作。全屏显示内容的宽度可在偏好设置中定义「全屏最大宽度」;
  • Command+Y | 显示 TOC 栏,便于在文档结构中快速跳转
  • Shift+Command+D | 插入当前时间,格式为 2015-11-08 01:21:56
  • Shift+Command+G | 插入二维码图片。

MarkEditor 云服务

云服务是 MarkEditor 2 新增的特性之一,不用单独申请服务器就可以方便快速的通过 URL 分享自己的文章,「导出 - 复制为 MarkEditor URL」是 Pro 版本的功能。

使用前需要访问 https://www.markeditor.com 用购买 MarkEditor 的邮箱注册激活云服务,不需要其他的设置,以后直接在 MarkEditor 里「导出 - 复制为 MarkEditor URL」就可以,MarkEditor 会自动上传内容和图片,并生成 URL 链接复制到剪贴板。

MarkEditor 云端并不做严格意义上的流量、容量的限制, 当文件的存储时间过久, 或者单文件的流量过大, 会自动触发文件的删除。推荐作为临时性的网络文章分享,登录 www.markeditor.com 的 Dashboard 后台可以做一些简单的内容管理,不过因为定位是快速分享不能长期的保存内容,Pro版自带一年的云服务使用期限,之后续费的价格为 ¥89/年。

通过「MarkEditor - 打开数据目录」能查看生成在本地的 pre_rich_content_source.html 富文本原始文件,直接打开这份文件可以预览效果,云服务也就是把这份 HTML 以及它所包含的图片上传到云端。

导出为 PDF

MarkEditor 支持单个文档和文件夹的 PDF 导出,导出整个目录时可以自动创建封面、目录,并允许添加 PDF 密码。


遇到长篇的内容,如果希望在导出 PDF 时指定位置强制分页,可以单独插入一行输入[PAGE]

PDF 内容的排序是基于文档中的创建日期来决定的,也可以添加一行 date: 的 Meta 声明来调整时间的顺序,默认文章的标题也是 Meta 中声明的 title: 优先,所以定义好恰当的 title:date: 输出的内容会更符合自己的要求。

导出的 PDF 自动创建的封面是比较简单的字体大号居中,如果更有想法,可以在文档根目录下放置cover.jpg 或者 cover.png来作为封面图片,MarkEditor 会自动将其识别为封面。优先级更高是的cover.md,可以直接用 HTML 代码直接在cover.md中绘制代码,如果它存在,那么文档本身转制成 PDF 时的第一页,会被作为封面。

复制为富文本

在 MarkEditor 中编辑内容,以「复制为富文本」的方式粘贴到邮件中,可以获得更漂亮的 HTML 邮件内容。

复制为富文本会将当前 Markdown 文档渲染后的结果全部复制,并传入到剪贴板。渲染后的内容中如果包含图片,会自动适配当前的云服务,如果已经添加了云端服务器,图片的 URL 会是同步到博客的链接地址,如果没有设置云端服务器会上传到 MarkEditor 自有云(Pro 版),并转为 Web 上可直接访问的 URL。

因为涉及到图片的 URL 地址,所以「复制为富文本」前需要先同步内容到云端,如果不希望出现在博客文章列表中,在顶部的 Meta 定义里加上一行 ``,如此一来,内容一样会同步到云端,博客中不显示但邮件中的图片都能正常显示。

采用云端做为图床的方式,图片的分辨率受限于博客服务器上的后台设置(Dashboard - 常规 - 最大图片宽度)。

导出菜单里还提供了另一种「复制为富文本(本地)」,这种方式图片会以附件的形式保存到邮件当中,不再使用云端的服务器做图床,图片的分辨率和原始插入的图片一样,好处是减少了对博客的依赖性,不过邮件也会因为插入原始分辨率的图片而变的较大,所以选择这个方式时很有必要单独优化插入图片的大小。

导出里「复制为微信公众号」是另一个很接地气的功能,其实也是一种导出为富文本的方式,而且提供了 3 种样式的选择,方便直接粘贴到微信公众号的 Web 发布页面当中,极大的提高了效率。

导出为图片

短篇内容还有一种导出方式就是「导出为图片」,适合用在移动设备的内容分享上。偏好设置中可以定义导出图片的宽度以及为移动设备导出时优化的宽度,如果是在 Retina 屏幕的 Mac 上操作导出,输出的分辨率会 ×2,如果按图示的参数就是 1360 px(680×2) 和 1100 px(550×2)。

导出的设置还会受到菜单项「导出 - 导出偏好设置」的影响,如果此处勾选了「为移动设备优化」,那么按照图示的参数导出,在我的 Mac 上会获得宽度为 1100 px 的输出图片。

  • 源于原始文本,MarkDown 语法符号和 Meta 声明的部分都会输出和显示;
  • 源于渲染后的 HTML,推荐使用的方式,渲染后效果。

导出的偏好设置藏在菜单项里多少让人有点费解,开始的时候还真有点摸不着头脑,尝试输出了几次才明白了套路,导出前检查菜单项里的「导出偏好设置」勾选项,如果要调整输出图片的宽度,到「偏好设置」中改变。

Markdown 到 Slide

MarkEditor 2 新增加的幻灯片模式适合用来基于内容做快速的讲解和演示,勾选「插件 - MarkDown to Slide」,就可以在浏览器中以幻灯的方式展示文档内容。

具体步骤如下:

  • 勾选「插件 - MarkDown to Slide」;
  • 点击「视窗 - 预览于 Web 浏览器」获得访问的 URL 地址;
  • 复制地址或者扫码在浏览器中访问。

MarkDown to Slide 展示的是当前选中的文档,页和页之间使用 # ## 等 H1~ H6 的标题实现层级逻辑。实际使用中,可以把浏览器窗口单独投影到演示屏幕上,本地调到 MarkEditor 的编辑界面,切换文档或者点击文档右侧的 TOC (⌘Y)来实现内容的跳转和控制。

这个功能很值得体验一次,你会发现很多时候我们不需要 Keynote、PowerPoint,只需要选择一个合适的配色就可以开始你的阐述和演示。这个功能还可以用来向局域网内的同事展示文章,你自己就是服务器 :)

访问 URL 的设备并不需要安装 MarkEditor,只需要处于同一个局域网即可。此时安装 MarkEditor 的电脑相当于一台 Web 服务器,网页会以幻灯片的形式自动刷新同步显示 MarkEditor 编辑器当前的文档。

段落居中的语法

MarkEditor 2 为了方便排版,提供了一些内部的语法定义,例如在段落最后加上 [center][left][right],或者[center 20px red],段落前后需要空一行。

修饰的关键词有如下类型:

  • center (或 middle)、left、right,表示居中、居左、居右
  • n% 表示缩放, 200% 表示放大到 2 倍
  • 小数点 (如x.y) 表示行高
  • 整数 表示字体大小
  • 颜色值 (如 blue #333) 表示字体色
  • @颜色值 (如 @red @#888888) 表示背景色

[--「壹页单章」会员计划 --](https://scomper.me/members) [center] 输出后的如下

--「壹页单章」会员计划 --

快捷键替换

MarkEditor 2 默认的快捷键 Control+` 是同步,刚好和鼠须管冲突。新版里增加了快捷键替换,语法有点「技术化」,冒号前是现在的快捷,后面是你想替换的快捷方式,例如:Control+`: Alt+`。


有兴趣的用户可以访问 https://www.markeditor.com/ 或者趁优惠直接 购买

Comments
Write a Comment