Preview is not updated when you change the stylesheets, and scripts attached to the html file using the tags link and script.

• VSCode Version:
  

• OS Version: Linux Mint 18 x64

• Preview version: 1.1.1

Steps to Reproduce:
Files from the example: test-files.zip

1. If I embed the styles and scripts directly in the html, when you change the code preview is updated.

2. If I use the tags link and script code changes not covered in the preview.

sample html

change code in file test2.js, the changes are not applied

I currently have to Command+Shit+V then select from a dropdown.

It would be convenient, say, if I am editing a *.rst file to have preview figure that out.

It would also be nice to have a live sync where if I edit the source the preview re-renders.,

Issue Type: Bug

1. Right click a tab of a markdown file
2. See 3 preview items
3. Clicking one opens a preview pane
4. Clicking another closes the first preview pane
5. Clicking the last one opens an unrelated preview pane

Extension version: 2.2.5
VS Code version: Code 1.57.0 (b4c1bd0a9b03c749ea011b06c6d2676c8091a70c, 2021-06-09T17:22:31.215Z)
OS version: Darwin x64 20.5.0
Restricted Mode: No

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
pythonvspyt602:30300191
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
pythonvspyt639:30300192
pythontb:30283811
pythonvspyt551:30311712
vspre833:30321513
pythonptprofiler:30281270
vshan820:30294714
pythondataviewer:30285071
vscus158:30321503
pythonvsuse255:30319631
vscorehov:30309549
vscod805cf:30301675

Type: Bug

right click on any .md files and will find duplicate "open preview" items.

Extension version: 2.2.5
VS Code version: Code 1.72.0 (Universal) (64bbfbf67ada9953918d72e1df2f4d8e537d340e, 2022-10-04T23:21:58.256Z)
OS version: Darwin arm64 21.3.0
Modes:
Sandboxed: No

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscorecescf:30445987
pythondataviewer:30285071
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593cf:30376535
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
2144e591:30553903
pyindex848:30577860
nodejswelcome1:30583747
40g7c324:30573242

Hi, I'm on the VS Code team. I noticed that your extension uses the vscode.previewHtml command which is deprecated and which we are actively working to remove: microsoft/vscode#62630

We've developed a webview API that provides a much better developer experience and offers a number of important security and compatibility benefits over previewHtml. We cannot fix previewHtml without breaking backwards compatibility, and have instead opted to remove it.

To ensure that your extension continues to work properly in VS Code, please try upgrading to use the new Webview API. You can find documentation on the API usage here. Let me know if you have any questions or concerns about this migration

Issue Type: Bug

Math formulas were not rendered and syntax coloring was not applied to code blocks in Markdown preview (Ctrl-Shift-V). Extension bisect identified "searking.preview-vscode" as cause of the problem.

Extension version: 2.2.5
VS Code version: Code 1.64.0 (5554b12acf27056905806867f251c859323ff7e9, 2022-02-03T04:22:20.678Z)
OS version: Windows_NT x64 10.0.19044
Restricted Mode: No

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythonvspyl392cf:30425750
pythontb:30283811
pythonptprofiler:30281270
vsdfh931:30280409
vshan820:30294714
vstes263:30335439
pythondataviewer:30285071
vscod805:30301674
pythonvspyt200:30340761
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593:30376534
vsc1dst:30433059
pythonvs932:30410667
wslgetstartedc:30433508
vs360cf:30404996
vsclayoutctrt:30425946
vsrem710:30416614

Is there any way to make this extension not bind -k for the preview? This messes with the existing (default) ctrl-k (delete to end of line). Since -k is used for this, it'd be really nice on a Mac at least to not have it hijack ctrl-k as well.

Any ideas?

I just installed the extension and completed the following steps:

• Opened an HTML file
• Opened the Preview in a new tab
• Split the view to see two tabs at once
• Dragged the Preview tab to the other view so both Editor and Preview are visible at once

In the extension's settings both of the following settings are toggled true:

• Preview > Preview: Scroll Editor With Preview
• Preview > Preview: Scroll Preview With Editor

However, neither the Editor scrolls with the Preview nor vice versa.

