Stop vscode preview from scrolling - visual-studio-code

Is it possible to stop vscode preview from scrolling, while editing in another tab?
I have a preview open in a splitview, and when I scroll in the document the preview is also scrolling.

Yes you can for markdown. With other languages it would be dependent upon the extension support for that given language.
Markdown you can modify the following settings to make each interdependent of each other:
JSON of each would be:
"markdown.preview.scrollEditorWithPreview": true/false
"markdown.preview.scrollPreviewWithEditor": true/false

Related

Disable preview for vscode custom text editor extension

Is there a way to disable the preview mode for my custom text editor without changing the user settings (workbench.editor.enablePreview: false)?
Like it can be done with vscode.window.showTextDocument() and vscode.workspace.TextDocumentShowOptions were you can set preview: false.
I didn't see anything helpful in the extension api. So here is a possible workaround. I assume you can listen for when your custom editor is being opened - and then run this code:
await vscode.commands.executeCommand('workbench.action.keepEditor');
after it is opened. That should take it out of preview mode. It may be the best you can do.

Markdown headings not appearing in outline box in VS Code

While editing a markdown document in VS Code, the outline box does not show me the outline of the markdown document; it's completely blank/empty. I've disabled all extensions with no change in behavior (and I only had one markdown-related extension anyway, markdownlint). I don't know that this has ever worked, but it certainly has not for the last several months.
OS: Mac OS 12.3
VS Code: 1.65.2
Out of the box, Markdown headings should show up in the outline view as text nodes:
If the outline view is configured not to show strings, Markdown headers won't appear.
Take a look at the Outline: Show Strings setting in your preferences and make sure it's enabled.
This setting is called outline.showStrings. If you wish to enable it only for Markdown files, you should be able to disable the feature globally and then add something like this to your settings.json:
"[markdown]": {
"outline.showStrings": true
},
It's probably easiest to start by running Preferences: Configure Language Specific Settings... in the command palette and then selecting Markdown.

How to open markdown preview by default to the bottom?

By default, the markdown preview in VS Code opens on the Side. I do this action quite a bit and I always have to drag a drop it to the bottom of the current tab.
I looked in my settings to see if there was a way to change this default behavior and didn't see anything that looks like it would change it.
Any suggestions on how to change this default setting?
You can try to use one of the extensions that allow to execute multiple commands and do:
markdown.showPreviewToSide
workbench.action.toggleEditorGroupLayout

How to create a modal for a VSCode extension?

I'm trying to make an extension for VSCode to Find text in File (Like in Notepad++).
Is there an API for using a modal in a VSCode extension? or at least extend the Command Palette?
VS Code (1.34) has no concept modal UI. Extensions can only show basic dialog messages modally using the showMessage apis.
Messages can show message text and a set of buttons. By default VS Code will render messages in its UI. The MessageOptions.modal option makes VS Code render the message using system UI instead.
Try positing a more specific question about what you are trying to accomplish. VS Code's extension model is different from other editors, so if you are trying to replicate functionality from another editor like Notepad++ you may need to rethink the user experience.
I believe what you are looking for is an input box. It will show a UI where you can input text. From there you can grab the text of a document and parse it for entered text. For completeness, VS Code does this with ctrl + f or cmd + f depending on OS. Add the shift key to search the whole project.
As mentioned above there are the limited built-in inputs and message box (which can also be used to display choice buttons).
You can also have a look at WebView these can be used to display a side-bar view (like the EXPLORER) or a full document. They are made up from HTML and plain old JavaScript. You will have to pass simple string messages between your HTML/JS view and vscode itself.
https://code.visualstudio.com/api/extension-guides/webview
https://github.com/Microsoft/vscode-extension-samples/tree/main/tree-view-sample
A large 'document' view example vscode extension is call 'nearest-icons'
https://github.com/noGreg/nearest-icons

vscode: Is it possible to show an image inside a text buffer?

e.g. I write a markdown document and include a line like [myimage](/mypath.jpg) to see the image in a big size above or below this line.
When I'm writing markdown I regularly have to look at an embedded file. At the moment I have to use a split layout and switch my attention between the text buffer and the preview. That's slowing me down and distracting.
What I mean is a full size preview that can fill the whole width of the buffer and is permanently shown. This is offered by the emacs markdown-mode (see this image with a command named "markdown-toggle-inline-images".). This is also available in sublime text e.g. via an add-on named sublime_zk. This is possible in atom with add-ons like preview-inline or inline markdown images.
This would allow to use VSCode like a WYSIWYG md-editor like typora but with all the benefits of using your daily edtior. This should also be interesting for programmers - at least on hackernews typora is regularly praised as the best markdown editor (see e.g. here)
I didn't see an addon for this. Something related was discussed about two years ago in issue 7689 - but this only concerns a mini preview in the gutter or if you move the mouse over a link. For this there is already the add-on Image preview.
This is not possible as of VS Code 1.29. The VS Code api does not provide a way to insert custom elements like images into the editor.
The two closest existing APIs:
The code lens api: CodeLensProvider. These allow you to insert additional clickable commands into an editor (such as displaying a reference count above a function) but these can only be text buttons
The hover api: HoverProvider. Hovers can contain images since they display markdown content. However they are only displayed when the user hovers over them