Font size configurable via markdown.preview.fontSize

[borekb]

Resolves #30

It works by commenting out this line:

vscode-github-markdown-preview-style/github-markdown.css

Line 13 in 2452ef0

font-size: 16px;

in which case the preview reacts to markdown.preview.fontSize nicely. For example, 10px:

Font size 24:

---

I looked through the rest of the CSS for other instances of setting explicit pixel font sizes but they always seem to be overridden by an em rule rule which is good. For example, on line 265:

vscode-github-markdown-preview-style/github-markdown.css

Lines 264 to 267 in 2452ef0

	.vscode-body h1 {
	font-size: 32px;
	font-weight: 600;
	}

And then later on line 495:

vscode-github-markdown-preview-style/github-markdown.css

Lines 493 to 497 in 2452ef0

	.vscode-body h1 {
	padding-bottom: 0.3em;
	font-size: 2em;
	border-bottom: 1px solid #eaecef;
	}

Fortunately, these two are in the right order so I think that just disabling 16px in .vscode-body is enough.

[mjbvz]

Change looks good but this will change the preview's style for a lot of users

We currently try to match github's display of markdown content, even setting the max-width of the content to match how it looks on github:

vscode-github-markdown-preview-style/base.css

Line 8 in 2452ef0

max-width: 980px;

This change will also effect users that have never configured markdown.preview.fontSize

I'd like to either:

• Make this behavior opt-in

• Or get more feedback on if users of this extension are ok with this change

What do you think?

[borekb]

Good points. I was initially looking for a way to do this dynamically and was a bit surprised that this extension is just a set of CSS files (please bare with me, I'm completely new to VSCode development and didn't even know extensions can be code-less; BTW, this was the first time I opened a source of an extension and tried to do something; I loved the experience!).

Opt-in sounds great to me but would that mean that this extension would need to become more complex? I'm not sure I'm capable to contribute code at this point...

[borekb]

A non-technical solution could be to add a note to README that one should set markdown.preview.fontSize to 16 to get the rendering close to GitHub's.

[mjbvz]

I'm just worried that if we merge this change, suddenly a lot of people's markdown preview is going to look different and a good number of them will never see the note in the readme explaining how to fix it. Going away from github styling by default also sort of goes against the point of this extension

Dynamic would require a little work but the code changes are not too terrible. We actually use to do it for this plugin. Here's the change that removed it: da1c0be#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

Did you want to look into making this dynamic. Here's what would be required based on the old work:

• Add back the index.js file and include it in the package.json.

• In the package.json, add back "markdownit.plugins": true

• Either:

  • define a new setting called something like: markdownPreviewGithubStyle.useDynamicFontSize
  • Or check to see if the user has configuredmarkdown.preview.fontSize

• Toggle a class in the markdown html output (in index.js) based on the above setting. Then update the css itself to check for this class before enabling the dynamic font size

[borekb]

if we merge this change, suddenly a lot of people's markdown preview is going to look different

Totally agree, this needs to be reworked. I'll see if I can find time to take a look at what you suggested, in any case, feel free to close this PR.

Thanks for the great feedback and detailed instructions!

[borekb]

Just a thought but if VSCode had a setting like preview.zoomLevel, similar but separate from window.zoomLevel, that would probably work even better for me than fiddling with the font size (which has the problem that the rendering becomes different than on GitHub).

On a Mac, I'd simply like to do a zoom gesture over a preview panel to zoom it independently from the rest of VSCode. This would allow me, in split mode, to make the left side (where I'm editing Markdown) for example 2/3 wide while preview would only be 1/3 of the width. If I could zoom out the preview, I'd achieve a situation where I still see the rendering roughly as it would be on GitHub, without line wrapping.

[borekb]

This extension claims to support zooming the preview though at first sight, I see no related code to this in their codebase.

[vancejc-mt]

I was hunting for this exact feature when I ran across this PR; I'd love to have this (the default size, while matching github, is too large for my tastes)

[ghost]

This likely needs updating because of #70.

[ghost]

Okay so we'd need to remove the font-size declaration in github-markdown.css:

.github-markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

It's on L196 and the line would need to be commented out to make it work.

[ursetto]

I'd like to add my voice to those asking for this feature. Although you can get around it with custom CSS, as far as I understand you'd need to put that styles file in every workspace (or in a GitHub gist), so it's not as seamless as an extension.