mirror of
https://github.com/prdlk/website.git
synced 2026-08-02 17:31:41 +00:00
136 lines
2.5 KiB
Markdown
136 lines
2.5 KiB
Markdown
---
|
|||
|
|
title: "Markdown Admonitions"
|
||
|
|
description: "This post showcases using the markdown admonition feature in Astro Cactus"
|
||
|
|
publishDate: "25 Aug 2024"
|
||
|
|
updatedDate: "4 July 2025"
|
||
|
|
tags: ["markdown", "admonitions"]
|
||
|
|
---
|
||
|
|
|
||
|
|
## What are admonitions
|
||
|
|
|
||
|
|
Admonitions (also known as “asides”) are useful for providing supportive and/or supplementary information related to your content.
|
||
|
|
|
||
|
|
## How to use them
|
||
|
|
|
||
|
|
To use admonitions in Astro Cactus, wrap your Markdown content in a pair of triple colons `:::`. The first pair should also include the type of admonition you want to use.
|
||
|
|
|
||
|
|
For example, with the following Markdown:
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::note
|
||
|
|
Highlights information that users should take into account, even when skimming.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
Outputs:
|
||
|
|
|
||
|
|
:::note
|
||
|
|
Highlights information that users should take into account, even when skimming.
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Admonition Types
|
||
|
|
|
||
|
|
The following admonitions are currently supported:
|
||
|
|
|
||
|
|
- `note`
|
||
|
|
- `tip`
|
||
|
|
- `important`
|
||
|
|
- `warning`
|
||
|
|
- `caution`
|
||
|
|
|
||
|
|
### Note
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::note
|
||
|
|
Highlights information that users should take into account, even when skimming.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
:::note
|
||
|
|
Highlights information that users should take into account, even when skimming.
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Tip
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::tip
|
||
|
|
Optional information to help a user be more successful.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
:::tip
|
||
|
|
Optional information to help a user be more successful.
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Important
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::important
|
||
|
|
Crucial information necessary for users to succeed.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
:::important
|
||
|
|
Crucial information necessary for users to succeed.
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Caution
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::caution
|
||
|
|
Negative potential consequences of an action.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
:::caution
|
||
|
|
Negative potential consequences of an action.
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Warning
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::warning
|
||
|
|
Critical content demanding immediate user attention due to potential risks.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
:::warning
|
||
|
|
Critical content demanding immediate user attention due to potential risks.
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Customising the admonition title
|
||
|
|
|
||
|
|
You can customise the admonition title using the following markup:
|
||
|
|
|
||
|
|
```md
|
||
|
|
:::note[My custom title]
|
||
|
|
This is a note with a custom title.
|
||
|
|
:::
|
||
|
|
```
|
||
|
|
|
||
|
|
Outputs:
|
||
|
|
|
||
|
|
:::note[My custom title]
|
||
|
|
This is a note with a custom title.
|
||
|
|
:::
|
||
|
|
|
||
|
|
## GitHub Repository Cards
|
||
|
|
|
||
|
|
You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.
|
||
|
|
|
||
|
|
::github{repo="chrismwilliams/astro-theme-cactus"}
|
||
|
|
|
||
|
|
You can also link a Github user:
|
||
|
|
|
||
|
|
::github{user="withastro"}
|
||
|
|
|
||
|
|
To use this feature you just use the "Github" directive:
|
||
|
|
|
||
|
|
```markdown title="Linking a repo"
|
||
|
|
::github{repo="chrismwilliams/astro-theme-cactus"}
|
||
|
|
```
|
||
|
|
|
||
|
|
```markdown title="Linking a user"
|
||
|
|
::github{user="withastro"}
|
||
|
|
```
|