diff --git a/README.md b/README.md index 8aa8a48..a29bc97 100644 --- a/README.md +++ b/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 diff --git a/build/update-github-markdown-css.js b/build/update-github-markdown-css.js index 9acb63c..85f19c0 100644 --- a/build/update-github-markdown-css.js +++ b/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)); \ No newline at end of file + enablePreviewFontSize(updateGithubMarkdownCss(input)) +); diff --git a/github-markdown.css b/github-markdown.css index 7b2d88e..23a9011 100644 --- a/github-markdown.css +++ b/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; }