How do I increase the font size when viewing a rendered markdown (.md) file in WebStorm?

I love the built-in support for simultaneous editing and viewing of markdown (e.g., readme.md) files in WebStorm 2016.3.

What I cannot seem to figure out is how to increase the font size of just the rendered (right-most section of the screen) portion of the markdown file.

I have turned on mouse-wheel font increase/decrease (hold Ctrl key while using the mouse wheel) which works really great on the left-side (raw markdown text), but has no effect on the rendered markdown (right-side).  When I use the Ctrl+mouse wheel in that right-side of the side-by-side raw/rendered markdown windows, it just scrolls up and down.

This is an issue on my high resolution laptop and I would prefer not to make a global change (either to Windows 10 or throughout WebStorm), but if that's the only work-around for this issue, so be it.

 

10 comments
Comment actions Permalink

Just checked

body {
    font-size: 300% !important;
}

 

works fine for me. `!important` is necessary to override IDE scaling.

Please also make sure that Preview browser is set to 'JavaFX WebView'

3
Comment actions Permalink

>I cannot find where to set the "Preview browser" in WebStorm's settings, so maybe that's the issue?  Where exactly can I find that setting?

 

Preferences | Languages & Frameworks | Markdown | Preview, Preview browser

1
Comment actions Permalink

You can try using your own css for preview (File | Settings | Languages & Frameworks | Markdown) - see https://youtrack.jetbrains.com/issue/RUBY-17295#comment=27-1165037

0
Comment actions Permalink

The suggested solution does not work.

Here are the steps I tried that did not work:

  1. Open up WebStorm 2016.3 (or even 2017.1 EAP if you feel adventerous).
  2. Open a project (if one is not already open) that has a markdown file (e.g., readme.md).
  3. Open the markdown file.
  4. Make sure the dual-view icon in the upper-right corner is active.
  5. File | Settings | Languages & Frameworks | Markdown
  6. Set the Apply custom CSS text checkbox
  7. Add the following to the Apply custom CSS text section:
    body {
    front-size: 200% ! important;
    }
  8. Click the Apply button.  The style change does nothing to the rendered (right-side) of the markdown dual-view.
  9. Click the OK button.  The style change does nothing to the rendered (right-side) of the markdown dual-view.
  10. Close WebStorm.
  11. Reopen WebStorm.
  12. Repopen the project that contains the markdown (e.g., readme.md) file.
  13. Open the markdown file (e.g., readme.md) file.
  14. The style change does nothing to the rendered (right-side) of the markdown dual-view.

What else can I try to fix this problem?

 

0
Comment actions Permalink

Still not working, with WebStorm 2017.1.1-EAP.

I had two different Markdown plugins - one from JetBrains and one from a 3rd-party.

I disabled the 3rd-party one.

I went to the place in Languages & Frameworks mentioned above, unchecked the "Apply CSS from URI" and checked "Apply custom CSS text" with the same body 300% with important, as shown above, but when I Apply, nothing happens.  No error message. Nothing.

I cannot find where to set the "Preview browser" in WebStorm's settings, so maybe that's the issue?  Where exactly can I find that setting?

I have pretty much given up on using WebStorm to edit my readme.md files since I cannot see what the rendered output looks like.  Fortunately, I also have Visual Studio 2017 which does what I need for markdown files (dynamically adjustable font size in rendered portion).  I just wish I didn't have to switch tools just to be able to see the rendered markdown in other than tiny, unreadable (on my 4K high resolution laptop screen) font.

0
Comment actions Permalink

Webstorm 2018.1.3, Windows 10

Body font size is not working.

There is no option for Preview browser

 this is NOT a zoomed in view

0
Comment actions Permalink

Frederick,

There is a typo in your CSS fragment: it's a font-size, not a front-size.

body {
front-size: 200% ! important;
}

This thread helped me find a solution for me. Thanks anyway.

0
Comment actions Permalink

While I mistakenly typed front-size in my "steps to recreate" post, I did always enter font-size into the actual WebStorm IDE.

That being said, today, August 8, 2021, using WebStorm 2021.2, Build WS-212.4746.80, built on July 23, 2021, I tried doing the same steps I described in an earlier post.

While the change in CSS style did not take place by clicking the Apply button, those CSS style changes did take place after I clicked the OK button, which I consider a small price to pay to finally have this problem resolved.

0
Comment actions Permalink

Got it. Your post must have made the support team fix this. I was just lucky that I didn't have a trouble when I tried it using the latest release PyCharm.

0

Please sign in to leave a comment.