VSCode扩展开发：Python注释悬停显示LaTeX公式遇样式问题

我要开发一款简单的VSCode扩展，实现鼠标悬停在Python注释上时，显示其中用LaTeX编写的数学函数。示例如下：

# $y = x^2$
y = x ** 2

虽然vscode.Hover支持Markdown，但不支持LaTeX。我发现vscode.MarkdownString部分支持HTML，于是尝试用markdown-it-katex渲染，已经能生成内容，但不知道怎么添加KaTeX样式表，当前渲染效果不符合预期。我几乎没有TypeScript开发经验，现有代码如下，希望找到简单的解决方法：

import * as markdownIt from 'markdown-it';
const markdownItKatex = require('markdown-it-katex');
const md = markdownIt({ html: true }).use(markdownItKatex);

vscode.languages.registerHoverProvider("python", {
    provideHover(document, position, token) {
        var text = document.lineAt(position).text;

        // 判断是否是Python注释，是则返回渲染内容，否则返回null
        if (text.startsWith('#')) {
            // 移除注释符号
            text = text.slice(1);

            // 用markdown-it-katex格式化内容
            const html = md.render(text);

            const contents = new vscode.MarkdownString(html);
            contents.isTrusted = true;
            contents.supportHtml = true;

            return new vscode.Hover(contents);
        }

        return null;
    }
});

核心思路是在渲染后的HTML中内嵌KaTeX的基础样式，VSCode允许MarkdownString加载可信的内联CSS，不需要额外引入外部文件，直接把必要的样式写在<style>标签里拼接到渲染结果前即可。

修改后的代码： #

import * as markdownIt from 'markdown-it';
const markdownItKatex = require('markdown-it-katex');
const md = markdownIt({ html: true }).use(markdownItKatex);

// KaTeX基础内联样式，覆盖常用公式渲染需求
const katexStyle = `
<style>
.katex { font-size: 1.2em; font-family: KaTeX_Main, serif; }
.katex-display { display: block; margin: 1em 0; }
.katex .msup > .mord { font-size: .75em; top: -.5em; position: relative; }
.katex .mfrac { display: inline-block; vertical-align: -.2em; }
.katex .mfrac > .num { border-bottom: 1px solid; padding: 0 .2em; }
.katex .mfrac > .den { padding: 0 .2em; }
</style>
`;

vscode.languages.registerHoverProvider("python", {
    provideHover(document, position, token) {
        const text = document.lineAt(position).text;

        if (text.startsWith('#')) {
            const commentText = text.slice(1).trim();
            const renderedHtml = md.render(commentText);
            // 拼接样式和渲染后的HTML内容
            const finalHtml = katexStyle + renderedHtml;

            const contents = new vscode.MarkdownString(finalHtml);
            contents.isTrusted = true;
            contents.supportHtml = true;

            return new vscode.Hover(contents);
        }

        return null;
    }
});

说明： #

• 这段内联样式包含了上标、分数等常用LaTeX语法的渲染规则，足够覆盖基础需求；如果后续需要支持更复杂的公式，可以补充对应的KaTeX样式规则。
• 必须开启isTrusted = true，VSCode才会执行内联的CSS代码。
• 新增.trim()去除注释符号后的多余空格，让渲染结果更整洁。

内容的提问来源于stack exchange，提问作者Andy Yermakov