Some projects are using RST files without having sphinx documentation in them, so they do not have any conf.py. On all of these the extension is choking with something like:

Error
Command failed: /Users/ssbarnea/.pyenv/shims/python -m sphinx -b html . "~/.cache/rst"

Sphinx error:
master file /Users/ssbarnea/c/opendev/ansible-role-collect-logs/docs/source/index.rst not found

Error: Command failed: /Users/ssbarnea/.pyenv/shims/python -m sphinx -b html . "~/.cache/rst"

Sphinx error:
master file /Users/ssbarnea/c/opendev/ansible-role-collect-logs/docs/source/index.rst not found

	at ChildProcess.exithandler (child_process.js:308:12)
	at ChildProcess.emit (events.js:203:13)
	at maybeClose (internal/child_process.js:1021:16)
	at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)


Sphinx error:
master file /Users/ssbarnea/c/opendev/ansible-role-collect-logs/docs/source/index.rst not found

That is a simple repository with a README.rst in its root.

When a file with spaces in the path, it is by the command line seen as multiple arguments by docutils.
If a space is added to the path it only gives the following message:

try rst2html of doctutils failed, please check python and doctuils environment, we use a simple preview instead ^-)

This can easily be solved by the following change

For example in docutilsUtil.ts
return ShellUtil.execPromisLike([ command, fileName ].join(" "));

should be changed into

return ShellUtil.execPromisLike([ command, "\""+fileName+"\"" ].join(" "));

I do not know where this change has to occur for everything to work correctly

Type: Bug

There should not be two buttons. This describes the issue perfectly.
https://stackoverflow.com/questions/77010794

Extension version: 2.2.5
VS Code version: Code 1.81.1 (6c3e3dba23e8fadc360aed75ce363ba185c49794, 2023-08-09T22:22:42.175Z)
OS version: Windows_NT x64 10.0.22621
Modes:

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
pythonvs932:30410667
py29gd2263:30856252
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
pynewext54:30695312
azure-dev_surveyone:30548225
282f8724:30602487
89544117:30613380
showlangstatbar:30737416
03d35959:30757346
7ij38806:30736111
pythonfmttext:30731395
fixshowwlkth:30771522
showindicator:30805244
pythongtdpath:30769146
i26e3531:30792625
pythonnosmt12:30797651
pythonidxpt:30805730
pythonnoceb:30805159
copilotsettingc:30859502
synctok:30821570
dsvsc013:30795093
dsvsc014:30804076
diffeditorv1:30821571
dsvsc015:30845448
pythonmypyd1:30859726
pythoncet00cf:30859750
h48ei257:30863626
pythontbext0:30864172

It's hard to see clearly on the "code" block, as below:

How to change the background color of code block?

Just trying preview. Is it suppose to render embedded mermaid diagrams or just mermaid files?

v 1.1.1 does not show the diagram embedded in markdown file.

https://github.com/searKing/preview-vscode/blob/master/src/manager/reStructuredTextDocumentContentManager.ts#L86

and

https://github.com/searKing/preview-vscode/blob/master/src/manager/reStructuredTextDocumentContentManager.ts#L88

and

https://github.com/searKing/preview-vscode/blob/master/README.md#L36

has same typo , instead of docutils it is written as doctuils

Hi friend,
I'm desperately looking for a plugin, which will allow me to simply visualize a reference to an image.

I have to build a huge database.
Similar to Json, but in JS.
Do you have an idea if a plugin that would allow me to visualize a local image in a frames exists?

I took the time to make a small image to show my need.
I will be really happy if, through your experience, you will have a small plugin that will allow this feature.
I would like to see a local image when my mouse passes over a link that references a local image.

Preview
http://imgbox.com/sHLBF4kF

Do you have an idea if your plugin can do something similar, or know you a plugin that could have this feature?

Thank you very much for your help.

Hi, perfect tool... I have a problem, when is installed the preview ext the syntax in .pug file are disable.
Like this:

when need to be like this:

Looks like the short-hand notation for class-assignment doesn't work with the vscode preview plugin...

Code:

