Vscode: Automatically Activate Markdown Preview

[dfinke]

I would like to eliminate the step of pressing ctrl+k v to preview the md file I open. For the preview should always be on.

Thank you

[RWeigelt]

Here are my 2 cents on the handling of Markdown files in Visual Studio Code.

I think that the main use case for opening a Markdown file is _reading_ it. Not only for developers who consume the documentation of tools and libraries, but also for people like me whose job involves _writing_ lots of documentation. I don't have definitive numbers, but I'm pretty sure I _read_ (or at least scan) many more Markdown files than I _edit_ on a given day. That's why I think that the current situation is a bit cumbersome:

• When I open a Markdown file, it is displayed as plain text / source
• If I want to read it with as little distraction as possible, I press ctrl+shift+v.
• But when I see something I'd like to edit, pressing ctrl+k v doesn't work. I _first_ have to switch back to the text editor (ctrl+shift+v), _then_ enter the split view (ctrl+shift+v).
• Regardless of whether I choose the better reading experience or (if I expect an edit) the better editing experience, I _always_ have to press a hotkey immediately after opening a Markdown file.

For me personally (this may be a matter of personal preference), the perfect UX would look like this:

• When I open a Markdown file, I automatically see the preview mode that you get today when pressing ctrl+shift+v.
• Then, when I want to make an edit, I can switch to split view very fast, either by pressing an Edit button or using a simple hotkey. For Markdown preview (which doesn't have much interaction) it would be possible to use f2, which is the ultimate "change"/"edit"/"rename" hotkey across Windows, Office (most important key in Excel...) and Visual Studio.

Back to the feature request by @dfinke, who wanted a setting to force Visual Studio code into split editor when opening a Markdown file:

I suggest a setting that controls how Markdown files are opened by default (e.g. markdown.defaultView), with the following values:

• source for the (source) text editor
• preview for the preview mode (i.e. the ctrl+shift+v mode)
• split for the split editor (i.e. the ctrl+k v mode)

From the behavior of the UI it seems to me that the split editor is currently not a real standalone mode, but that ctrl+k v is merely a shortcut for manually splitting the editor and switching the second editor view to preview mode. This means that opening a Markdown file directly in split editor may require some rework (e.g. what should happen when opening several Markdown files).

To achieve a "quick win" within a limited budget, it would be possible to first implement the source and preview values of the markdown.defaultView setting and add a split setting later. That would not break the compatibility of existing configurations.

Of course I'd love to have a hotkey for switching directly from preview to split edtor, but having a markdown.defaultView setting alone would already be a huge improvement for my daily work.

[bpasero]

I think the best solution is to show both text and preview at the same time in one editor in the same way you can diff a file from git view to see original and modified. This has obvious advantages:

• it is up to you if you want to see the text, preview or both at the same time depending on how you arrange the thing (setting would get persisted)
• starting to edit is as simple as clicking some edit button to bring the text to the side of the preview without having to open an additional editor
• you dont have to manage 2 editors for the same thing

[ghost]

@bpasero You would, however, lose the ability to decide whether the preview is shown on the left or the right of the source.

Double clicking in the preview to make the source cursor jump to the corresponding location would probably be helpful.

[bpasero]

Well we could still allow to swap the positions of source/preview.

[houkdr1]

I would also like to throw in support for an option to enable split screen previewing of Markdown files by default.

[asphub]

Open Markdown links inside the preview Pane within the pane itself, Now it is opening as a new tab and it opens .md as source file. Please fix this problem, this will be great for documentation.

[BinaryBen]

To me, the current behaviour seems strange given that a single click on a file is supposed to be a "preview" and a double click is required to keep it in a persistent tab. With the current single click v. double click behaviour, I'd prefer that the preview results in an actual preview (using whatever the relevant CSS is as well). I can double click if I need to edit it, but as said above, most of the time I will be reading.

[flamytwista]

I think the best solution is something like this editor
https://typora.io/

Now I'm using Typora, but it is annoying to switch from IDE to markdown editor.

It would be cool if Visual Studio Code can work with markdown syntax like in example.

P.S. It also has simple switch by shortcut from editor mode to reader mode.

[Astrantia]

Typora is indeed a great experience. Could we implement something like it in VSCode?

[mjbvz]

VS Code is very much focused on being a great code editor, so I'm not in favor of adding any WYSIWYG editor features that hide the underlying source (even if it is simple to switch back to the source). If you want a great Typora-style editing experience, use Typora :)

---

Back on the original issue. With #27983 in 1.21, the markdown preview now dynamically updates to show the current markdown file. That means you only have to open the preview once per session. Hopefully we'll soon have markdown previews that restore when you restart vscode as well.

This issue seems to be tracking a few different scenarios, so I'd like to understand which ones you all are most interested in:

1. When I open a markdown file, vscode should automatically open the markdown preview to the side of it (eliminating the open preview to side step)

2. A markdown editor and its preview should be a single split editor, like vs code's diff view.

3. A markdown editor and its preview should be a single editor, and I can quickly switch back and forth between them. (Right now an editor and its preview are two separate editor tabs. This would instead have a single tab)

4. When I open a markdown file, I really want to open the preview instead of the source

5. Something else?

Most of these are not really possible using existing VS Code APIs but it would be helpful for me to understand which functionality is the most interesting

[BinaryBen]

3 & 4 for me. Let me elaborate on my ideal UX:

I do want to retain the option of being able to see both source and preview side by side, as it is helpful in some situations. But most of the time, I'd prefer to open a markdown file and see the preview (and just the preview). I'm probably reading it as others have discussed above, so scenario 4 is most relevant here. Please add a setting that lets users choose whether markdown files are automatically opened in preview or source mode.

I note that if you open a markdown file, open the preview, then close the source - there is a button to open the source again. So most of the functionality is ready to go, it just needs the option to jump straight to the preview instead of the source.

Once that is implemented, I'd then like to be able to quickly switch to the source code in the same tab if I find a typo or simple issue that needs a quick edit (scenario 3), without having to launch a new tab (or even a new split if I don't already have one open). Having to open a new split feels clunky to me. I also try to keep my splits organised by file type personally. So I might have all documentation in one split, frontend code in another, and backend in the third split. The current setup makes this difficult to achieve.

---

Further Thoughts

To be totally honest, I would also love VSCode to go even further and emulate the Typora experience when it comes to markdown files as well, and allow users to edit the file directly in the preview. At the very least, it would be great if the plugin system was altered to let an extension achieve that. However I do understand and accept the reasons for not doing either of those things (keep the extension system easy to use, and VSCode is for code not text).

For scenario 1 though, there is an extension that does that already. I also can see that being a feature that users would either love or hate, and I suspect more will hate it than love it (see the download numbers of the extension currently for context). In comparison, most people are likely to be reading markdown files - so opening direct to preview only will probably be welcomed.

For scenario 2 - maybe I need to see a mockup to better understand what is being suggested - but the various ways I can imagine it being implemented would make readability a nightmare.

[crper]

such as mark text live preview , that's great

[igor-krupenja]

@mjbvz Frankly, I would personally prefer option 5 (something else) and keep current behaviour. Or implement anything suggested in this issue, while having an option to keep current behaviour.

[ghost]

Option 4 really seems like it could be useful. Almost 90% of the time I'm reading markdown and not writing it so it would be nice to enable preview without source. I always end up having to close the source tab because it gets really crowded. I'd like to just go through different markdown files and only have the preview open in a split layout.

[lcswillems]

Is there an option for opening directly the preview instead of the file itself? It would be so great!!

[CurtisDS]

Option 4!

Basically just switch the way its handled. When you open the md file, open it in preview only mode. And press the shortcut ctrl+shift+v to open the edit tab, instead of opening the preview tab.

Opening both edit and preview at the same time would be fine for me as a quick solution though. But I do think it makes more sense for the main tab to be the preview and then if you need to edit the file you can open up an 'edit' tab to the side.

[crlang44]

I'm definitely for having the preview open by default, most of the time I want to read md files rather than edit them. We can do this and add a setting to change it if you want the editor open by default instead.

[yaute74]

For me Option 4 is the best solution

[tcozzens]

I would like to throw out the option for a user setting change so that the user can determine if they want editor or preview as default.

Otherwise option 4 seems best

[jballe]

Just to throw my opinion. When I am opening a markdown file I am also going to edit it (usually).
For me the best option would be if I could choose to automatically open the preview to the side (option 1) and have the same option for other file types. Eg. I have preview for PlantUML files also where I would also like to see the preview when editing.
Option 4 is also fine but it would not be relevant to me.
Option 2 and 3 would probably solve it for markdown but it is very specific for this specific type and afterwards every other kind of community provided preview would try to create the same experience. If we can I would appreciate if we can make a general solution and let the user configure per file type what the experience should be.

[KorraHarraway]

VS Code is very much focused on being a great code editor, so I'm not in favor of adding any WYSIWYG editor features that hide the underlying source (even if it is simple to switch back to the source). If you want a great Typora-style editing experience, use Typora :)

I'm afraid I have to disagree.
It is supposed to be an additional feature and not an alternative option. Even in Typora one can switch back and forth freely by toggling wysiwyg mode to source code mode. Such feature would come very much in handy in vscode too.

In fact, there already is an extension in this direction right now, and I'm using it: name is UCode.
However, it does still need more polishing and improvements, like changing the font size, the editor background, change symbols for indented ordered/unordered lists, highlight markup support, etc

[glen-84]

Maybe something like:

File modes

• Edit
• Preview (static)
• Design (aka WYSIWYG. Maybe later, secondary goal.)

Settings (overridable by file type)

• Active modes: (EDIT|PREVIEW|DESIGN)[]
  
  
  
  • f.e.
    
    
    
    
    
    • ['EDIT', 'PREVIEW'] would open the edit and preview panes within a single tab.
    
    
    
    • ['PREVIEW'] would just open the preview.
    
    
    
  
  
• Pane order: HORIZONTAL|VERTICAL
  
  
  
  • f.e.
    
    
    
    
    
    • 'HORIZONTAL' would display the active mode panes horizontally.
      
      
      
      
      
      
      
      • (order is defined by the active modes setting)
      
      
      
      
    
    
    
    • 'VERTICAL' would display the active mode panes vertically.
      
      
      
      
      
      
      
      • (order is defined by the active modes setting)
      
      
      
      
    
    
    
  
  

Instead of the Open Preview to the Side icon, you might have a drop-down menu for toggling the active modes.

Edit: Extensions may want to contribute additional modes/panes.

---

My biggest issue with the current setup is that the preview is not linked with the editor, so selecting another editor continues to show the preview alongside an unrelated file. It's very awkward, and IMO it would be best if the editor and preview were part of the same tab.

[dlumma]

Please support Typora-style live editing of markdown preview!

[glen-84]

@dlumma That should be a separate issue.

[RandomGHUser]

This definitely needs some attention to make VSCode a better MD viewer and editor.

Preview and editor should have the ability to be linked in a single pane tab; the default open mode should be configurable (preview only/edit only/or both).

Also, as VSCode already allows double clicking on the preview to edit the source in the same pane tab, there should be a vice-versa (icon and/or context menu item) to return to preview mode in the same pane tab, not the current "open preview to the side" which gets clunky and causes pane management hassles, or the Ctrl-Shift-V preview shortcut which creates a new tab, which causes tab management hassles.

If the "Markdown:Open Preview" shortcut is required to stay the same, at least have a single MD shortcut that will toggle between preview and source tabs, instead of having to press CTRL-SHIFT-V then pressing Alt Left and Right.

[3nuc]

Found #77131 - this is in the iteration plan for the current month (September). Will this not solve our issue? It doesn't sound like it would support Markdown natively, could need an extension

Replace 'hexdump' with 'markdown'

User clicks on a hexdump file for the first time

    If no custom view for a hexdump file is registered.
        Fallback to VS Code's existing behavior

    If only a single extension is registered for a hexdump file
        Fire an activation event
        Extension registers a custom view provider by calling registerWebviewEditorProvider for hexViewerExtension.hexEditor

[BinaryBen]

@3nuc, potentially. I'd be very hyped if users could make extensions that open files using custom webviews in the main editing area. In theory, that could allow a typora-like extension to be made for those who prefer the edit and semi-preview in the same view option. But I think they would like to stop it becoming too open so I'm not holding out hope yet.

[mjbvz]

I have checked in prototype that allows you to set the markdown preview as the default editor: #84520 We are looking for the community to drive the testing and polishing of this feature so that it can ship, so please follow up on #84520 if you wish to contribute

[niccolomineo]

Please add the possibility to in-place switch between the markdown source and preview in one panel.

[xuoutput]

How to set off automatic preview of markdown files.

[huahuayu]

Please give an option to NOT automatic preview of markdown files.

[huahuayu]

@gjsjohnmurray you made a dead loop for mention #91251 , it doesn't solve the problem
@xuoutput if you know how to disable auto preview please share the method.

[Benjin]

I think there's a third option to consider as well: Sublime Text's markdown handling. Sublime decorates your text (including the markdown syntax) with how it's stylized, which makes it very easy to confirm your formatting.

I am _adamantly_ against Typora's experience because when writing markdown it's extremely important to not hide the markdown annotations. As soon as you do that, it becomes difficult to edit and we may as well just be writing things in RTF which is exactly what MD is meant to take us away from. Microsoft Teams uses WYSIWYG, and it's miserable to change the formatting because it's guessing where each decoration block begins and ends.

A split view (RES-style) is more flexible than what Sublime affords but also doesn't hide the markdown. Anything but WYSIWYG/Typora, please.

[aisbergde]

I also thought that VSC is to blame for the automatic preview, which drives me crazy. Then I turned off all extensions, but the preview still came.

But after restarting VSC, the preview didn't come back.

Finally I found - it is the "Markdown All in One" extension which enables the automatic markdown preview.

[huahuayu]

@aisbergde I don't use markdown all in one, but it still automatic preview markdown

[aisbergde]

@huahuayu Then I can only suggest to disable all extensions, to restart VSC and to check. This is how I found that an extension causes the issue. Maybe in your case it is another extension.

[jeon3029]

@huahuayu in my case the package "Auto-Open Markdown Preview" was the problem.
After disable this package, my auto opening preview issue was solved.