visual-studio-code - 如何使用 vscode API 在悬停消息上应用样式和 html 标签?
问题描述
我正在尝试设置悬停消息的样式或格式,MarkdownString
但它总是导致空白或转义所有内容,但我发现您可以使用span
它来设置样式,但您只能应用color
和background-color
使用此PR。
现在,它像纯文本一样丑陋,甚至使用表格降价也不起作用。有没有办法改善这一点?
我写如下:
const markdown = new MarkdownString(`<p> Some label: <code>${value}</code></p>`);
markdown.isTrusted = true;
return new Hover(markdown, range);
解决方案
使用 v1.61,您将有更多markdownString
选择。将支持这些 html 标签:
allowedTags: ['ul', 'li', 'p', 'code', 'blockquote', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'em', 'pre', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'div', 'del', 'a', 'strong', 'br', 'img', 'span'],
因此,使用b
,h1
等,您可以获得一些额外的“样式”。
/**
* Indicates that this markdown string can contain raw html tags. Default to false.
*
* When `supportHtml` is false, the markdown renderer will strip out any raw html tags
* that appear in the markdown text. This means you can only use markdown syntax for rendering.
*
* When `supportHtml` is true, the markdown render will also allow a safe subset of html tags
* and attributes to be rendered. See https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296
* for a list of all supported tags and attributes.
*/
supportHtml?: boolean;
一些示例代码:
const value = "Jello";
const content = new vscode.MarkdownString(`<span style="color:#000;background-color:#fff;">Howdy there.</span>`);
content.appendMarkdown(`<p><b> Some label: <code>${value}</code></b></p>`)
content.supportHtml = true;
content.isTrusted = true;
return new vscode.Hover(content, new vscode.Range(position, position));
在我的测试中,您仍然只能使用
<span style="color:#000;background-color:#fff;">
除了color
and没有其他样式background-color
。
以下是一些对我有用的选项来进行样式设置、降价表、代码块等:
vscode.languages.registerHoverProvider('javascript', {
provideHover(document, position, token) {
// a markdown table, wrapping in a styled span did not work
// had to style each "cell" separately
// html entity works
const markdown = new vscode.MarkdownString(`
| <span style="color:#ff0;background-color:#000;"> Table </span>| Header |
| :----: | :----: |
|first cell |second cell |
|third cell |<span style="color:#f00;background-color:#fff;"> fourth cell </span> |
\n\n\n`); // the newline is necessary for any following appends to work correctly, multiple newlines are reduced to one
const styledString = `<span style="color:#fff;background-color:#666;"> NASA code follows: </span>`;
const codeBlock = `const a = 12;
if (a) return;`; // any preceding tabs will be rendered in a template literal, so flush left
// const codeBlock2 = `const c = 12;\nif (c) return;`; // works, alternate form with newline
markdown.appendText("______________________________\n"); // a fake separator
markdown.appendMarkdown(styledString);
markdown.appendCodeblock(codeBlock, "javascript");
markdown.appendMarkdown(
`**Bold Text**
* some note
* another note
* final note`
);
markdown.isTrusted = true;
return new vscode.Hover(markdown, new vscode.Range(position, position));
}
- 注意:由于某种原因,降价表没有任何单元格或表格分隔符。
推荐阅读
- grep - grep:提取前缀和后缀之间的内容
- java - 我在 intellij 的 javax.mail.MimeMessage 处收到 NoClassDefFoundError
- cordova - Ionic Cordova OneSignal + 华为 InAppAlert 问题
- python - 计算每个 X 值的 Y 值 - MultiIndex
- ruby - 无法在 Ubuntu 上安装 Ruby
- python - Spacy 基于规则的匹配问题
- c# - 如何在 MSAGL 中将特定点设置为节点
- reactjs - 为什么在 react js 中使用 .map() 时我的选项列表为空?
- swift - instagram 的自定义导航栏是如何创建的?
- html - 我们如何在父 div 的右侧对齐子 div