GitHub Atom creates its own syntax highlighting

Using Atom for some time, some plugins are not very mature. For example, the use of protobuf in the project, long ago someone wrote the syntax highlighting (HTTPS://GITHUB.COM/PODGIB/ATOM-PROTOBUF), but the effect is not very good. So I decided to write a.

Atom Linux Configuration directory under ~/.atom, there is a packages directory, all installed plug-ins (or called packages) are here. All packages here will be loaded automatically at startup. Therefore, we create a package here directly.

CD. atom/packagesmkdir language-protobuf
CD Language-protobuf

Atom's packages have specific directory structures and files. First, you need to have a package.json to describe your package and create it in the Language-protobuf directory.

{  "name": "Language-proto",  "version": "0.2.0",  "description": "Syntax highlighting for Google Protobuf",  "repository": "Https://github.com/changnet/language-protobuf",  "license": "MIT",  "engines": {    " Atom ":" * ",    " node ":" * "  }}

Of these, name (package name), version (s), description (description) are all needed. If you are ready to release this package repository (source) These are also needed. You can refer to other people's how to write on GitHub.

An empty package has now been created. To implement syntax highlighting, there are some syntax rules to specify how to highlight. The following begins the creation of a grammar rule.

mkdir GRAMMARSCD Grammars

Then create a grammar rule file in the grammars directory Protobuf.cson (Atom's configuration file is saved with Cson)

' ScopeName ': ' source.protobuf ' name ': ' Protobuf ' filetypes ': [' proto '] ' patterns ': [  {    ' match ': ' \\b[0-9]+\\ B '    name ': ' Constant.numeric.protobuf '  }]

The above is a simple grammar rule file.

ScopeName refers to the scope of the file, which is equivalent to namespace in C + +. For example, you write a C syntax highlighting (SOURCE.C), and then to write a C + + syntax highlighting, you can directly in the C + + syntax file ' include ': ' source.c ' can be included in the C syntax rules.

Name is the name of the grammar, and C is C,java is java. Atom usually displays it in the lower-right corner of the status bar.

FileTypes is a file suffix. Atom opens with a file suffix that determines which syntax is highlighted. Multiple file suffixes can be separated by lines. Such as

' FileTypes ': [' h ' hpp ' CPP ']

Patterns is a collection of rule matches, which is an array, and each element is an object {}.

In the example above, the contents of the object are as follows:

Match is a regular expression (in Cson the literal character is added a \, as \b becomes \\b), indicating how to match to the highlighted target. such as \\b[0-9]+\\b is used to match constants. For example "required int32 id = 1;" 1 in

Name is the highlighted name, and Constant.numeric.protobuf indicates that the matching character is highlighted with the numeric (number) rule (what font, color) under constant (constant).

A simple package is explained. But how does constant.numeric.protobuf specify the highlighting rules. This has to start with the atom theme. The atom theme is divided into UI and syntax. UI is the interface (like tags, status bar ...) Relevant, independent of syntax. The syntax theme is the control code highlighting, specified in the settings. I am using the Monokai theme, and I can see that there is a index.less file (https://github.com/burntime/atom-monokai/blob/master/index.less) in it. The highlight rules for most structures are specified. Like what:

. Comment {  color: #75715E;}. string {  color: #E6DB74;}. constant.numeric {  color: #AE81FF;}

This specifies the color of the comment (note), String (String), Constant.number (the number under the constant classification). And in the name of Constant.numeric.protobuf, look up from top to bottom. Find constant first, then to Numberic, found Protobuf did not find, so the use of constant.numeric color. So, if you want to know what color categories are available in the topic.

The ins and outs are understood, let's add more rules below.

  {    ' match ': ' \\b (message|enum|service) \\b '    name ': ' Storage.type.custom.protobuf '  }  {    ' match ' : ' \\b (rpc|returns) \\b '    name ': ' Keyword.protobuf '  }  {    ' match ': ' \\b[0-9]+\\b '    ' name ': ' Constant.numeric.protobuf '  }  {    ' match ': ' \\b (required|optional|repeated) \\b '    name ': ' Storage.modifier.protobuf '  }  {    ' captures ':      ' 1 ': '        name ': ' Storage.modifier.protobuf '      ' 2 ': '        name ': ' Entity.name.instance.protobuf '    match ': ' \\b (required|optional|repeated) (\\s+\\w+) \\b '    name ': ' Entity.name.instance.protobuf '  }

Take a closer look at the last rule above, unlike any other.

Captures represents multiple rules to match. The first one is storage.modifier.protobuf and the other is entity.name.instance.protobuf. But there is only one regular expression, ah, how to match multiple? Look closely at the regular expression and you will find that there are two of parentheses. (required|optional|repeated) matches the first one, (\\s+\\w+) matches the second one. In this way, "required info info = 1;" The required in is highlighted by the first rule, and info is highlighted by the second rule. and its own name ENTITY.NAME.INSTANCE.PROTOBUF does not specify syntax highlighting, arbitrary writing can be. (PS: This rule is my derivation test, not found the official document description)

Then inheritance adds additional rules:

  {    ' begin ': ' ' '    begincaptures ':      ' 0 ': '        name ': ' Punctuation.definition.string.begin.protobuf '    ' End ': ' ' '    endcaptures ':      ' 0 ': '        name ': ' punctuation.definition.string.end.protobuf '    name ': ' String.quoted.double.protobuf '    patterns ': [      {        ' include ': ' Punctuation.definition.string.begin.protobuf '      }      {        ' include ': ' Punctuation.definition.string.end.protobuf '      }      {        ' match ': ' \\\\. '        Name ': ' Constant.character.escape.protobuf '      }    ]  }

This is a very complicated rule, even I do not see very clearly. This is a rule that matches a string. Begin means that the string begins with "Begincaptures" to indicate that the start string is to match more than one rule (in case the start string is complex), where name also represents the highlight rule. End indicates that the string is "ended, endcaptures corresponds." String.quoted ... Indicates that highlighting is highlighted as a string rule, which is used if the corresponding highlighting rule is not found for a part of the entire rule, such as the first name. Patterns indicates that the string contains multiple matching rules, and that a line is matched within the string. Like ' \\\\. ' Indicates that the regular matches a \ and a character other than \ r \ n (that is, the dot in the regular), that is, the matching string, \ t, and so on. Include indicates that the string contains other out-of-the-box highlighting rules, but unfortunately I did not test successfully. Only write the full match is OK.

So far, all the matching rules have been introduced. If there is a place you want to highlight and not highlight, do more work on the regular expression. Another good way is to look at how the highlights of other languages are now done.

Finish writing, of course, also to debug. Here are a few debugging points:

The grammar file is loaded when you open atom, and you change it to see the effect. One way is to restart Atom, another way is to ctrl+shift+p, input Widown:reload reload, corresponding shortcut key is Ctrl+alt+r

Put the mouse at the end of the highlighted character, then ctrl+shift+p, enter Editor:log curso Scope,atom will display the current highlight information in the upper right corner.

Atom itself is a web editor based on the WebKit kernel. You can open the Web debugging interface in View-->devloper-->toggle developer tools. For the web, this should be easy.

After commissioning, it is time to say the release. Atom was developed by GitHub and its packages are on GitHub (and may not be needed, but I do use GitHub's password when I publish). So the current start of the package to create a source on GitHub, test well, the latest code to submit. It then enters the root directory of the package from CMD and publishes it using the Atom's own APM.

APM Publish Minor

The first time, to register the Atom Development Account (can be directly linked with the GitHub account), and then get the account of the development key to bind

Then republish:

If there is no problem, you can search and install it on the Atom's setup screen after the publication is successful.

The final effect of proto syntax highlighting is as follows:

Search for Language-proto in atom to search for this package.

Reference:

http://blog.gaku.net/create-a-custom-syntax-highlighting-with-atom-editor/

Http://stackoverflow.com/questions/23963733/syntax-highlighting-guide-for-atom

Http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/reference/syntaxdefs.html

GitHub Atom creates its own syntax highlighting