graph TD
    direction TB
    classDef subnet color:#000,fill:#fff,stroke:#F58536,stroke-width:2px,stroke-dasharray:6;

    subgraph public-us-east-1a["us-east-1a"]::subnet
       ec21["<img class='Icon' src='https://icon.icepanel.io/AWS/svg/Compute/EC2.svg' /> EC2a"]
    end

Error:

Parse error on line 5:
...ast-1a["us-east-1a"]::subnet           
-----------------------^
Expecting 'SEMI', 'NEWLINE', 'EOF', got 'COLON'

It's drawing this without the short-hand:

I am aware there are other ways of assigning styles, such as:

   class public-us-east-1a subnet;

Which looks like this:

Of course... thats an entire line of code..... vs just 2x characters (:) and the name of the style pre-defined.

加粗里面有括号紧邻貌似不能被解析. 斜体也如此.

When running python from a virtualenv, Preview will complain it can't find pygments for code-blocks highlights, even if pygments is actually installed in the virtualenv packages.
Funny things is that it will throw me a docutils error if i don't install it in my virtualenv folder.

It's great to have the same extension for multiple file support but it would be nice to be able to search in the preview pane like the HTML preview extension does.

Also it would be nice if I double click on a sentence on the preview pane to be redirected to the corresponding line in the original file.

Thanks!

Why your Preview doesn't support task lists?
http://take.ms/fee0H

when i edit and preview a html and a markdown file, very often, I get a message:
Unable to open '\Preview: 't.html'': Cannot read property 'document' of undefined.
and then I can not preview anymore, I must close vscode and restart vscode.

Issue Type: Bug

The viewer stop to do preview of an document and after try restart preview by close window and then click the button of preview, not happening.

Extension version: 2.0.3
VS Code version: Code 1.39.2 (6ab598523be7a800d7f3eb4d92d7ab9a66069390, 2019-10-15T15:33:40.634Z)
OS version: Linux x64 5.0.0-32-generic

Hello! Some image hostings have a feature to generate code for markdown code. Mononsnap can make it too. I have, for example, such code:
![Alt text](https://monosnap.com/file/jEyRhdmYFQ2AoGCDy0webIJ1NeqInJ.png)

But if I paste such code into VSC and open preview panel I have such image:

The image doesn't upload. I think it's because it's a not direct link on an image (if I open a link on the image I redirecting to another URL).

But such code doesn;t work only your preview plugin. This code works in Github, works in other online services.

Can you fix it?

Thanks!

Example:

<style>
    DIV {
        height: 100px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div>This should be vertically centered.</div>

Hello 👋 I'm from the VS Code team.

Recently, we have been exploring a security feature we refer to as Workspace Trust. This feature is intended to centralize and unify a security conscious decision required by a variety of VS Code features. With workspace trust, the user will be able to declare whether or not they trust the folder that is opened in VS Code before these features are executed.

Why you should care

We want to make sure that those users have a delightful experience with workspace trust and that includes extension authors deciding how much of their extension is supported in an untrusted workspace. Custom editors are special in that if they cannot at least render in an untrusted state then they will be replaced by a lightweight message telling the user to enable trust. This means that users of your extension will not be able to see their editors and there may even be cases of data loss.

Workspace Trust experience

You can enable the feature with the following setting security.workspace.trust.enabled. Once enabled, you will see the following dialog when opening folders in VS Code.

This dialog is important for allowing the user to make a decision early and understand the impact of their decision. Once you understand the feature, you may want to customize when to display the dialog using the setting security.workspace.trust.startupPrompt.

You can follow the development of Workspace Trust and provide feedback in issue #106488.

Workspace trust API

First off, all of what I am about to say can be found in issue #120251. That issue will include discussion of the feature and any updates to the feature.

The Workspace Trust extension API is now in stable. This allowed us to release the first cut of our guide for onboarding your extension to Workspace Trust. The API is small, so here is a quick look.

You can declare your extension to provide complete, partial or no support in untrusted workspaces using the untrustedWorkspaces capability in package.json.

The following example declares that the extension is supported completely in untrusted workspaces. In this case, the extension is enabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": true
  }
}

The next example declares that the extension is not supported in untrusted workspaces. In this case, the extension is disabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": false
  }
}

