Sublime-Text-3-OmniMarkupPreviewer

Markdown 创立的宗旨是实现「易读易写」。其语法简洁直观，你可以使用任何喜爱的文本编辑器来阅读和写作，更专注于书写的文字内容而不是排版样式。编辑完毕可轻松地导出成 HTML、PDF 等其它格式。

语法学习参考 : Markdown 语法说明(简体中文版)

Sublime Text 3 以及 OmniMarkupPreviewer

Sublime Text 是一套跨平台的文字編輯器，支持基於Python的外掛程式。Sublime Text 是專有軟體，可透過套件（Package）擴充本身的功能。大多數的套件使用自由軟體授權釋出，並由社群建置維護。 —— 来自维基百科 2

Sublime Text 作为近些年迅速崛起的后起之秀，凭借其精美的 UI 交互、完备的特色功能俘虏了一大批忠实用户。其风靡之势刺激了一些新老文本编辑器的重新思考和开发，开源实现 Lime Text Editor 无需多说，Github 主导的 Atom 以及号称下一代 Vim 编辑器的 neovim 都明确受到 Sublime Text 的影响。

而 OmniMarkupPreviewer 作为 Sublime Text 的一款强大插件，支持将标记语言渲染为 HTML 并在浏览器上实时预览，同时支持导出 HTML 源码文件。

支持的标记类语言:

• Markdown
• reStructuredText
• WikiCreole
• Textile
• Pod (Requires Perl >= 5.10)
• RDoc (Requires ruby in your PATH)
• Org Mode (Requires ruby, and gem org-ruby should be installed)
• MediaWiki (Requires ruby, as well as gem wikicloth)
• AsciiDoc (Requires ruby, as well as gem asciidoctor)
• Literate Haskell

OmniMarkupPreviewer 设置详解

文章仅提供了简单的安装使用说明，以及个人较为关注的设置选项。

想了解更多相关信息，请点击文档内链接并参考脚注部分。

安装和使用

你可以在 Sublime Text 内通过 Package Control 输入 Install Package 来安装 OmniMarkupPreviewer, 也可以从其 Github主页 下载压缩包，解压到 Sublime Text 的Packages 目录即可完成安装。

Package Control - Sublime Text 的包管理器，简单好用，推荐安装

使用方法: Sublime Text 内 Markdown 标签页点击鼠标右键 - 选择Preview Current Markup in Browser。 或者使用快捷键 (OSX ⌘+⌥+O; Windows, LinuxCtrl+Alt+O) 来预览。

详细设置

OmniMarkupPreviewer 默认配置基本够用，但详细设置后才能将其特色功能充分发挥。

分享一下 ${packages}/User/OmniMarkupPreviewer.sublime-settings 文件:

${packages} 路径为 /Users/ashfinal/Library/Application Support/Sublime Text 3/Packages/

注意用户账号替换。可通过点击菜单栏 Preferences - Browse Packages 打开其 Finder 窗口

1. {
2.  "server_host": "192.168.1.100",
4.  "browser_command": ["open", "-a", "Google Chrome", "{url}"],
6.  // User public static files should be placed into
7.  // ${packages}/User/OmniMarkupPreviewer/public/
8.  // User templates should be placed into:
9.  // ${packages}/User/OmniMarkupPreviewer/templates/
10.  // Requires browser reload
11.  "html_template_name": "Evolution Yellow",
13.  // list of renderers to be ignored, case sensitive.
14.  // Valid renderers are: "CreoleRenderer", "MarkdownRenderer", "PodRenderer",
15.  // "RDocRenderer", "RstRenderer", "TextitleRenderer"
16.  // for example, to disable Textile and Pod renderer:
17.  // "ignored_renderers": ["TextitleRenderer", "PodRenderer"]
18.  "ignored_renderers": ["CreoleRenderer", "PodRenderer", "RDocRenderer", "TextitleRenderer", "LiterateHaskellRenderer"],
20.  "mathjax_enabled": false,
22.  // MarkdownRenderer options
23.  "renderer_options-MarkdownRenderer": {
24.  // Valid extensions:
25.  // - OFFICIAL (Python Markdown) -
26.  // "extra": Combines ["abbr", "attr_list", "def_list", "fenced_code", "footnotes", "tables", "smart_strong"]
27.  // For PHP Markdown Extra(http://michelf.ca/projects/php-markdown/extra/)
28.  // "abbr": http://packages.python.org/Markdown/extensions/abbreviations.html
29.  // "attr_list": http://packages.python.org/Markdown/extensions/attr_list.html
30.  // "def_list": http://packages.python.org/Markdown/extensions/definition_lists.html
31.  // "fenced_code": http://packages.python.org/Markdown/extensions/fenced_code_blocks.html
32.  // "footnotes": http://packages.python.org/Markdown/extensions/footnotes.html
33.  // "tables": http://packages.python.org/Markdown/extensions/tables.html
34.  // "smart_strong": http://packages.python.org/Markdown/extensions/smart_strong.html
35.  // "codehilite": http://packages.python.org/Markdown/extensions/code_hilite.html
36.  // "meta": http://packages.python.org/Markdown/extensions/meta_data.html
37.  // "toc": http://packages.python.org/Markdown/extensions/toc.html
38.  // "nl2br": http://packages.python.org/Markdown/extensions/nl2br.html
39.  // - 3RD PARTY -
40.  // "strikeout": Strikeout extension syntax - `This ~~is deleted text.~~`
41.  // "subscript": Subscript extension syntax - `This is water: H~2~O`
42.  // "superscript": Superscript extension syntax 0 `2^10^ = 1024`
43.  // "smarty" or "smartypants": Python-Markdown extension using smartypants to emit
44.  // typographically nicer ("curly") quotes, proper
45.  // ("em" and "en") dashes, etc.
46.  // See: http://daringfireball.net/projects/smartypants/
47.  // And: https://github.com/waylan/Python-Markdown/blob/master/docs/extensions/smarty.txt
48.  "extensions": ["extra", "codehilite", "toc", "strikeout", "smarty", "subscript", "superscript"]
49.  }
50. }

