Markdown Preview 目录 MathJax 代码高亮

背景

近期 Sublime Text Markdown Preview 更新后,原来能用的功能现在不能用了。自己用到的有[TOC]自动生成目录, MathJax 插入公式,都没有了效果。

调查发现,现在的 Markdown Preview 插件维护在 facelessuser/MarkdownPreview ,底层实现改用了两种方式:本地的 Python-Markdown/markdown ,以及在线的 Github Markdown API

因此,比如 Stack Overflow 上这个打开 MathJax 支持的回答其实已经过时了。

新的设置方法参见官方文档,这里简单介绍一下即开即用的日常使用。

添加和设置插件

官方提供了完整用法,主要步骤如下:

  1. 通过 Preferences -> Package Settings -> Markdown Preview -> Settings 打开配置文件。

  2. User 部分添加

     "markdown_extensions": [
         ext1, ext2, ...
     ],
    

    其中 ext1ext2 要么是一个字符串,要么是一个字典。
    比如默认设置的一段:

     "markdown_extensions": [
         "markdown.extensions.abbr",
         {
             "markdown.extensions.codehilite": {
                 "guess_lang": false
             }
         }
     ]
    

    同 Sublime 其他插件的设置方法一样,如果没有指明,使用的是默认值,如果指明了,进行 override 。但注意,这些插件并非默认开启,而设置是默认存在的。
    还有一种作者没有明确指出,但是在示例中出现,而且更加简洁高效的写法,那就是直接写成一个字典:

     "markdown_extensions": {
         "pymdownx.arithmatex": {},
         "markdown.extensions.toc": {},
         "markdown.extensions.codehilite": {
             "guess_lang": true
         },
     },
    

    注意到使用默认选项的字典留空。
    Python-Markdown 官方支持且默认安装的插件列表在这里
    特别地,这个插件的作者自己建了另一个仓库 facelessuser/pymdown-extensions 放了一大堆使用接口编写的插件,都和 Markdown Preview 一起默认安装了。
    因此,设置开启就能使用的插件是两个的并集。

  3. 添加额外需要使用的 js 、 css 方法如下:

     "css": ["default"],
     "js": [...]
    

目录支持

原有版本默认开启这一功能,更新后需要手动开启。使用官方提供的插件,只需要添加

"markdown_extensions": {
    "markdown.extensions.toc": {}
},

在需要使用的地方插入 [TOC] 即可生成目录。

MathJax 支持

根据上面的方法,我们为 Markdown Preview 添加 MathJax 支持。

与上面的插件不同,这个插件是 pymdownx 提供的,因此添加到字典中:

"markdown_extensions": {
    "pymdownx.arithmatex": {},
    "markdown.extensions.toc": {},
},

如果使用 MathJax ,需要提供 js 文件的 URL , 因此在扩展列表前添加:

"js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
    "res://MarkdownPreview/js/math_config.js"
],

这里可以查到可用的选项

代码高亮支持

这里使用的是官方扩展 CodeHilite ,底层使用 Pygments 进行多语言的代码高亮。将其添加到扩展字典中:

"markdown_extensions": {
    "pymdownx.arithmatex": {},
    "markdown.extensions.toc": {},
    "markdown.extensions.codehilite": {
        "guess_lang": true
    },
},

其中,guess_lang 如果为真,则会自动推测语言,如果为假,则只有指定时才进行高亮。

顺便简单介绍一下 Pygments 语法规则:

在 Code Block 前,如果有……

  1. Sheang with path ,比如 #!/usr/bin/python,则会保留该行,并设置语言为 Python 。
  2. Shebang without path ,比如 #!python ,则会删除该行,并设置语言为 Python 。
  3. 三个或以上冒号, Three or more colons ,比如 :::python ,则会删除该行,并设置语言为 Python 。

在第三种情况下,还可以进行行高亮等 CSS 中定义的操作。比如 :::python hl_lines="1 3" 会将第 1 、 3 行代码高亮。

注意

使用 CodeHilite 会造成 preview/build 的行为改变。

Markdown 规范中,缩进标志代码块(code block),对应 HTML 的 <pre> 标签;反引号(back quote)标志行内代码(inline code 或 inline code span),对应 HTML 的 <code> 标签。

当行内代码希望使用反引号时,可以使用两或三个引号作为开始和结束的标志。

按照规范,<code> 内的换行和空格不应被保留,而 <pre> 则完全保留样式。因此,使用缩进表示代码块是更加规范的用法。然而有些平台不加以区分,使用三个反引号也可以作为代码块标志(比如简书),因此,也就有了两种表示的说法。

不开启 CodeHilite 前, Markdown Preview 会将三个反引号编译成为代码块,开启后,变成普通文本。因此,使用高亮时,应配合使用缩进表示法。

总结

通过以上三个例子,本文展示了 Sublime Text Markdown Preview 插件中添加和配置扩展的方式。虽然相比以前默认开启,或者改动一个选项就能开启麻烦了一点,但使用统一的 Python Markdown API 可以很方便的添加第三方功能。对于已有功能的行为也可以实现精细的控制。总的来说还是不错的。

此外,查找资料时应检查日期,现在 Google 搜索 sublime markdown preview mathjax ,排名第一的还是那个过时的 Stack Overflow 回答。这种事情,还是自己查文档比较靠谱。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容