Add font settings for markdown preview (#16302)

Fixes #4641

Adds basic settings for controlling the markdown preview font. We already support this with custom css, but these settings are similar to what the editor and integrated terminal expose and allow for a few basic customizations. Custom style sheets will override these.

extensions/markdown/package.json

@@ -130,6 +130,21 @@
 					],
 					"default": "hide",
 					"description": "%markdown.previewFrontMatter.dec%"
+				},
+				"markdown.preview.fontFamily": {
+					"type": "string",
+					"default": "'Segoe WPC', 'Segoe UI', 'SFUIText-Light', 'HelveticaNeue-Light'",
+					"description": "%markdown.preview.fontFamily.desc%"
+				},
+				"markdown.preview.fontSize": {
+					"type": "number",
+					"default": 14,
+					"description": "%markdown.preview.fontSize.desc%"
+				},
+				"markdown.preview.lineHeight": {
+					"type": "number",
+					"default": 1.6,
+					"description": "%markdown.preview.lineHeight.desc%"
 				}
 			}
 		}

extensions/markdown/package.nls.json

@@ -3,5 +3,8 @@
 	"markdown.previewSide.title" : "Open Preview to the Side",
 	"markdown.showSource.title" : "Show Source",
 	"markdown.styles.dec": "A list of URLs or local paths to CSS style sheets to use from the markdown preview. Relative paths are interpreted relative to the folder open in the explorer. If there is no open folder, they are interpreted relative to the location of the markdown file. All '\\' need to be written as '\\\\'.",
-	"markdown.previewFrontMatter.dec": "Sets how YAML front matter should be rendered in the markdown preview. 'hide' removes the front matter. Otherwise, the front matter is treated as markdown content"
+	"markdown.previewFrontMatter.dec": "Sets how YAML front matter should be rendered in the markdown preview. 'hide' removes the front matter. Otherwise, the front matter is treated as markdown content.",
+	"markdown.preview.fontFamily.desc": "Controls the font family used in the markdown preview.",
+	"markdown.preview.fontSize.desc": "Controls the font size in pixels used in the markdown preview.",
+	"markdown.preview.lineHeight.desc": "Controls the line height used in the markdown preview. This number is relative to the font size."
 }
\ No newline at end of file

extensions/markdown/src/extension.ts

@@ -223,6 +223,22 @@ class MDDocumentContentProvider implements vscode.TextDocumentContentProvider {
 		return [];
 	}
 
+	private getSettingsOverrideStyles(): string {
+		const previewSettings = vscode.workspace.getConfiguration('markdown')['preview'];
+		if (!previewSettings) {
+			return '';
+		}
+		const {fontFamily, fontSize, lineHeight} = previewSettings;
+		return [
+			'<style>',
+			'body {',
+			fontFamily ? `font-family: ${fontFamily};` : '',
+			+fontSize > 0 ? `font-size: ${fontSize}px;` : '',
+			+lineHeight > 0 ? `line-height: ${lineHeight};` : '',
+			'}',
+			'</style>'].join('\n');
+	}
+
 	public provideTextDocumentContent(uri: vscode.Uri): Thenable<string> {
 		return vscode.workspace.openTextDocument(vscode.Uri.parse(uri.query)).then(document => {
 			const scrollBeyondLastLine = vscode.workspace.getConfiguration('editor')['scrollBeyondLastLine'];
@@ -233,6 +249,7 @@ class MDDocumentContentProvider implements vscode.TextDocumentContentProvider {
 				'<meta http-equiv="Content-type" content="text/html;charset=UTF-8">',
 				`<link rel="stylesheet" type="text/css" href="${this.getMediaPath('markdown.css')}" >`,
 				`<link rel="stylesheet" type="text/css" href="${this.getMediaPath('tomorrow.css')}" >`,
+				this.getSettingsOverrideStyles(),
 				this.computeCustomStyleSheetIncludes(uri),
 				`<base href="${document.uri.toString(true)}">`,
 				'</head>',