Font size configurable via markdown.preview.fontSize

README.md

@@ -6,10 +6,12 @@ Changes VS Code's built-in markdown preview to match Github's styling
 
 > **❗️ Important**: This extension only styles the markdown preview. Use [this extension pack](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview) to add support for other github markdown features like `:emoji:` and `- [ ] tasklists`.
 
-# Features 
+# Features
+
 - Preview what your markdown will look like rendered on Github 
 - Extends VS Code's built-in markdown preview
 - Customize styling using your own [`markdown.styles`](https://code.visualstudio.com/Docs/languages/markdown#_using-your-own-css) css
+- Set font size via `markdown.preview.fontSize`
 
 # Usage
 

build/update-github-markdown-css.js

@@ -9,11 +9,23 @@ const fullPath = path.join(__dirname, '..', inputPath);
 
 function updateGithubMarkdownCss(input) {
     return `/* Generated from '${inputPath}' */\n`+ input.replace(/\.markdown-body/g, '.vscode-body');
-} 
+}
+
+/**
+ * Comments out `font-size: 16px;` so that the `markdown.preview.fontSize` configuration applies.
+ */
+function enablePreviewFontSize(input) {
+    return input.replace(
+        // https://regex101.com/r/LL2lma/2
+        /(\.vscode-body {[^}]+)(font-size: \d+px;)([^}]+})/s,
+        '$1/* $2 */   /* let\'s inherit `markdown.preview.fontSize` */$3'
+    );
+}
 
 
 const input = fs.readFileSync(fullPath, 'utf8');
 
 fs.writeFileSync(
     path.join(__dirname, '..', 'github-markdown.css'),
-    updateGithubMarkdownCss(input));
+    enablePreviewFontSize(updateGithubMarkdownCss(input))
+);

github-markdown.css

@@ -10,7 +10,7 @@
   line-height: 1.5;
   color: #24292e;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 16px;
+  /* font-size: 16px; */   /* let's inherit `markdown.preview.fontSize` */
   line-height: 1.5;
   word-wrap: break-word;
 }