有没有办法使用 tmLanguage 语法来扩展 vscode 集成 markdown 扩展语法突出显示？

Question

我正在为 vscode 开发语言扩展。我定义了一个 tmLanguage 文件，一切正常。在悬停功能中，使用 vscode.MarkdownString.appendCodeblock() 可以正确解释降价，并且我的自定义语言的语法突出显示开箱即用，方法如下：

const content = new MarkdownString("", true)
content.appendMarkdown("## Examples: \n")
content.appendCodeblock(examples, "lmps")

其中 examples 包含一些使用我的自定义语言的示例代码，"lmps" 是我的语言标识符。 (Example Image Hover)

我想知道是否有办法在 webview 中实现同样的事情。我成功地在 webview 中显示 content，将 markdownString 编译成 html:

async function set_doc_panel_content(panel: DocPanel | undefined, md_content: vscode.MarkdownString) {
        const html: string = await vscode.commands.executeCommand('markdown.api.render', md_content.value) as string;
        panel!.webview.html = html;
    }

到目前为止一切顺利，但这样一来，markdown 就不知道我的自定义语言，也不做任何语法高亮显示。 (Example image Webview) 现在，我了解到可以通过在激活函数中返回一个对象来贡献一个 markdown-it 插件，从而为 Markdown 扩展添加语言支持。

export function activate(context: vscode.ExtensionContext) {

...

    return {
        extendMarkdownIt(md: any) {
          return md.use(require('markdown-it-emoji'));
        }
}

但是，如果我没看错的话，这实际上需要开发一个专用的 markdown-it 插件。我想知道是否有更简单的方法将我的语言集成到 markdown api。因为 vscode 显然已经可以在悬停和完成建议中本地完成。我可以以某种方式在 webview 中使用此功能吗？或者，有没有一种方法可以从 tmLanguage 文件生成 markdown-it 插件，而无需深入学习 markdown-it 插件开发？也许有人指出了完成此类事情的项目？

Answer 1

对于遇到同样问题的人：似乎没有 super-easy 方法。我找到的 easiest-to-use 包是 highlights. However, this package (and others like first-mate) depend on the native module Oniguruma。该包需要针对特定版本的 Electron 进行编译。这使得向市场发布 vscode 扩展非常困难，因为 vscode 不允许运行在包安装中进行此编译。

我找到的一个解决方案是为 markdown-it 提供突出显示功能。 .plist 或 .tmLanguage 的语法可以被 vscode-textmate for example. This package can be used with vscode-oniguruma 阅读。这里的技巧是加载 WASM 以使其工作：

const oniguruma = require('vscode-oniguruma')
const oniguruma_root: string = path.join(env.appRoot, 'node_modules.asar', 'vscode-oniguruma')
const wasm = readFileSync(path.join(oniguruma_root, 'release', 'onig.wasm')).buffer;
const on_wasm = oniguruma.loadWASM(wasm);

那么可以这样做：

const registry = new vsctm.Registry({
    onigLib: Promise.resolve({
        createOnigScanner: (sources) => new oniguruma.OnigScanner(sources),
                createOnigString: (str) => new oniguruma.OnigString(str)
            }),
            loadGrammar: () => {
                return readJSON2plist(path.join(context.extensionPath, 'syntaxes', 'lmps.tmLanguage.json'))
            .then(data => {
                return vsctm.parseRawGrammar(data)
            }).catch(null)
    }
});
    
const grammar = await registry.loadGrammar('source.lmps')
    
const md = require('markdown-it')(
    {
        html: true,
        linkify: true,
        typographer: true,
        langPrefix: '',
        highlight: function (str: string, lang: string) {
            if (grammar && lang && lang == 'lmps') {
                return tokenize_lmps(str, grammar)
            }
        }
    });
return md

md 然后可以用来渲染 markdown 内容：

let html = md.render(md_string)

可以找到有效的实现 here

有没有办法使用 tmLanguage 语法来扩展 vscode 集成 markdown 扩展语法突出显示？

Is there a way to use a tmLanguage grammar to extend vscode integrated markdown extensions syntax highlighting?

markdown

visual-studio-code

tmlanguage

vscode-extensions

markdown-it