{"componentChunkName":"component---src-templates-blog-post-js","path":"/posts/sublimehighlight/","result":{"data":{"markdownRemark":{"html":"

To create a new syntax, go to Tools >> Developer >> New Syntax. This creates a .sublime-syntax file which you can use to edit what color the text will show as. Under the \"match:\" key value pair, you use regex to determine which types of text it matches. In the example shown below, I have dates with a newline character highlight as orange. The orange color for the Mariana theme matches the \"scope:\" key value pair of constant.numeric. What I essentially had done was look in the Mariana.sublime-color-scheme file to determine that this scope was an orange color.

\n

Typically, this file is found in Sublime Text 3 >> Packages >> User. On Mac, this is under /Library/Application Support/Sublime Text 3/Packages

\n

To edit the Mariana theme file, on Mac use CMD+Shift+P to open the command palette, type \"View Package File\", and then type in Mariana to edit the file Mariana.sublime-color-scheme.

\n

My file is called Plain text.sublime-syntax

\n
%YAML 1.2\n---\n%YAML 1.2\n---\n# http://www.sublimetext.com/docs/3/syntax.html\nname: Regular Text\nfile_extensions:\n  - txt\nscope: text.plain\ncontexts:\n  main:\n    # Line starting with **\n    - match: '^\\*\\*.*'\n      push:\n        - meta_scope: meta.separator\n        - match: '$\\n?'\n          pop: true\n    # # Highlight Plan\n    # - comment: Plan (case-insensitive)\n    #   match: \\b(?:Plan)\\b\n    #   scope: support.function\n    # Dates\n    - comment: Dates\n      match: '[0-9]{1,2}(/)[0-9]{1,2}(/)[0-9]{1,2}\\n'\n      scope: constant.numeric\n      pop: true\n    # Meeting\n    - comment: Meetings\n      match: '.*Mtg.*\\n'\n      scope: meta.diff\n      pop: true\n    # Feedback\n    - comment: Feedback\n      match: 'Feedback:'\n      scope: variable.member\n      pop: true\n    # Important\n    - comment: Important\n      match: '.*::'\n      scope: support.function\n      pop: true\n    # Finished\n    - comment: Finished\n      match: '.*`'\n      scope: punctuation.section\n      pop: true\n    # Finished comment\n    - comment: Comment after a backtick\n      match: '(?<=`):.*'\n      scope: string\n      pop: true\n    # Todo\n    - comment: To do\n      match: '^[ \\t]*> .*'\n      scope: keyword.operator\n      pop: true\n    # # Update (with . in pink)\n    # - comment: Update\n    #   match: '^[ \\t]*\\. .*\\n'\n    #   scope: meta.diff\n    #   pop: true\n    # Update (with . in yellow)\n    - comment: Update\n      match: '^[ \\t]*\\. .*\\n'\n      scope: markup.bold\n      pop: true\n    \n
\n

Below is my modified Mariana file, which adds additional color variables. You can edit the Mariana.sublime-color-scheme directly in the folder /Library/Application Support/Sublime Text 3/Packages/User

\n
{\n    \"name\": \"Mariana\",\n    \"author\": \"Sublime HQ Pty Ltd, Dmitri Voronianski\",\n    \"variables\":\n    {\n        \"black\": \"hsl(0, 0%, 0%)\",\n        \"blue\": \"hsl(210, 50%, 60%)\",\n        \"blue-vibrant\": \"hsl(210, 60%, 60%)\",\n        \"blue2\": \"hsla(210, 13%, 40%, 0.7)\",\n        \"blue3\": \"hsl(210, 15%, 22%)\",\n        \"blue4\": \"hsl(210, 13%, 45%)\",\n        \"blue5\": \"hsl(180, 36%, 54%)\",\n        \"blue6\": \"hsl(221, 12%, 69%)\",\n        \"green\": \"hsl(114, 31%, 75%)\",\n        \"greengray\": \"hsl(114, 25%, 45%)\",\n        \"grey\": \"hsl(0, 0%, 20%)\",\n        \"orange\": \"hsl(32, 93%, 66%)\",\n        \"orange2\": \"hsl(32, 85%, 55%)\",\n        \"orange3\": \"hsl(40, 94%, 68%)\",\n        \"pink\": \"hsl(312, 96%, 68%)\",\n        \"red\": \"hsl(357, 79%, 65%)\",\n        \"red2\": \"hsl(13, 99%, 65%)\",\n        \"white\": \"hsl(0, 0%, 100%)\",\n        \"white2\": \"hsl(0, 0%, 97%)\",\n        \"white3\": \"hsl(219, 28%, 88%)\",\n        \"yellow\": \"hsl(58, 100%, 72%)\"\n    },\n    \"globals\":\n    {\n        \"foreground\": \"var(white3)\",\n        \"background\": \"var(blue3)\",\n        \"accent\": \"var(blue-vibrant)\",\n        \"caret\": \"var(orange)\",\n        \"line_highlight\": \"var(blue2)\",\n        \"selection\": \"var(blue2)\",\n        \"selection_border\": \"var(blue4)\",\n        \"inactive_selection\": \"var(blue2)\",\n        \"misspelling\": \"var(red)\",\n        \"shadow\": \"color(var(black) alpha(0.25))\",\n        \"active_guide\": \"var(blue5)\",\n        \"stack_guide\": \"color(var(blue5) alpha(0.5))\",\n        \"highlight\": \"var(blue5)\",\n        \"find_highlight_foreground\": \"var(grey)\",\n        \"find_highlight\": \"var(orange3)\",\n        \"brackets_options\": \"underline\",\n        \"brackets_foreground\": \"var(orange)\",\n        \"bracket_contents_options\": \"underline\",\n        \"bracket_contents_foreground\": \"var(blue5)\",\n        \"tags_options\": \"stippled_underline\",\n        \"tags_foreground\": \"var(pink)\"\n    },\n    \"rules\":\n    [\n        {\n            \"name\": \"Comment\",\n            \"scope\": \"comment, punctuation.definition.comment\",\n            \"foreground\": \"var(blue6)\"\n        },\n        {\n            \"name\": \"String\",\n            \"scope\": \"string\",\n            \"foreground\": \"var(green)\"\n        },\n        {\n            \"name\": \"Punctuation\",\n            \"scope\": \"punctuation.definition - punctuation.definition.numeric.base\",\n            \"foreground\": \"var(blue5)\"\n        },\n        {\n            \"name\": \"Number\",\n            \"scope\": \"constant.numeric\",\n            \"foreground\": \"var(orange)\",\n            \"background\": \"var(blue4)\"\n        },\n        {\n            \"name\": \"Number Suffix\",\n            \"scope\": \"storage.type.numeric\",\n            \"foreground\": \"var(pink)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"Built-in constant\",\n            \"scope\": \"constant.language\",\n            \"foreground\": \"var(red)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"User-defined constant\",\n            \"scope\": \"constant.character, constant.other\",\n            \"foreground\": \"var(pink)\"\n        },\n        {\n            \"name\": \"Member Variable\",\n            \"scope\": \"variable.member\",\n            \"foreground\": \"var(red)\"\n        },\n        {\n            \"name\": \"Keyword\",\n            \"scope\": \"keyword - keyword.operator, keyword.operator.word\",\n            \"foreground\": \"var(pink)\"\n        },\n        {\n            \"name\": \"Operators\",\n            \"scope\": \"keyword.operator\",\n            \"foreground\": \"var(red2)\"\n        },\n        {\n            \"name\": \"Punctuation\",\n            \"scope\": \"punctuation.separator, punctuation.terminator\",\n            \"foreground\": \"var(yellow)\"\n        },\n        {\n            \"name\": \"Punctuation\",\n            \"scope\": \"punctuation.section\",\n            \"foreground\": \"var(greengray)\"\n        },\n        {\n            \"name\": \"Accessor\",\n            \"scope\": \"punctuation.accessor\",\n            \"foreground\": \"var(blue6)\"\n        },\n        {\n            \"name\": \"Annotation Punctuation\",\n            \"scope\": \"punctuation.definition.annotation\",\n            \"foreground\": \"var(blue5)\"\n        },\n        {\n            \"name\": \"JavaScript Dollar\",\n            \"scope\": \"variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js\",\n            \"foreground\": \"var(blue5)\"\n        },\n        {\n            \"name\": \"Storage\",\n            \"scope\": \"storage\",\n            \"foreground\": \"var(red)\"\n        },\n        {\n            \"name\": \"Storage type\",\n            \"scope\": \"storage.type\",\n            \"foreground\": \"var(pink)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"Entity name\",\n            \"scope\": \"entity.name.function\",\n            \"foreground\": \"var(blue5)\"\n        },\n        {\n            \"name\": \"Entity name\",\n            \"scope\": \"entity.name - (entity.name.section | entity.name.tag | entity.name.label)\",\n            \"foreground\": \"var(orange)\"\n        },\n        {\n            \"name\": \"Inherited class\",\n            \"scope\": \"entity.other.inherited-class\",\n            \"foreground\": \"var(blue5)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"Function argument\",\n            \"scope\": \"variable.parameter\",\n            \"foreground\": \"var(orange)\"\n        },\n        {\n            \"name\": \"Language variable\",\n            \"scope\": \"variable.language\",\n            \"foreground\": \"var(red)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"Tag name\",\n            \"scope\": \"entity.name.tag\",\n            \"foreground\": \"var(red)\"\n        },\n        {\n            \"name\": \"Tag attribute\",\n            \"scope\": \"entity.other.attribute-name\",\n            \"foreground\": \"var(pink)\"\n        },\n        {\n            \"name\": \"Function call\",\n            \"scope\": \"variable.function, variable.annotation\",\n            \"foreground\": \"var(blue)\"\n        },\n        {\n            \"name\": \"Library function\",\n            \"scope\": \"support.function, support.macro\",\n            \"foreground\": \"var(blue)\",\n            \"font_style\": \"bold italic\"\n        },\n        {\n            \"name\": \"Library constant\",\n            \"scope\": \"support.constant\",\n            \"foreground\": \"var(pink)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"Library class/type\",\n            \"scope\": \"support.type, support.class\",\n            \"foreground\": \"var(blue)\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"Invalid\",\n            \"scope\": \"invalid\",\n            \"foreground\": \"var(white2)\",\n            \"background\": \"var(red)\"\n        },\n        {\n            \"name\": \"Invalid deprecated\",\n            \"scope\": \"invalid.deprecated\",\n            \"foreground\": \"var(white2)\",\n            \"background\": \"var(orange2)\"\n        },\n        {\n            \"name\": \"YAML Key\",\n            \"scope\": \"entity.name.tag.yaml\",\n            \"foreground\": \"var(blue5)\"\n        },\n        {\n            \"name\": \"YAML String\",\n            \"scope\": \"source.yaml string.unquoted\",\n            \"foreground\": \"var(white3)\"\n        },\n        {\n            \"name\": \"markup headings\",\n            \"scope\": \"markup.heading\",\n            \"font_style\": \"bold\"\n        },\n        {\n            \"name\": \"markup headings\",\n            \"scope\": \"markup.heading punctuation.definition.heading\",\n            \"foreground\": \"var(red2)\"\n        },\n        {\n            \"name\": \"markup h1\",\n            \"scope\": \"markup.heading.1 punctuation.definition.heading\",\n            \"foreground\": \"var(red)\"\n        },\n        {\n            \"name\": \"markup links\",\n            \"scope\": \"string.other.link, markup.underline.link\",\n            \"foreground\": \"var(blue)\"\n        },\n        {\n            \"name\": \"markup bold\",\n            \"scope\": \"markup.bold\",\n            \"foreground\": \"var(yellow)\",\n        },\n        {\n            \"name\": \"markup italic\",\n            \"scope\": \"markup.italic\",\n            \"font_style\": \"italic\"\n        },\n        {\n            \"name\": \"markup underline\",\n            \"scope\": \"markup.underline\",\n            \"font_style\": \"underline\"\n        },\n        {\n            \"name\": \"markup bold/italic\",\n            \"scope\": \"markup.italic markup.bold | markup.bold markup.italic\",\n            \"font_style\": \"bold italic\"\n        },\n        {\n            \"name\": \"markup bold/underline\",\n            \"scope\": \"markup.underline markup.bold | markup.bold markup.underline\",\n            \"font_style\": \"bold underline\"\n        },\n        {\n            \"name\": \"markup italic/underline\",\n            \"scope\": \"markup.underline markup.italic | markup.italic markup.underline\",\n            \"font_style\": \"italic underline\"\n        },\n        {\n            \"name\": \"markup bold/italic/underline\",\n            \"scope\": \"markup.bold markup.italic markup.underline | markup.bold markup.underline markup.italic | markup.italic markup.bold markup.underline | markup.italic markup.underline markup.bold | markup.underline markup.bold markup.italic | markup.underline markup.italic markup.bold\",\n            \"font_style\": \"bold italic underline\"\n        },\n        {\n            \"name\": \"markup hr\",\n            \"scope\": \"punctuation.definition.thematic-break\",\n            \"foreground\": \"var(orange)\"\n        },\n        {\n            \"name\": \"markup numbered list bullet\",\n            \"scope\": \"markup.list.numbered.bullet\",\n            \"foreground\": \"var(green)\",\n            \"font_style\": \"bold\"\n        },\n        {\n            \"name\": \"markup blockquote\",\n            \"scope\": \"markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item\",\n            \"foreground\": \"var(orange)\"\n        },\n        {\n            \"name\": \"markup code\",\n            \"scope\": \"markup.raw\",\n            \"background\": \"color(var(blue2) alpha(0.38))\"\n        },\n        {\n            \"name\": \"markup code\",\n            \"scope\": \"markup.raw.inline\",\n            \"background\": \"color(var(blue2) alpha(0.5))\"\n        },\n        {\n            \"name\": \"markup punctuation\",\n            \"scope\": \"(text punctuation.definition.italic | text punctuation.definition.bold)\",\n            \"foreground\": \"var(pink)\"\n        },\n        {\n            \"name\": \"diff.header\",\n            \"scope\": \"meta.diff, meta.diff.header\",\n            \"foreground\": \"var(pink)\",\n            \"font_style\": \"bold underline\"\n        },\n        {\n            \"name\": \"diff.deleted\",\n            \"scope\": \"markup.deleted\",\n            \"foreground\": \"var(red)\"\n        },\n        {\n            \"name\": \"diff.inserted\",\n            \"scope\": \"markup.inserted\",\n            \"foreground\": \"var(green)\"\n        },\n        {\n            \"name\": \"diff.changed\",\n            \"scope\": \"markup.changed\",\n            \"foreground\": \"var(orange)\"\n        },\n        {\n            \"name\": \"CSS Properties\",\n            \"scope\": \"support.type.property-name\",\n            \"foreground\": \"var(white3)\"\n        },\n        {\n            \"scope\": \"constant.numeric.line-number.match\",\n            \"foreground\": \"var(red)\"\n        },\n        {\n            \"scope\": \"message.error\",\n            \"foreground\": \"var(red)\"\n        },\n\n        {\n            \"scope\": \"diff.deleted\",\n            \"background\": \"hsla(357, 45%, 60%, 0.15)\",\n            \"foreground_adjust\": \"l(+ 5%)\"\n        },\n        {\n            \"scope\": \"diff.deleted.char\",\n            \"background\": \"hsla(357, 60%, 60%, 0.30)\",\n            \"foreground_adjust\": \"l(+ 10%)\"\n        },\n        {\n            \"scope\": \"diff.inserted\",\n            \"background\": \"hsla(180, 45%, 60%, 0.15)\",\n            \"foreground_adjust\": \"l(+ 5%)\"\n        },\n        {\n            \"scope\": \"diff.inserted.char\",\n            \"background\": \"hsla(180, 60%, 60%, 0.30)\",\n            \"foreground_adjust\": \"l(+ 10%)\"\n        },\n    ]\n}\n
\n

Results:\n\"sublime_pic\"

","frontmatter":{"title":"How to make a Syntax highlighted Notepad with Sublime"}}},"pageContext":{"slug":"/posts/sublimehighlight/"}},"staticQueryHashes":["3649515864"]}