Support syntax highlighting of detail section in CompletionItems

Part of microsoft#34188

extensions/typescript/src/features/completionItemProvider.ts

@@ -282,7 +282,10 @@ export default class TypeScriptCompletionItemProvider implements CompletionItemP
 				return item;
 			}
 			const detail = details[0];
-			item.detail = Previewer.plain(detail.displayParts);
+			item.detail = {
+				value: Previewer.plain(detail.displayParts),
+				language: 'typescript'
+			};
 			item.documentation = Previewer.markdownDocumentation(detail.documentation, detail.tags);
 
 			if (detail.codeActions && detail.codeActions.length) {

src/vs/editor/common/modes.ts

@@ -225,7 +225,7 @@ export interface ISuggestion {
 	label: string;
 	insertText: string;
 	type: SuggestionType;
-	detail?: string;
+	detail?: string | { language: string, value: string };
 	documentation?: string | IMarkdownString;
 	filterText?: string;
 	sortText?: string;

src/vs/editor/contrib/suggest/browser/media/suggest.css

@@ -225,6 +225,11 @@
 	padding: 4px 0 4px 5px;
 }
 
+.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .header > .type.highlighted {
+	opacity: 1;
+	white-space: pre-wrap;
+}
+
 .monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .docs {
 	margin: 0;
 	padding: 4px 5px;

src/vs/editor/contrib/suggest/browser/suggestWidget.ts

@@ -33,6 +33,7 @@ import { IStorageService, StorageScope } from 'vs/platform/storage/common/storag
 import { MarkdownRenderer } from 'vs/editor/contrib/markdown/browser/markdownRenderer';
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
+import { MarkdownString } from 'vs/base/common/htmlContent';
 
 const sticky = true; // for development purposes
 const expandSuggestionDocsByDefault = false;
@@ -153,7 +154,11 @@ class Renderer implements IRenderer<ICompletionItem, ISuggestionTemplateData> {
 		}
 
 		data.highlightedLabel.set(suggestion.label, createMatches(element.matches));
-		data.typeLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, '');
+
+		const detailText = suggestion.detail
+			? typeof suggestion.detail === 'string' ? suggestion.detail : suggestion.detail.value
+			: '';
+		data.typeLabel.textContent = detailText.replace(/\n.*$/m, '');
 
 		if (canExpandCompletionItem(element)) {
 			show(data.readMore);
@@ -257,12 +262,18 @@ class SuggestionDetails {
 			this.docs.appendChild(this.markdownRenderer.render(item.suggestion.documentation));
 		}
 
-		if (item.suggestion.detail) {
+		if (!item.suggestion.detail) {
+			this.type.innerText = '';
+			hide(this.type);
+		} else if (typeof item.suggestion.detail === 'string') {
 			this.type.innerText = item.suggestion.detail;
+			removeClass(this.type, 'highlighted');
 			show(this.type);
 		} else {
-			this.type.innerText = '';
-			hide(this.type);
+			const detail = new MarkdownString().appendCodeblock(item.suggestion.detail.language, item.suggestion.detail.value);
+			this.type.innerHTML = this.markdownRenderer.render(detail).innerHTML;
+			addClass(this.type, 'highlighted');
+			show(this.type);
 		}
 
 		this.el.style.height = this.header.offsetHeight + this.docs.offsetHeight + (this.borderWidth * 2) + 'px';

src/vs/vscode.d.ts

@@ -1995,14 +1995,19 @@ declare module 'vscode' {
 		appendCodeblock(value: string, language?: string): MarkdownString;
 	}
 
+	/**
+	 * Code-block that provides a language and a code snippet.
+	 */
+	type CodeblockString = { language: string; value: string };
+
 	/**
 	 * ~~MarkedString can be used to render human readable text. It is either a markdown string
 	 * or a code-block that provides a language and a code snippet. Note that
 	 * markdown strings will be sanitized - that means html will be escaped.~~
 	 *
 	 * @deprecated This type is deprecated, please use [`MarkdownString`](#MarkdownString) instead.
 	 */
-	export type MarkedString = MarkdownString | string | { language: string; value: string };
+	export type MarkedString = MarkdownString | string | CodeblockString;
 
 	/**
 	 * A hover represents additional information for a symbol or word. Hovers are
@@ -2754,7 +2759,7 @@ declare module 'vscode' {
 		 * A human-readable string with additional information
 		 * about this item, like type or symbol information.
 		 */
-		detail?: string;
+		detail?: string | CodeblockString;
 
 		/**
 		 * A human-readable string that represents a doc-comment.

src/vs/workbench/api/node/extHostTypes.ts

@@ -931,7 +931,7 @@ export class CompletionItem {
 
 	label: string;
 	kind: CompletionItemKind;
-	detail: string;
+	detail: string | { language: string, value: string };
 	documentation: string | MarkdownString;
 	sortText: string;
 	filterText: string;