ST 4083 Markdown headings beautifying

my_color_scheme.sublime-color-scheme

// ...
// You would have to either define what variables "Red", "Organge", ... are
// or change them into your interested colors.

    "rules": [
        {
            "name": "Markdown - heading 1",
            "background": "color(var(Red) alpha(0.2))",
            "foreground": "var(Red)",
            "scope": "markup.heading.1.markdown",
        },
        {
            "name": "Markdown - heading 2",
            "background": "color(var(Orange) alpha(0.2))",
            "foreground": "var(Orange)",
            "scope": "markup.heading.2.markdown",
        },
        {
            "name": "Markdown - heading 3",
            "background": "color(var(Yellow) alpha(0.2))",
            "foreground": "var(Yellow)",
            "scope": "markup.heading.3.markdown",
        },
        {
            "name": "Markdown - heading 4",
            "background": "color(var(Green) alpha(0.2))",
            "foreground": "var(Green)",
            "scope": "markup.heading.4.markdown",
        },
        {
            "name": "Markdown - heading 5",
            "background": "color(var(Cyan) alpha(0.2))",
            "foreground": "var(Cyan)",
            "scope": "markup.heading.5.markdown",
        },
        {
            "name": "Markdown - heading 6",
            "background": "color(var(Purple) alpha(0.2))",
            "foreground": "var(Purple)",
            "scope": "markup.heading.6.markdown",
        },
    ],

// ...

Symbol List - Heading.tmPreferences

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
    <key>scope</key>
    <string>text.html.markdown markup.heading - meta.whitespace.newline.markdown</string>
    <key>settings</key>
    <dict>
        <key>showInSymbolList</key>
        <integer>1</integer>
        <key>symbolTransformation</key>
        <string><![CDATA[
        # -------------- #
        # pre-processing #
        # -------------- #
        # strip trailing spaces and "#"s
        s/[\s#]+$//g;
        # strip leading spaces and spaces right after "#"
        s/^\s*(#+)\s*/$1 /;

        # now, we have something like "### HEADING 3"
        # let's replace "#"s into its indent level number
        s/^#{6}/　　　　　⑥/g;
        s/^#{5}/　　　　⑤/g;
        s/^#{4}/　　　④/g;
        s/^#{3}/　　③/g;
        s/^#{2}/　②/g;
        s/^#{1}/①/g;

        # --------------- #
        # post-processing #
        # --------------- #
        # handle image (only left the alt attribute)
        s/!\[([^\]]*)\]\([^\)]*\)/$1/g;
        # handle hyperlink (only left the text)
        s/\[([^\]]*)\]\([^\)]*\)/$1/g;
        ]]></string>
    </dict>
</dict>
</plist>