2 min read
VSCode Regex

Markdown is a great way to write content. But sometimes you need to convert markdown from one specific format to another.

I ran into the problem of notion using the html aside tag. This option is great for notion, but not for vitepress. Vitepress uses the a specific syntax for callouts, which are based on three colons :::.

This is an example of a callout in vitepress:

::: info
Important Definition
:::

This was the output of exporting the markdown content from notion:

<aside>
Important Definition
</aside>

The solution to quickly convert the html aside tag to the vitepress callout is to use the search feature in vscode.

⌘ + F to open the search panel. Then click the regex icon (it will show up activated in blue as in the screenshot.)

vscode search replace regex

Then add the following regex:

  • Search: <aside>(.*[\s\S\n]+?)</aside>
  • Replace: ::: info $1 :::

Then you can replace all the content in the file with the new callout syntax. Defining the search regex with the <aside>(.*[\s\S\n]+?)</aside> part allows you to capture the content inside the aside tag.

Then by adding the $1 to the replace part, you can insert the captured content into the new callout syntax.

You can apply this concept for any wrapper tag you want to convert to a specific syntax. This is especially useful when using markup languages such as html, markdown, or even latex.

Cheers, Mark