Source library of this article: program-in-chinese/quan4-highlighter

Syntax highlighting is a basic function of a development environment. This paper attempts to use the previous "circle 4" language (see details The implementation of "cycle 4" by Antlr4+JavaScript in programming language experiment )Write a highlighted plug-in for demonstration only. Refer to the official document of Visual Studio Code: Add Themes, Snippets and Colorizers to Visual Studio Code . first create the plug-in as follows, and highlight the source file of ". Circle 4":

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Language Support
Enter the URL (http, https) or the file path of the tmLanguage grammar or press ENTER to start with a new grammar.
? URL or file to import, or none for new: 
? What's the name of your extension? Circle 4 highlights
? What's the identifier of your extension? quan4-highlighter
? What's the description of your extension? Circle 4 language VS Code Plug-in unit
? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-extensions)? nobody
Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: quan4
Enter the name of the language. The name will be shown in the VS Code editor mode selector.
? Language name: Circle 4
Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)
? File extensions: .Circle 4
Enter the root scope name of the grammar (e.g. source.ruby)
? Scope names: source.Circle 4
   create quan4-highlighter/syntaxes/quan4.tmLanguage.json
   create quan4-highlighter/.vscode/launch.json
   create quan4-highlighter/package.json
   create quan4-highlighter/README.md
   create quan4-highlighter/CHANGELOG.md
   create quan4-highlighter/vsc-extension-quickstart.md
   create quan4-highlighter/language-configuration.json
   create quan4-highlighter/.vscodeignore
   create quan4-highlighter/.gitignore

Your extension quan4-highlighter has been created!

In the default syntax file syntax / quan4.tmlanguage.json, the pattern matching of keywords is:

"match": "\\b(if|while|for|return)\\b"

Directly change to:

"match": "Finding the divisor"

After running the plug-in (F5 runs newly, Command+R can refresh after the plug-in is modified):

Obviously it's the most direct regular expression matching. It's not sure if it can be space sensitive and syntax tested

This is only the first step, and then you need to define the format for the syntax( TextMate Manual & Language Grammars )Conduct in-depth study