扩展 VSCode Markdown 语法突出显示以匹配嵌套的 Javascript 代码

Question

我正在尝试扩展 VSCode 的 Markdown 语法荧光笔，以突出显示一些嵌套在自定义语法中的 Javascript。比如下面的Markdown文件

# Example

@@$ var value = 10;

The result is @@{value}.

将转换为

# Example

The result is 10.

我希望在 VSCode 中将以下内容突出显示为 Javascript，就好像它们被包裹在一个围栏代码块中一样：

以@@$开头的一行的内容。
@@{和}之间的内容。

我尝试修改 markdown.tmLanguage.json 以添加这些：

"fenced_code_block_majsdown2": {
    "begin": "(^|\G)(@@$)",
    "name": "markup.fenced_code.block.markdown",
    "end": "(^|\G)(\r\n|\r|\n)\s*$",
    "patterns": [{ "include": "source.js" }]
},
"fenced_code_block_majsdown": {
    "begin": "(^|\G)(@@{)",
    "name": "markup.fenced_code.block.markdown",
    "end": "(^|\G)(})\s*$",
    "patterns": [{ "include": "source.js" }]
},

代码正确突出显示，但似乎忽略了 "end" 位，我不明白为什么 - 从 @@$ 或 @@{ 开始，整个文档突出显示为 Javascript。我尝试了几种正则表达式的组合，并尝试删除初始部分（(^|\G)），但我无法弄清楚为什么荧光笔如此贪婪。

我怎样才能达到我想要的目标？

Answer 1

我最终以这种方式解决了问题：

{
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "name": "Majsdown",
    "patterns": [
        {
            "include": "#majsdown_inject_expression"
        },
        {
            "include": "#majsdown_execute_statement"
        },
        {
            "include": "text.html.markdown"
        }
    ],
    "repository": {
        "majsdown_inject_expression": {
            "begin": "(.*?)(@@\{)",
            "name": "test",
            "end": "(\})",
            "beginCaptures": {
                "2": {
                    "name": "keyword.control.majsdown"
                }
            },
            "endCaptures": {
                "1": {
                    "name": "keyword.control.majsdown"
                }
            },
            "patterns": [
                {
                    "include": "source.js"
                }
            ]
        },
        "majsdown_execute_statement": {
            "begin": "(.*?)(@@\$)",
            "name": "test",
            "end": "(\r\n|\r|\n)",
            "beginCaptures": {
                "2": {
                    "name": "keyword.control.majsdown"
                }
            },
            "patterns": [
                {
                    "include": "source.js"
                }
            ]
        }
    },
    "scopeName": "source.majsdown"
}

扩展 VSCode Markdown 语法突出显示以匹配嵌套的 Javascript 代码

Extending VSCode Markdown syntax highlighting to match nested Javascript code

javascript

regex

visual-studio-code

vscode-extensions

textmate