`

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

如有错误，欢迎指正

邮箱:czmcj@163.com

分享到：
| Oracle ALTER PROFILE语法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics