一直以来都奢想拥有一款全能好用的Markdown编辑器,直到遇到了Atom。废话不多说,直接开搞!

1. 安装Atom

下载安装Atom:https://atom.io/

2. 增强预览(markdown-preview-plus)

Atom自带的Markdown预览插件markdown-preview功能比较简单,markdown-preview-plus对其做了功能扩展和增强。

  1. 支持预览实时渲染。(Ctrl + Shift + M)
  2. 支持Latex公式。(Ctrl + Shift + X)

使用该插件前,需要先禁用markdown-preview。

查看实时渲染和公式编辑功能。

3. 同步滚动(markdown-scroll-sync)

同步滚动是Markdown编辑器的必备功能,方便翻阅文档修改时能快速定位到预览的位置。

markdown-scroll-sync不仅支持同步滚动,在光标位置发生变更时也会同步滚动,这个功能在很多Markdown编辑器中不具备。

4. 代码增强(language-markdown)

一般的Markdown编辑器提供了代码着色等基本功能,language-markdown除了能给代码着色,还提供了快捷的代码片段生成等功能。

5. 图片粘贴(markdown-image-paste)

图片功能支持的好坏直接决定了我是否选择使用一个Markdown编辑器。也有不少编辑器和在线的图床绑定,但是这种方式受限于网络。虽然Markdown支持插入本地图片,但是每次插入新图片都是一堆重复操作:截图-命名-保存-插入。markdown-image-paste将这些操作一步完成:

  1. 使用截图工具将图片复制到系统剪切板。
  2. 在Markdown新起一行输入文件名。
  3. Ctrl + V 会自动把图片保存到Markdown文件相同目录下(因此要求Markdown文件应该先保存),并命名为刚输入的文件名,同时在刚才输入文件名行处生成img标签。

当然,如果想插入gif动图就不能这么简单了,还是老老实实地下载这个工具手工插入吧。

LICEcap: http://www.cockos.com/licecap/

6. 表格编辑(markdown-table-editor)

一直对Markdown的table语法很无爱,直到遇到了markdown-table-editor,这操作效率简直炸了!文字已经不能表达我的激动之情了,直接看图吧。

7. pdf导出(markdown-themeable-pdf、pdf-view)

不少Markdown编辑器都会提供pdf导出功能,甚至将其作为收费功能。而Atom的markdown-themeable-pdf、pdf-view插件可以轻松实现pdf导出和预览功能。

安装markdown-themeable-pdf时遇到了一些坑,在此分享一下:

由于GFW的问题,导致该插件使用的phantomjs模块无法安装成功,从而导出pdf报告错误。

解决办法是:

  1. 从官网下载phantomjs二进制安装包:http://phantomjs.org/download.html
  2. 解压下载的phantomjs-2.1.1-macosx.zip压缩文件。
  3. 添加index.js文件到解压后的目录。
  4. 将整个目录的内容拷贝到:~/.atom/packages/markdown-themeable-pdf/node_modules/phantomjs-prebuilt,注意目录phantomjs-2.1.1-macosx被重命名为phantomjs-prebuilt
  5. 重启Atom,右键->Markdown to PDF即可,生成的pdf文件在Markdown文件同目录。

其中index.js文件内容为:

module.exports = {
path : __dirname + '/bin/phantomjs'
}

8. 总结

以上介绍的Atom的Markdown插件,基本上满足了我对一个Markdown编辑器的所有幻想,实时渲染、同步滚动,公式、代码、图片、表格的快捷操作与支持,以及pdf文件导出、预览等。希望此文对你有所帮助。

使用Atom打造无懈可击的Markdown编辑器的更多相关文章

  1. Atom打造优雅的MarkDown 编辑器

    1.下载Atom https://atom.io/ 2.安装Atom 双击自动安装,会默认安装到C盘,无法修改. 3.安装simplified-chinese-menu 插件 这是一个可以将软件汉化的 ...

  2. 打造自己的Markdown编辑器

    原文链接:  http://www.errdev.com/post/5/ Markdown以其简洁的语法赢得了广大程序猿的喜爱,搜了一下github上相关的web编辑器,星星比较多的 Stackedi ...

  3. vscode打造最佳的markdown编辑器

    参考:https://www.jianshu.com/p/18876655b452 在macos下也设置成功:

  4. 使用Codemirror打造Markdown编辑器

    前几天突然想给自己的在线编译器加一个Markdown编辑功能,于是花了两三天敲敲打打初步实现了这个功能. 一个Markdown编辑器需要有如下常用功能: 粗体 斜体 中划线 标题 链接 图片 引用 代 ...

  5. 最新主流 Markdown 编辑器推荐

    Markdown ,2004年由 John Gruberis 设计和开发,是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,以下将介绍目前比较流行的一 ...

  6. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  7. 好用的Markdown编辑器一览

    Markdown 是一种简单的.轻量级的标记语法.用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成极富表现力的文档. Markdown具有很多优点: 写作中添加简单符号即完成排版,所见即 ...

  8. #第一用Markdown编辑器#

    Markdown初次使用 This is a simple Markdown editor based on 'Markdown' it's * italic * style. it's also _ ...

  9. Atom打造 c/c++编译环境(忙了一个上午)

    众所周知 Atom是一款非常酷炫的编辑器.因为它就像上古卷轴一样,玩家可以开发各种dlc补丁,实现自己想要的效果.所以Atom 可以被你改造成自己想要的东西,可以用来写算法竞赛题目,可以开发网页,可以 ...

随机推荐

  1. Linux驱动技术(八) _并发控制技术

    为了实现对临界资源的有效管理,应用层的程序有原子变量,条件变量,信号量来控制并发,同样的问题也存在与驱动开发中,比如一个驱动同时被多个应用层程序调用,此时驱动中的全局变量会同时属于多个应用层进程的进程 ...

  2. Array方法归类总结

    数组的转换方法 valueOf()方法,数组调用该方法后返回的还是原来的数组. toString()方法,数组调用该方法后会调用每一项的toStirng()方法,之后将每一项拼接成一个以逗号分割的字符 ...

  3. esri-leaflet入门教程(4)-加载各类图层

    esri-leaflet入门教程(4)-加载各类图层 by 李远祥 在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLay ...

  4. java 解析json

    例<解析评论> //post方式请求 String url=“http://product.dangdang.com/comment/comment.php?product_id=6056 ...

  5. Python 接口测试(一)

    @font-face { font-family: "Times"; }@font-face { font-family: "宋体"; }@font-face ...

  6. 硅谷创业教父Paul Graham:如何获得创业idea

    link:http://kb.cnblogs.com/page/165530/ 英文原文:How to Get Startup Ideas,翻译:Jason Zheng 要想获得创业 idea,请别试 ...

  7. BeautifulSoup简述

    网页解析器 从网页中提取有价值数据的工具 网页解析器种类 正则表达式 (模糊匹配) html.parser (结构化解析) BeautifulSoup第三方插件 (结构化解析,相对比较强大) lxml ...

  8. Javascript学习十

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  9. 第34篇 再谈http协议

    从打开一个网址说起 当在浏览器中输入一个网址的时候,浏览器会渲染出对应的网页的内容.作为web开发人员来说,应该知道这个过程: 当输入的一个网址为域名的时候,浏览器则根据本机的网关和DNS服务器来解析 ...

  10. AR入门系列-04-vuforia识别多个图片及同屏展示

    首先,我们需要在官网中识别数据库添加多张图片,并将数据库下载下来覆盖原来的数据库 在 Hierarchy视图中需要多个ImageTarget 将新建的ImageTarget(1) 选择数据库中的识别图 ...