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中实现相同的目的。我成功在网络视图中显示了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显然可以在悬停和完成建议中本地完成。我可以在网络视图中以某种方式使用此功能吗？或者，是否有一种方法可以从tmLanguage文件生成markdown-it插件，而不必深入学习markdown-it插件开发？也许有人指向完成了此类操作的项目？

Answer 1

对于有相同问题的任何人：似乎没有超级容易的方法。我找到的最容易使用的软件包是highlights。但是，此程序包（以及其他类似首选项的程序包）取决于本机模块Oniguruma。该软件包需要针对特定版本的Electron进行编译。这使得很难将vscode扩展发布到市场，因为vscode不允许在软件包安装中运行此编译。

我发现的一个解决方案是为markdown-it提供突出显示功能。例如，{。{3}}可以读取.plist或.tmLanguage语法。该软件包可与vscode-textmate一起使用。这里的窍门是加载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然后可用于呈现降价内容：

let html = md.render(md_string)

可以找到有效的实现vscode-oniguruma

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

1 个答案: