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.)
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