Scroll Synchronization #6992

Closed
jbramwell opened this Issue May 28, 2016 · 25 comments

Projects

None yet
@jbramwell

This is more of a feature request...

When viewing a markdown file in split panes with one side being the raw markdown and the other being the HTML preview, I'd like to be able to have the two panes stay in sync as I scroll one or the other. For example, if I scroll down in the raw pane, I'd like the preview pane to scroll down as well so the markdown and preview stay in sync with each other. This is a feature found in MarkdownPad, my current/previous markdown editor, that I'd like to see in VS Code as well.

Thanks!

@kieferrm kieferrm was assigned by jrieken May 30, 2016
@rebornix
Member
rebornix commented Jun 1, 2016

The key point of synchronized scrolling is mapping the preview html sections to markdown source. A dirty but quick solution is injecting hidden splitters to html preview then map them to line numbers of markdown source. Since we've moved the markdown rendering code to a separate extension, this kind of hack should go with the extension either.

The missing feature in VS Code is how to scroll the preview panel. We are previewing the content by triggering htmlPreview command with content bytes, it's likely we should bind some scrollHandler to the htmlPreview action.

@Emeryao
Emeryao commented Jun 14, 2016

+1
really needs this feature

@Mucaccino

+1

@jingniao

+1

@forehalo
forehalo commented Jul 21, 2016 edited

+1 userfriendly fucntion

@joshsleeper

I'd very much like this as well.
I'm sure it could be implemented as an extension, but it seems small enough that it would probably make sense to be a core feature.

@akzaidi
akzaidi commented Sep 9, 2016

I'd love this feature as well, would make VS Code my default Markdown editor.
The Markdown Editor for Visual Studio 2015 has this feature already. But using the full-fleshed VS IDE for markdown seems like overkill... It also has the ability to follow links, as asked for in the issue

@jordanroskelley

+1 I use VS Code md for my project docs, and having them out of sync is painful. Also, when leaving and returning to the md preview pane, it resets to the top. This makes it difficult to follow links in the md.

@b1es
b1es commented Sep 20, 2016

+1

@mjbvz mjbvz was assigned by rebornix Sep 20, 2016
@mjbvz mjbvz added the duplicate label Sep 20, 2016
@mjbvz
Contributor
mjbvz commented Sep 20, 2016

Closing as duplicate of #5047, which also requested this feature.

@mjbvz mjbvz closed this Sep 20, 2016
@a1018875550

+1 this feature very usefull

@neilyoung

+1 would be great

@a1018875550

when the vscode have the feature?

@iebox
iebox commented Dec 17, 2016

+1

@nonoroazoro

+1

@amazingandyyy

amazing! Awesome! Thanks!!

@mjbvz
Contributor
mjbvz commented Feb 3, 2017

@jihunx Please open a new issue with some repo steps and I'll take a look

@RobDaPraia

Thanks a lot but how does this work?

Do yo need to install an extension to make the Markdown preview work?

In the documentation I read:

VS Code supports Markdown files out of the box. You just start writing Markdown text, save the file with the .md extension and then you can toggle the visualization of the editor between the code and the preview of the Markdown file

But when I click the preview button, nothing happens, or do you have to enable a setting?

@Zicore
Zicore commented Feb 3, 2017 edited

I also don't see it working.

Edit: Now that I used the installer from visualstudio.com, it is working. Before I used the auto updater and it didn't. I also checked the version it stated 1.9.0. Strange.

@RobDaPraia

Removed all extensions beside the 'Auto-Open MarkdownPreview' uninstalled, reinstalled VSC and rebooted computer.

I see two issues:

Issue 1:

The preview now works out of the box for a file like:

# How to create documentation

__Todo:__ create content, blabla....

Explain documents are created with Markdown, commit, Git, VSTS location, automatic build and automatic deploy to web site/SharePoint

![](img/CreateDocumentationProcess.jpg)  

## Using Visual Studio Code with Markdown

[https://code.visualstudio.com/docs/languages/markdown](https://code.visualstudio.com/docs/languages/markdown)  

But is does not work for the same file with some meta data added to the top. Instead the preview keeps blinking and cpu usage spikes, but preview stays empty, I have to kill the Visual Studio Code task through the Task Manager. It happens with this file:

---  
Header: Coding Guidelines
Type:   
Title: How to create documentation  
Description:   
Version: v1.0
Date: 20170108
TopicId: 30
...  

# How to create documentation

__Todo:__ create content, blabla....

Explain documents are created with Markdown, commit, Git, VSTS location, automatic build and automatic deploy to web site/SharePoint

![](img/CreateDocumentationProcess.jpg)  


## Using Visual Studio Code with Markdown

[https://code.visualstudio.com/docs/languages/markdown](https://code.visualstudio.com/docs/languages/markdown)  

Issue 2:

I can open a long document (without the meta lines) and show the preview. But when I scroll through the document, the preview is not scrolled in sync, VSC version is 1.9.0

@RobDaPraia

Update Issue 1:

When I identify the meta block at the beginning with dashes only, then the preview works and no spkie in cpu usage. I think I will use this as a work around for the moment and change my Markdown files like this:

Synced Scrolling with preview is still not working

---  
Header: Coding Guidelines
Type:   
Title: How to create documentation  
Description:   
Version: v1.0
Date: 20170108
TopicId: 30
---  

# How to create documentation

__Todo:__ create content, blabla....

Explain documents are created with Markdown, commit, Git, VSTS location, automatic build and automatic deploy to web site/SharePoint

![](img/CreateDocumentationProcess.jpg)  


## Using Visual Studio Code with Markdown

[https://code.visualstudio.com/docs/languages/markdown](https://code.visualstudio.com/docs/languages/markdown)  
@mjbvz
Contributor
mjbvz commented Feb 4, 2017

PR with fix for the cpu usage: #19894

@RobDaPraia We currently don't support using ... to terminate a frontmatter block. Using it will break syntax highlighting and cause the entire rest of the document to be treated as yaml instead of markdown.

In the future, please open new issues so that we can track individual issues and feature requests better

@RobDaPraia

@mjbvz Thanks for the explanation

create new issue: yes will do so next time, makes sense ;)

@RobDaPraia

Thanks for the Update: 1.9.1

Still a question about the scrolling now with update 1.9.1:

1 When I scroll the preview window, the source window is also scrolling
2 When I scroll the source window, the preview window is not scrolling
3 When I double click in the preview window the cursor in the source window is placed on the object
4 When I click in the source window the preview window scrolls to the same location

I'm very pleased that 1,3 and 4 work, but should 2 also work out of the box or is this the intended behavior?

@mjbvz
Contributor
mjbvz commented Feb 13, 2017

@RobDaPraia Yes, that is the expected behavior with VSCode 1.9. Source to preview scroll sync is tracked by #19459

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment