#53911 - render setting descriptions as markdown

src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css

@@ -196,11 +196,18 @@
 	opacity: 0.7;
 	margin-top: 3px;
 	overflow: hidden;
-	white-space: pre;
 	text-overflow: ellipsis;
 	height: 18px;
 }
 
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description * {
+	margin: 0px;
+}
+
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description code {
+	line-height: 15px; /** For some reason, this is needed, otherwise <code> will take up 20px height */
+}
+
 .settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
 	position: absolute;
 	visibility: hidden;
@@ -209,7 +216,6 @@
 .settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
 .settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
 	height: initial;
-	white-space: pre-wrap;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-item-value-description {

src/vs/workbench/parts/preferences/browser/settingsTree.ts

@@ -30,6 +30,7 @@ import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant }
 import { SettingsTarget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
 import { ITOCEntry } from 'vs/workbench/parts/preferences/browser/settingsLayout';
 import { ISearchResult, ISetting, ISettingsGroup } from 'vs/workbench/services/preferences/common/preferences';
+import { renderMarkdown } from 'vs/base/browser/htmlContentRenderer';
 
 const $ = DOM.$;
 
@@ -677,7 +678,10 @@ export class SettingsRenderer implements IRenderer {
 
 		template.labelElement.textContent = element.displayLabel;
 		template.labelElement.title = titleTooltip;
-		template.descriptionElement.textContent = element.description;
+
+		const renderedDescription = renderMarkdown({ value: element.description });
+		template.descriptionElement.innerHTML = '';
+		template.descriptionElement.appendChild(renderedDescription);
 
 		this.renderValue(element, isSelected, <ISettingItemTemplate>template);