6

I have two monitors, one is my MacBook 13" that is very small to have multiple/split windows, and another one that I have my preview windows. When I'm writing a nodejs code that I store it on GitHub, I always edit some markdown files. The issue is:

I want to "detach" the Markdown Preview Windows to a "new window", so I can send it to my second monitor, so I can edit on one and see it on the other.

There are some similar questions on StackOverflow, but the solutions don't work for this case, because if I open another window/workspace and drag the preview window there, it does not update the preview when I save the original MD file... If I drag the preview window to the other monitor, it creates a "webview-panel" file.

E.g.: Markdown open a new window link

Any tips?

I tried with the default preview and the enhanced preview plugin, same results...

Miguel Dias
  • 83
  • 1
  • 1
  • 6

4 Answers4

8

VS Code does not have built-in support for multi-monitor setup... sorry :)

The solution would be to simply open another window of VSCode, of the same workspace, and open there the preview of the markdown file, while keep editing in the original window.

Edit 1

Here are the actions to reproduce the solution:

  1. Open 1st VSCode window with the project
  2. Cmd-Shift-N to open a 2nd VSCode window
  3. Point 2nd VSCode window to same project - but at a different root folder (as if it's the same - VSCode with just revert you to the 1st window
  4. Open on the 2nd VSCode window the markdown file you wish to preview, and then hit Cmd-Shift-V (Make sure you keep the tab of the markdown file open on the 2nd window as this is what VSCode Markdown preview uses to detect the file change events AFAIK)
  5. Edit the file on the 1st window and viola, it will auto-refresh on the 2nd window preview

Edit 2

How-to video (Hosted on youtube)

Shahar Hadas
  • 2,641
  • 1
  • 27
  • 29
  • 1
    Ok, I was waiting for other answers but there is none. Did you tested what you proposed? Because as I said, if you open another window with the preview, it does not update the preview on save... Care to explain the step by step of what you did? – Miguel Dias May 16 '19 at 12:38
  • edited the answer to give more detailed action items – Shahar Hadas May 16 '19 at 16:17
  • 1
    Hi there, thanks for the reply, but it does not work here... Are you using a MAC? I'm trying to figure it out why is it not working... When I save the file on the other window, I think VSC does not update the preview window because it's a different process. Did you test this your step by step and it's working? – Miguel Dias May 22 '19 at 14:49
  • Yes, I'm on a mac. I'll record a screen later - to show – Shahar Hadas May 22 '19 at 15:01
  • Ok, first of all, Thank you very much for your effort! I got it almost running... Yes, it does work as you have shown on the video, but for me, it's very buggy... Maybe I have too many markdown plugins, or too many open applications on the mac, because when I save, sometimes if refresh the preview quickly, but sometimes it takes very long... I think you are an old timer because of the UML diagram, so I can say that I think all windows inside VSC are modal, and they don't work very well with another VSC opened.. Anyway, thanks! Think I'll check how to write a plugin, with a second window :) – Miguel Dias May 24 '19 at 02:04
  • The UML diagram is simply a part from a documentation template I have on github which uses PlantUML (which I use for everything - class diagrams, state machines, network diagrams) - you can check it here: https://github.com/ShaharHD/document-template – Shahar Hadas May 24 '19 at 02:06
  • And I work more than once with multiple VSC open - especially when doing FullStack which combines backend (ExpressJS) and frontend (ReactJS). I would really look into VSCode plugins - as you might have just one too many ... try to disable the ones you don't really need. – Shahar Hadas May 24 '19 at 02:08
  • Thanks Shahar, you are a great guy! – Miguel Dias May 24 '19 at 10:47
  • 1
    Chiming in from 2023. This solution works great with no issues. thanks! – KC Coder May 04 '23 at 21:37
5
  1. Configure the 2nd monitor to have the same height as the 1st.
  2. Stretch VS Code horizontally to span 2 monitors (am assuming this can be done on a Mac.) Now the left half of VS Code is on the 1st monitor, and the right half is on the 2nd.
  3. Open the Markdown file in the left half of VS Code, and open the preview in the right half.

A bit of hack, but it works.

dwardu
  • 2,240
  • 1
  • 14
  • 10
  • Won’t work on Mac - as in contrast to windows, once a window is shared across two screens - it only shows on one screen – Shahar Hadas Aug 13 '20 at 21:03
1

Just for those, who are still looking for a good solution to see the current changes to a Markdown file in real time in another window, you can use the Instant Markdown extension.

It provides a browser window in which the preview is displayed and also listens for changes in VSCode. Here you find more information about that package.

Jonas Schell
  • 11
  • 1
0

So I have this setup: one monitor aligned vertically for editing the source and the horizontal one one the right (or left, you can change that to your needs) shows the preview of my edit.

I use VS Code for Markdown and Tex, so its pretty cool to work like that. If you preview the stuff in the splitview you can set on the option to split it. So if you right click it and then go to Split up, your preview is down which you then can scale to your monitor size.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
betamover
  • 1