Home

Convert Markdown Image to HTML in VS Code

Make a bulk conversion of markdown images to HTML strings using a regex find and replace with VS Code.

There are times when the syntax for an image in markdown may not be enough to generate the HTML you desire.

The cases for this can vary significantly, but are often born from wanting additional HTML attributes that your markdown processor does not support and that may not make sense to manually build into the processor.

Example: Adding a Class

Consider the case of adding a class to your image. While there are markdown processors out there that support classes, let’s assume you’re not using one of these. And you want to add a border class to your image.

Your markdown code looks something like this:

![My Image](/path/to/image.jpg)

But what you want is this:

<img src="/path/to/image.jpg" alt="My Image" class="border" />

Bulk Replace with VS Code

Making changes like this manually is fine when there are a select few cases. But when you want to make a change like this on a broader scale, it can quickly become a tiresome process.

However, VS Code has a find and replace feature in which you can use regex to find and replace content in your code. And you can do this within a single file or across multiple files.

Markdown Image Regex Replace

The regex to target markdown images is this:

^!\[([\w\d\s']+)\]\(([\w\d\-\.\/]+)\)

And that will be replaced with this string:

<img src="$2" alt="$1" />

The reason this works is because the parentheses in the regex code become groups that can be used when replacing the content. The first group ($1) is the alt text, which is the content inside the square brackets. And the second group ($2) is the path to the image, which is found inside the parentheses in the markdown syntax.

VS Code Preview

This is what it looks like:

Use VS Code find and replace feature target markdown images with regex and turn them into HTML strings

Here is a brief explanations about the annotations:

  1. Trigger to open the Find and Replace panel.
  2. The find regex value. This doesn’t work properly without #5 below.
  3. HTML string with the regex groups that will be the replace value.
  4. Tells VS Code to do a case-sensitive find, which I prefer for more control over the results.
  5. Tells VS Code to use regex for the find query. Otherwise, it assumes a plain text string.
  6. (optional) Target a specific group of files. Here we’re saying anything within the posts directory.
  7. Preview of results.

When you’re ready to make the change, you can click the icon below #5 (to the right of the replace value) and confirm that you wish to make the changes.

Git Bonus!

And because you’re making changes to local files, if you’re tracking changes with Git, you get a second chance to look to see everything was right before committing.

Let's Connect

Keep Reading

Generate Random Markdown Files with Node

When writing some script or program that works with markdown files, it's nice to not have to generate them manually. Here's a script to get the job done for you.

Oct 07, 2021

Export Bear Notes to Markdown Files

Bear is one of the best editors out there, but lacks workflows for your content. Here's how to programmatically write Bear notes to local markdown files.

Jun 16, 2021

Decreased Jekyll Build Times 5x with a Custom Asset Pipeline

My team and I ditched the jekyll-assets gem for a homegrown asset pipeline and decreased build times by a factor of five. This is how we did it.

Jan 10, 2019