The third option is to declared limited support. There are three tools provided to you when you select the limited option.

First, if you have a setting that can be configured in the workspace but requires the workspace to be trusted in order to apply the workspace value, then you can include the setting using restrictedConfigurations array property in untrustedWorkspaces object. Doing so, VS Code will ignore the workspace value of these restricted settings when your extension reads these settings values using the VS Code Workspace Configuration API.

The following example declares the settings that are restricted in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": "limited",
    "restrictedConfigurations": [
      "markdown.styles"
    ]
  }
}

Next, you can also check and listen if the current workspace is trusted or not programmatically using the following API:

export namespace workspace {
  /**
   * When true, the user has explicitly trusted the contents of the workspace.
   */
  export const isTrusted: boolean;
  /**
   * Event that fires when the current workspace has been trusted.
   */
  export const onDidGrantWorkspaceTrust: Event<void>;
}

Lastly, you can hide commands or views declaratively with the isWorkspaceTrusted context key in your when clauses.

A far more detailed guide on how to onboard which will be updated as we receive feedback can be found in issue #120251.

Rollout plan

We are planning on enabling this by default in the near future (most likely next release). To prepare for that day, we want to work with you to allow your editor to work seamlessly alongside the trusted workspace experience

Our Asks

The main features that should work for custom editors in an untrusted folder is rendering, viewing, and saving (if applicable). After renewing your codebase, I believe that your extension does certain things that can be dangerous if the folder contents are malicious therefore I believe that limited is the best option.

Please let me know if you have any question or would like to meet up via voice chat as I would be happy to assist you in getting your extension ready for workspace trust!

Is the MarkDown side preview does not update automatically when updating the file, I have to close it and reopen.

I am on debian stretch and have the python docutils installed. The extension is searching for rst2html.py but on my system it is named just rst2html without the .py extension.

By the way, the error message has a typo: doctuils->docutils

Thanks for providing the extension

More of our MD files are changing to MDX, but there's no previewer in VS Code for MDX. Thanks!

Use case viewing an HTML file built by rust-doc in a remote-SSH session. So there's no build-task configured (though I could do one I guess).

Anyhow, open index.html, open live preview, asks for file type, tell it HTML/Jade, get this error:

Active editor doesn't show a HTML or Jade document - no properties to preview.

Current vscode and preview-vscode.

Preview is not working for .pug files.

preview window always scroll to the top. (when I preview .md file)
would it remember its scrollbar position?
thank you!

win7 pro

Doesn't open preview

• VSCode Version: 1.3.0-insider
• OS Version: Windows 10

-- Sorry for the English, I used Google Translator --

I can not use Markdown preview, after installing the extension. It does not work with the preview of the extension, or with the preview of native VSCode - Insider.

"Ctrl + k v " or "Command Palette" does not work.

I installed preview to do editing the technical rst documentation on vscode. However, the rendered code block is too hard to see .. like this:

How about using other highlighting format?

Not yet activated
Messages (2)
Cannot register 'markdown.styles'. This property is already registered.
Cannot register 'markdown.links.openLocation'. This property is already registered.

This appeared after loading VSC and going to the Extensions view

Hey guys, is there any way to have a html/pug file with relative css?
I have a pug file with this

link(rel="stylesheet", href="css/main.css", data-inline)

or

style.
  include main.css

but the CSS is not being rendered or imported.
Thanks!

Issue

I press "Ctrl+K, V" for previewing a .rst file. But I got a window with only this message:
No Active editor - no properties to preview.

Software Versions

vscode: 1.11.2
preview-vscoe: 1.1.5
OS: Windows 10 64-bit ver. 1703 and CentOS 7

I have a blog post to describe the different previewing approaches used in three extensions that support reStructuredText,

https://blog.lextudio.com/2016/07/update-on-restructuredtext-and-visual-studio-code/

rst2mdown is the simplest approach, but it gives the most unpredictable result, compared to the other two.

Of course, some users might not really want the most accurate result, so your extension can be quite useful for them.

Type: Bug

Tested on both release and insiders builds, release throws error, while insiders is right.

Clean install macOS Sonoma 14.1.1
Install homebrew using standard command
brew install visual-studio-code
Extensions: Disable All Installed Extensions (although none are installed at this point), install [email protected] only
Open Output and select Shared
Output shows:

[error] [uncaught exception in sharedProcess]: Event not found: onDidChange: CodeExpectedError: Event not found: onDidChange
    at Object.listen (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:45:4960)
    at E.t (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:44:251)
    at E.q (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:43:4371)
    at y.value (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:43:3602)
    at d.y (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:38:1902)
    at d.z (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:38:1972)
    at d.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:38:2188)
    at MessagePortMain.fe (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/node/sharedProcess/sharedProcessMain.js:36:30382)
    at MessagePortMain.emit (node:events:514:28)
    at Object.emit (node:electron/js2c/utility_init:2:2285)

Preview version: 2.3.0
VS Code version: Code 1.87.2
版本: 1.87.2
提交: 863d2581ecda6849923a2118d93a088b0745d9d6
日期: 2024-03-08T15:20:57.520Z
Electron: 27.3.2
ElectronBuildId: 26836302
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Darwin arm64 23.1.0

HI !
I think this ext is amazing.but I found a litter bug , it can preview the original image from the local or internet , when i deal with the image like using python zoom in or out ,it can't preview ,and tell me the can't preview the binary file.but I can view the image using the windows tools .

Hello from the VS Code team! 👋

Thanks for working on support for web sessions of vscode! When I try to install this on github.dev, I see an error in activation due to not being able to find https://searking.vscode-unpkg.net/searKing/preview-vscode/2.2.4/extension/dist/browser/extension.js, which indeed does not exist. I see that you have webpack config for web set up so it's not clear to me what isn't working correctly here.

Closing the file being previewed keeps the preview opened.
I'd prefer the preview being closed together with the source tab.

I'm testing this extension ir order to can preview the .rst files, but although I can see files of the markdown type, the same thing does not happen with reStructuredText files:

My OS is Antergos Linux:

OS: Arch Linux
Kernel: x86_64 Linux 4.17.6-1-ARCH
Uptime: 15h 24m
Packages: 1434
Shell: zsh 5.5.1
Resolution: 1920x1080
DE: Deepin 15.6
WM: Deepin WM
WM Theme: Materia-light-compact
GTK Theme: Materia-light-compact [GTK2/3]
Icon Theme: Halo
CPU: Intel Core i7-4720HQ @ 8x 3.6GHz [64.0°C]
GPU: GeForce GTX 960M
RAM: 8452MiB / 15932MiB

And VSCode:

Versión: 1.25.1
Confirmación: 1dfc5e557209371715f655691b1235b6b26a06be
Fecha: 2018-07-11T15:40:20.190Z
Electron: 1.7.12
Chrome: 58.0.3029.110
Node.js: 7.9.0
V8: 5.8.283.38
Arquitectura: x64

The default keybinding cmd+k to clear the integrated terminal when the terminal is in focus does not work as expected if Preview extension is enabled.

To reproduce:

1. Enable Preview
2. Open integrated terminal
3. Type a couple of commands
4. Press cmd+k
5. "(cmd+K) was pressed. Waiting for second key of cord..." shows in the status bar.

Disabling Preview fixes the issue.

• Preview Version: 1.4.2
• VSCode Version: 1.18.1
• OS Version: MacOS Sierra

I use VSC on MacOS 10.11
For opening Preview to the side, I use ⌘K V and can't use ⌃K V
but for opening context menu (where I can determine a type of preview) I only can use ⌃K V and can't use ⌘K V
Can you set up a single hotkey for making it features?

Which Mermaid formats are supported to preview?

I have found only plain text file with .mermaid extension. Official file extension .mmd does not work.

Would be possible to add suport for Markdown fenced code?
`` `````mermaid

• Issue Type: Performance
• Extension Name: preview-vscode
• Extension Version: 2.2.5
• OS Version: Windows_NT x64 10.0.19044
• VS Code version: 1.69.2

⚠️ Make sure to attach this file from your home-directory:
⚠️file:///c%3A/Users/Andrea/AppData/Local/Temp/searKing.preview-vscode-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

It would be great to have the copy button on the code blocks like on GitHub: