This article introduces extended Markdown features, including syntax examples and rendered previews.
Examples are taken from Retypeset.
Figure Captions
To create automatic figure captions, use the standard Markdown image syntax . To hide the caption, add an underscore _ before the alt text or leave the alt text empty.
Syntax
Output
Admonition Blocks
To create admonition blocks, use the GitHub syntax > [!TYPE] or the container directive :::type. The following types are supported: note, tip, important, warning, and caution.
Syntax
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
:::warning
Urgent info that needs immediate user attention to avoid problems.
:::
:::caution
Advises about risks or negative outcomes of certain actions.
:::
:::note[YOUR CUSTOM TITLE]
This is a note with a custom title.
:::
Output
Useful information that users should know, even when skimming content.
Helpful advice for doing things better or more easily.
Key information users need to know to achieve their goal.
Urgent info that needs immediate user attention to avoid problems.
Advises about risks or negative outcomes of certain actions.
This is a note with a custom title.
Collapsible Sections
To create collapsible sections, use the container directive syntax :::fold[title]. Click the title to expand or collapse.
Syntax
:::fold[Usage Tips]
Content that may not interest all readers can be placed in a collapsible section.
:::
Output
Usage Tips
Content that may not interest all readers can be placed in a collapsible section.
Mermaid Diagrams
To create Mermaid diagrams, wrap Mermaid syntax in code blocks and specify the language type as mermaid.
Syntax
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
Output
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;Galleries
To create image galleries, use the container directive :::gallery. Scroll horizontally to view more images.
Syntax
:::gallery
:::
Output
GitHub Repositories
To embed GitHub repositories, use the leaf directive ::github{repo="owner/repo"}.
Syntax
::github{repo="radishzzz/astro-theme-retypeset"}
Output
Loading repository data...
Videos
To embed videos, use the leaf directive ::youtube{id="video-id"}.
Syntax
::youtube{id="9pP0pIgP2kE"}
::bilibili{id="BV1sK4y1Z7KG"}
Output
Spotify
To embed Spotify content, use the leaf directive ::spotify{url="spotify-url"}.
Syntax
::spotify{url="https://open.spotify.com/track/0HYAsQwJIO6FLqpyTeD3l6"}
::spotify{url="https://open.spotify.com/album/03QiFOKDh6xMiSTkOnsmMG"}
Output
Tweets
To embed tweets, use the leaf directive ::tweet{url="tweet-url"}.
Syntax
::tweet{url="https://x.com/hachi_08/status/1906456524337123549"}
Output
CodePen
To embed CodePen demos, use the leaf directive ::codepen{url="codepen-url"}.
Syntax
::codepen{url="https://codepen.io/jh3y/pen/NWdNMBJ"}
Output
NetEase Cloud Music
Use the double-colon syntax ::netease{type="song" id="song id"} to embed a NetEase Cloud Music player. You can also use a boolean value to control whether autoplay is enabled.
Syntax
::netease{type="song" id="1406633327" autostart="false"}
Preview
(Autoplay is disabled for this demo card.)
Unordered List
-
First-level unordered list
-
Second-level unordered list
- Third-level unordered list
-
Ordered List
-
First-level ordered list
-
Second-level ordered list
- Third-level ordered list
-
Nested Task List
-
First-level task
-
Second-level task
- Third-level task
-
-
Completed task