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.

 

7 comments

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

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

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

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

>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

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

Please sign in to leave a comment.