让Markdown的书写更加顺畅

喜欢键盘的敲击声,每一下都掷地有声,正中了那句话,念念不忘,必有回响。

为什么会有这篇文章

Markdown作为一种简单、优雅的文字编排规范,非常受到“理工男”的喜爱,因为没有了那些字体、字号之类的困扰,排版也是通过# ## ##直接控制,一行是一行,一段是一段,爽的不行。

下面我介绍一些近几年来自己用过的工具和软件,希望能让更加专注于内容的创造,而在工具上少花一些时间。

Sublime Text

Sublime我使用的绿色版本,已经默认被破解了,不需要输入序列号。至于为什么选择绿色版,主要是因为携带方便,我自己使用一块SSD移动硬盘来同步自己的工作,使用FreeFileSync来做具体的同步工作,坚持了一年多了,效果还不错。

安装MARKDOWN支持插件

默认Sublime Text是不支持Markdown语法高亮和预览的,对于万能的Sublime Text,这点事情一定有插件能解决。

Sublime Text 3 安装Package Control,挺不能理解为什么不默认含在app里 快捷键ctrl+`或者 View > Show Console 菜单打开控制台

import urllib.request,os;
pf='Package Control.sublime-package';
ipp=sublime.installed_packages_path();
urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));
open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

上面这几行是需要在控制台里一行一行输入的,Sublime官方提供过了一个一行的命令行方式,地址见这里,里面对版本3和2有不同的命令,再次不多说了。因为官方建议这条命令可能会随时更新,所以不建议其他网站转载这条命令。

安装完成自后,会看到下面的图

[图片缺失:logo]

如果网络条件不好,安装失败的话,只能采取下载安装包的方式

  1. 点击 Preferences,然后选择 Browse Packages…
  2. 进入上一级目录,然后进入 Installed Packages 目录。
  3. 在这里下载 Package Control.sublime-package,然后复制到该目录下。
  4. 重启 Sublime Text。

安好重启后,用万能快捷键Ctrl+Shift+P,调出菜单,输入pcip

[图片缺失:logo]

选择Package Control: Install Package,会出现下面这样一个界面

[图片缺失:logo]

在这里输入omnimark就能看到omnimarkdown插件,回车安装,重启Sublime即可。

OmniMarkdown插件,可以通过在浏览器中实时预览输入的MARKDOWN文档效果。

快捷键(MAC) Command + Option + O: 在浏览器中预览 Command + Option + X: 导出HTML 快捷键(PC) Ctrl + Alt + O: 在浏览器中预览 Ctrl + Alt + X: 导出HTML

如何舒适的插入图片

如果你用了一段时间,你会发现用![]()的方式插入的图片,和生成之后的网页总是很多别扭。在这里推荐一个hexo-asset-image

hexo-asset-image的安装

首先确认 _config.yml 中有 post_asset_folder:true

在 hexo 目录,执行

npm install https://github.com/xcodebuild/hexo-asset-image --save

hexo-asset-image的使用

假设在

MacGesture2-Publish ├── apppicker.jpg ├── logo.jpg └── rules.jpg MacGesture2-Publish.md 这样的目录结构(目录名和文章名一致),只要使用 *[图片缺失:logo]* 就可以插入图片。生成的结构为

public/2015/10/18/MacGesture2-Publish ├── apppicker.jpg ├── index.html ├── logo.jpg └── rules.jpg 同时,生成的 html 是

<img src="/2015/10/18/MacGesture2-Publish/logo.jpg" alt="logo">

而不是愚蠢的

<img src="MacGesture2-Publish/logo.jpg" alt="logo">

通过这个改动,图片就可以直接保存在和MD文件同一个目录下,

[图片缺失:图片可以和MD文件保存在同一个目录下]

并且,在MD编辑中,可以依然使用之前的格式来插入图片

[图片缺失:图片引用依然可以使用同样的格式]

不过这个库有一个唯一的问题,就是在http://localhost:4000预览的时候是正常的,但是使用Sublime配合OmniMarkdown插件的实时预览,图片就不正常了。没办法,暂时只能这样了。

其他工具

离线书写Markdown文档

Cmd Markdown 还不错的一个Windows平台下的Mark Down 语言编辑器,支持同步文章到GITHUB或者CODING等托管空间

在线Markdown工具

  1. https://stackedit.io
  2. https://www.zybuluo.com/mdeditor 比较推荐,有时候忘记语法了,打开这个网页就能很直观的参考一下。

在iTerm里使用sublime

一句话

alias subl='open -a "Sublime Text"'

这样,在iTerm中就可以使用subl,愉快的调用sublime来进行编辑文件了。

参考资料

  1. http://blog.sunnyxx.com/2014/03/16/sublime_text_markdown/
  2. https://github.com/CodeFalling/hexo-asset-image