Fix markdown code block styling (#198351)

Fixes #198183 Remove extra background and also removes the extra divs inside of the code blocks as these were causing issues with styling (extra padding)
microsoft · Nov 15, 2023 · 8943ea4 · 8943ea4
1 parent 65b8f67
commit 8943ea4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/extensions/markdown-language-features/media/markdown.css b/extensions/markdown-language-features/media/markdown.css
@@ -229,8 +229,10 @@ pre.hljs code > div {
 }
 
 pre code {
+	display: inline-block;
 	color: var(--vscode-editor-foreground);
 	tab-size: 4;
+	background: none;
 }
 
 /** Theming */

diff --git a/extensions/markdown-language-features/src/markdownEngine.ts b/extensions/markdown-language-features/src/markdownEngine.ts
@@ -398,15 +398,14 @@ async function getMarkdownOptions(md: () => MarkdownIt): Promise<MarkdownIt.Opti
 			lang = normalizeHighlightLang(lang);
 			if (lang && hljs.getLanguage(lang)) {
 				try {
-					const highlighted = hljs.highlight(str, {
+					return hljs.highlight(str, {
 						language: lang,
 						ignoreIllegals: true,
 					}).value;
-					return `<div>${highlighted}</div>`;
 				}
 				catch (error) { }
 			}
-			return `<code><div>${md().utils.escapeHtml(str)}</div></code>`;
+			return md().utils.escapeHtml(str);
 		}
 	};
 }