Fancy Markdown Syntax For Vite

Came across many cool implementations from Anthony Fu’s posts. Hence this note as a collection of the syntaxes for future reference.

Insert Script #

<PhotoGalleryHighlights />

First Father's Day

Pet Parents Club

Pet Donation

Close encounter with F15SG

Sky Diving

Night Vibes

Adding Figure #

<figure>
  <img src="/images/syntax1.png" alt="Progressive as Stairs" border="~ base rounded-xl"/>
  <figcaption text-center>Adding script</figcaption>
</figure>

Quote #

> {@TkDodo|Dominik Dorfmeister} had [a great talk about API Design](https://tkdodo.eu/blog/react-query-api-design-lessons-learned), which mentions an interesting inequality that descripting this: ["Breaking Changes !== Marketing Event"](https://tkdodo.eu/blog/react-query-api-design-lessons-learned?page=30)

Dominik Dorfmeister had a great talk about API Design, which mentions an interesting inequality that descripting this: "Breaking Changes !== Marketing Event"

> 这里我很喜欢 [<span i-carbon-music /> Jony J 的《山脚》](https://music.163.com/#/song?id=1886366521) 中所描述的感觉，有兴趣的话可以去听听。

这里我很喜欢 Jony J 的《山脚》 中所描述的感觉，有兴趣的话可以去听听。

Adding a Tweet #

<Tweet h-650px>
<p lang="en" dir="ltr">Do you like Magic Move in Keynote for code?<a href="https://twitter.com/antfu7?ref_src=twsrc%5Etfw">@antfu7</a> and I are cooking something 😎 <a href="https://t.co/9JxjCzRA1S">pic.twitter.com/9JxjCzRA1S</a></p>&mdash; Eduardo.𝚟𝚞𝚎 (@posva) <a href="https://twitter.com/posva/status/1619083357756821504?ref_src=twsrc%5Etfw">January 27, 2023</a>
</Tweet>