结合配置文件注释，来一起看下让 OmniMarkupPreviewer 更好用的诸多选项:

1. "server_host": "192.168.1.100",

开启预览服务的 IP 地址, 默认为 localhost.

此处建议设置为本机固定 IP. 其好处在于：从局域网内的任意一台设备均可访问，可多设备同时在线，实现 一处编辑、多端预览 的效果。

你完全可以在 Mac 上编辑 Markdown 文档，而把 iPad 当作外接显示器来实时预览。

实际效果堪称完美，搞得我开始分外怀念已出手的 iPad ~ （；￣ェ￣）

1. "browser_command": ["open", "-a", "Google Chrome", "{url}"],

预览默认为 Safari 浏览器，但一段时间下来发现最好使用 Google Chrome.

1. "html_template_name": "Evolution Yellow",

预览使用的模板名称，默认为 Github.

此处为自定义模版 Evolution Yellow. 所谓模板其实就是非常简单的 CSS + HTML 文件，你可以修改背景、行宽、字体、边距 …… 等等样式相关的所有东西，甚至引入一些花哨的动画效果(你确定要这么做？)。

你可以在内置模板 Github 的基础上进行自定义，其路径为 ${packages}/OmniMarkupPreviewer/public/github.css,${packages}/OmniMarkupPreviewer/templates/github.tpl. 修改完毕后依据注释提示分别放到相关路径即可。

1. "ignored_renderers": ["CreoleRenderer", "PodRenderer", "RDocRenderer", "TextitleRenderer", "LiterateHaskellRenderer"],

忽略/关闭的标记语言渲染器。

如前文介绍，OmniMarkupPreviewer 支持的标记语言非常多，但是笔者接触的种类比较有限，所以此处只开启了 MarkdownRenderer 和 RstRenderer 渲染器。

1. "mathjax_enabled": false,

强大的 JavaScript 引擎, 支持 LaTeX 编辑显示数学公式。

访问 MathJax 查看介绍及使用方法。不过笔者暂用不到这么高级的功能，所以此处禁用掉。

1. "renderer_options-MarkdownRenderer": {
2.  "extensions": ["extra", "codehilite", "toc", "strikeout", "smarty", "subscript", "superscript"]
3.  }

Markdown 渲染扩展选项。

对比某些功能缺失的 Markdown 编辑器就知道 OmniMarkupPreviewer 的强大之处，简单说下：

• attr_list: 定义 HTML 标签属性 3

  语法：{#someid .someclass somekey='some value' }

  基本用途是实现篇幅较长的文档内的随意跳转。如果你网上查过相关资料的话，会发现搜索结果中的实现方式比较繁琐和 dirty.

  开启 attr_list 支持后，实现语法非常简洁：

  1. ### 想要跳转到这里？ {#jumpid}
  3. 从页面的任何地方跳转到 [以上位置](#jumpid "跳转到'想要跳转到这里？'")

• footnotes: 文档脚注 4

  本文就使用了一些脚注来标记参考文档的网址。

  语法：

  1. Footnotes[^1] have a label and content.
  3. [^1]: This is a footnote content.

• codehilite: 代码块语法高亮支持 5

  需要 Pygments 库，支持300种语言及其它文本格式的语法高亮，并可以方便地自定义代码高亮样式。

  如果之前没安装过 Pygments 的话，打开终端输入 pip install pygments 即可。

• toc: 文档目录 6

  文章开头自动生成文档目录，并附带跳转链接。对了解长篇文章结构和快速跳转有较大帮助。

  语法： Markdown 文档相应位置输入 [TOC] 即可。

• 其它：

  strikeout 删除线 - This is deleted text.

  superscript 上标 - 2^10^ = 1024

  subscript: 下标 - This is water: H~2~O

  ……

参考至:http://blog.leanote.com/post/54bfa17b8404f03097000000

如有错误，欢迎指正

邮箱:[e-mail]