VS Code tips: file comparison & Markdown image links

In this article, we’re going to learn about the two features of VS Code. One is the active file comparison and the other is effortlessly creating the image links in the markdown files for documentation.

Compare two active files in VS Code

  1. Open the two files of the same file format that you want to compare. The format can be any, like Markdown, Java, and Python.
  2. Open the command palette by pressing Ctrl+Shift+P on your keyboard.
  3. Type Compare Active file.
  4. Select File: Compare Active File With…
    compare active file
  5. Select the file to compare with.

You’ll see the comparison between the two selected files opened in the VS Code.

Easily add an image URL in the Markdown file

  1. Drag and drop the image. An automated URL with alt text will be generated, like this: ![alt text](../../../images/abc/def/image-name.png).
  2. Edit the alt text.
  3. Replace ../../../ with {static}.

The new image URL will be like ![Edited alt text]({static}/images/abc/def/image-name.png). This is the required URL.

In the following line, you can also add something like this: {: .lightbox #image8 }. But I think we hardly use it.

Note: The Markdown file and image file must belong to the same project.

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments