标题: sublime定义不同级别markdown标题颜色

时间: 2013-11-25 21:56:14

正文:

概要

我嘴里的 sublime 就是传说中的 sublime text 3 。这家伙是属于精巧可爱型的, 作为编辑器稍微有些地方欠缺的厉害,当然可以用 python 捣腾自己喜欢的, 也是高度可定制的。在编辑器文本着色方面其实比较弱,不能随便自定义区块文本的颜色, 改变文本颜色基本上只能依靠语法定义: 比如定义为语言的变量、常量、运算符之类的。

        转载请注明出处 http://blog.hickwu.com/posts/308 by Hick

当然在 markdown 里我们没有上面说的语法,但是我们可以自定义语法。摸索的过程中我 并没有完全搞明白 sublime 的语法定义 syntax definition 以及颜色主题 color theme 是怎么运作的,通过不断的 拷贝-修改-调试 摸索出来, 大概总结为先修改两处语法定义, 然后修改对应的语法的颜色。语法定义部分关键是正则匹配,所以可以扩展成自定义 sublime 几乎是任何规则的文本颜色。

定义语法

首先是修改语法定义文件, 我用的是 portal 版的 sublime text 3 , 默认的 markdown 语法 定义文件是在 packages/Markdown.sublime-package 中,这实际是个 zip 压缩包, 用 winrar 等都可以直接打开编辑,方便调试,利用 sublime 的另外一个覆盖机制,直接解压到 Markdown 目录,拷贝到 Data/Packages 下即可调试。具体在其中的 Markdown.tmLanguage 文件定义若干 key (实现方法比较本,标题前导的 # 和文本内容还需要分别处理,没摸索合并法):


<key>headingpre1</key>
<dict>
    <key>begin</key>
    <string>\G(#{1})(?!#)\s*(?=\S)</string>
    <key>captures</key>
    <dict>
        <key>1</key>
        <dict>
            <key>name</key>
            <string>punctuation.definition.heading.markdown</string>
        </dict>
    </dict>
    <key>contentName</key>
    <string>heading1.markdown</string>
    <key>end</key>
    <string>\s*(#*)$\n?</string>
    <key>name</key>
    <string>markup.headingpre1.markdown</string>
    <key>patterns</key>
    <array>
        <dict>
            <key>include</key>
            <string>#inline</string>
        </dict>
    </array>
</dict>
<key>headingpre2</key>
<dict>
    <key>begin</key>
    <string>\G(#{2})(?!#)\s*(?=\S)</string>
    <key>captures</key>
    <dict>
        <key>1</key>
        <dict>
            <key>name</key>
            <string>punctuation.definition.heading.markdown</string>
        </dict>
    </dict>
    <key>contentName</key>
    <string>heading2.markdown</string>
    <key>end</key>
    <string>\s*(#*)$\n?</string>
    <key>name</key>
    <string>markup.headingpre2.markdown</string>
    <key>patterns</key>
    <array>
        <dict>
            <key>include</key>
            <string>#inline</string>
        </dict>
    </array>
</dict>

<key>headingpre3</key>
<dict>
    <key>begin</key>
    <string>\G(#{3})(?!#)\s*(?=\S)</string>
    <key>captures</key>
    <dict>
        <key>1</key>
        <dict>
            <key>name</key>
            <string>punctuation.definition.heading.markdown</string>
        </dict>
    </dict>
    <key>contentName</key>
    <string>heading3.markdown</string>
    <key>end</key>
    <string>\s*(#*)$\n?</string>
    <key>name</key>
    <string>markup.headingpre3.markdown</string>
    <key>patterns</key>
    <array>
        <dict>
            <key>include</key>
            <string>#inline</string>
        </dict>
    </array>
</dict>

<key>headingpre4</key>
<dict>
    <key>begin</key>
    <string>\G(#{4})(?!#)\s*(?=\S)</string>
    <key>captures</key>
    <dict>
        <key>1</key>
        <dict>
            <key>name</key>
            <string>punctuation.definition.heading.markdown</string>
        </dict>
    </dict>
    <key>contentName</key>
    <string>heading4.markdown</string>
    <key>end</key>
    <string>\s*(#*)$\n?</string>
    <key>name</key>
    <string>markup.headingpre4.markdown</string>
    <key>patterns</key>
    <array>
        <dict>
            <key>include</key>
            <string>#inline</string>
        </dict>
    </array>
</dict>

<key>headingpre5</key>
<dict>
    <key>begin</key>
    <string>\G(#{5})(?!#)\s*(?=\S)</string>
    <key>captures</key>
    <dict>
        <key>1</key>
        <dict>
            <key>name</key>
            <string>punctuation.definition.heading.markdown</string>
        </dict>
    </dict>
    <key>contentName</key>
    <string>heading5.markdown</string>
    <key>end</key>
    <string>\s*(#*)$\n?</string>
    <key>name</key>
    <string>markup.headingpre5.markdown</string>
    <key>patterns</key>
    <array>
        <dict>
            <key>include</key>
            <string>#inline</string>
        </dict>
    </array>
</dict>

然后在 patterns 这个 key 下增加类似变量声明的


<dict>
    <key>include</key>
    <string>#headingpre1</string>
</dict>
<dict>
    <key>include</key>
    <string>#headingpre2</string>
</dict>
<dict>
    <key>include</key>
    <string>#headingpre3</string>
</dict>
<dict>
    <key>include</key>
    <string>#headingpre4</string>
</dict>
<dict>
    <key>include</key>
    <string>#headingpre5</string>
</dict>

处理颜色主题

最后是处理 color theme 颜色主题, 我使用的是默认的 Twilight . 类似上面 把 Packages/Color Scheme - Default.sublime-package 解压到 Data/Packages 下, 修改其中的 Twilight.tmTheme 文件,在 setting 这个 key 下增加颜色定义:



<dict>
    <key>name</key>
    <string>Heading1</string>
    <key>scope</key>
    <string>heading1</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#FFFF00</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Markup: headingpre1</string>
    <key>scope</key>
    <string>markup.headingpre1</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#333366</string>
        <key>foreground</key>
        <string>#FFFF00</string>
    </dict>
</dict>


<dict>
    <key>name</key>
    <string>Heading2</string>
    <key>scope</key>
    <string>heading2</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Markup: headingpre2</string>
    <key>scope</key>
    <string>markup.headingpre2</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#333366</string>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Heading3</string>
    <key>scope</key>
    <string>heading3</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#00FF00</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Markup: headingpre3</string>
    <key>scope</key>
    <string>markup.headingpre3</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#333366</string>
        <key>foreground</key>
        <string>#00FF00</string>
    </dict>
</dict>


<dict>
    <key>name</key>
    <string>Heading4</string>
    <key>scope</key>
    <string>heading4</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#FF00FF</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Markup: headingpre4</string>
    <key>scope</key>
    <string>markup.headingpre4</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#333366</string>
        <key>foreground</key>
        <string>#FF00FF</string>
    </dict>
</dict>


<dict>
    <key>name</key>
    <string>Heading5</string>
    <key>scope</key>
    <string>heading5</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#00FFFF</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Markup: headingpre5</string>
    <key>scope</key>
    <string>markup.headingpre5</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#333366</string>
        <key>foreground</key>
        <string>#00FFFF</string>
    </dict>
</dict>

完整的修改后的文件也备份保存到我的百度网盘里, 可以到 这里 下载。

查看更多文章
分享到:


分享到: