How to include image as Markdown in Visual Studio Code? - visual-studio-code

How can I include an image from the same destination folder as of the document as Markdown in Visual Studio Code?
I tried this, but it didn't work:
![Getting Started](./2/to/img.jpg)

If the image is in the same directory as the Markdown file, you can use either:
![Getting Started](./img.jpg)
![Getting Started](img.jpg)
For a workspace layout like:
docs/
images/
img.jpg
README.md
In README.md, this would be either:
![Getting Started](./images/img.jpg)
![Getting Started](images/img.jpg)

Question is old, however, I found a very nice plugin within visual studio code
Paste Image
As the plugin suggests you can paste the image onto markdown file by pressing ctrl(cmd) + Alt +V.
Or
Open command palate pressing ctrl(cmd) + shift + p and select paste image. In the background the plugin creates a image file with date/time and puts reference on the markdown.

If you are here because the images would not render in vscode preview, here's my solution:
<img src="./2/to/img.jpg" alt="Getting started" />
Markdown accepts HTML syntax, so this just works also.

Instead of this Process you can just drag the image from the file and to include in the Readme.md just click Shift + release It Will be generated Automatically.

Well if the pic is from the internet
I think this code will work ![Getting Started](link to access the image)

If the image isn't rendering, in VSC it needs an extra line after the line where the image is instantiated, in other words it can't be an end of file. I do not see this requirement in other markdown editors.

Pasting images seems to be currently in experimental phase on VSCode.
According to this, you can set the following configuration options on your personal settings to enable it.
"markdown.experimental.editor.pasteLinks.enabled": true,
"editor.experimental.pasteActions.enabled": true
My test run of it worked perfectly pasting a screen capture, but it seems there's currently no setings as on where the file will be saved or its name. It defaults to saving on the current folder with "image.png" name.

Related

VScode "linkedEditing" not working for php files

I want to be able to easily edit HTML tags together. There is a built-in option for this in Visual Studio Code.
It works fine for HTML files. Buy why not for php files?
Does anybody know a work-around?
For example, let's say I wanted to change this div into a section. It should automatically select both opening tag and the closing tag.
Assuming you have html inside a PHP file. The simplest solution would be:
double click the element to edit
Holding control key double click the closing element ( open and close elements should be highlighted now)
type to edit the element
For now VS Code doesn't handle PHP with editor.linkedEditing.
But you can install Auto Tag Rename extension which will work for PHP files as well.
The extension will ignore certain file types if editor.linkedEditing = true, so you can install it without any conflicts.

Issue viewing source files in doxygen

I'm using Doxyfile 1.8.17, and decompiling an Android app, with apktool, and also unzipping the APK to view some files in there too with Doxygen. I've managed to pull only what I need using EXCLUDE_PATHS. SOURCE_BROWSER is set to YES. My problem is whenever I go to click on the file in File List, I just get a link to go to the source code of the file. When I click it, it opens the source code in the right plane. I would like to just click the left plane and view the source code instantly in the right plane, however, there doesn't seem to be an option to change the behaviour. In the html output folder there is two types of files. foo.html and foo_source.html. This is the same for every file that you pull from INPUT sources. I just want it to show me foo_source.html and nothing else. Is this possible?

How to enable this Visual Studio Code vertical line?

This line appears when typing.
Screenshot of the image from an online video below.
Those are referred to as "diff decorations". You can control them by opening up your settings and searching for "diffDecorations".
You'll want to verify that scm.diffDecorations is set to either all or gutter. Additionally, as mentioned in the comments, you'll need to be using an SCM tool.

VSTS WIki Using HTML Img Tag

Because I wanted to be able to re-size images in markdown I've been using the HTML img and specifying the desired width/height.
I'm referencing the image using a relative path, so for example for markdown in the same directory as an images folder I'd write:
<img src="./Images/MyImage.png" width="600">
This has all worked fine using Visual Studio Code but when the markdown is pushed to the VSTS Wiki it isn't rendering the image.
Is this a bug or is the img tag not supported?
You can use the following syntax to resize them (see =WIDTHxHEIGHT at the end):
Notice though that the syntax to support image resizing is only supported in pull requests and the Wiki.
![Image alt text]($/project/folder/_img/markdown-guidance/image.png =WIDTHxHEIGHT)
So for your use case I would use (in your markdown files):
![Image alt text](./Images/MyImage.png =600x)
Please refer to the following documentation for images in markdown.
https://learn.microsoft.com/en-us/vsts/project/wiki/markdown-guidance?view=vsts#images
The Wiki of course support the standard HTML syntax. Please see this blog for details.
Q : This has all worked fine using Visual Studio Code but when the
markdown is pushed to the VSTS Wiki it isn't rendering the image.
The
The root cause is that you used a relative path, <img src="./Images/MyImage.png" width="600">, the image can be found on you local machine. So you can see the image when open the markdown file in Visual Studio Code locally.
However when you pushed to the VSTS, the path is changed. So it cannot find the image for rendering the image in Wiki. You need to capture the link address (URL) for the image, then use the URL in img tag like this:
<img src="https://xxx.visualstudio.com/f081441f-c072-4ed5-9407-85683e9b0888/_apis/git/repositories/e291904f-4668-4fba-8575-3f67898e3058/Items?path=%2Ftest%2F0116-workspace.png" width="600">

display full phth of file in netbeanse IDE

I want to display full file path in my netbeanse IDE in toolbar I have seen this in PC I tried a lot but is is not displaying
I don't want to just display I want to copy direct file path from there
Uploading a snap for understanding what I want
Thanks in advance
Netbeanse giving this functionality I know but forgot that how to enable this
Alt + Shift + L will copy the path of the currently active file to clipboard. You can then paste this in any where else. I use this regularly and know it works.
If you want to show the path of the file in the toolbar location like in the image you have uploaded above, you may have to write your own plugin. Here are a couple of plugins that do this already.
path tools
show path in title