XhaniのBlog

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.

Fabrizz/MMM-OnSpotify

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

1
::github{repo="saicaca/fuwari"}

Mermaid Diagrams#

Fenced mermaid blocks are rendered as diagrams and follow the active color scheme.

flowchart LR
    accTitle: Markdown rendering pipeline
    accDescr: Markdown source is transformed into semantic HTML and then enhanced as a themed SVG diagram.
    A[Markdown source] --> B[Astro content pipeline]
    B --> C[Semantic HTML]
    C --> D[Themed diagram]

Admonitions#

Following types of admonitions are supported: note tip important warning caution

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.

1
The content :spoiler[is hidden **ayyy**]!

Image Widths and Captions#

A standalone image accepts an optional w-N% width token in its alt text and a Markdown title rendered as a centered caption below the image:

1
![Image description w-50%](./image.webp "Visible caption")

Valid widths range from w-1% to w-100%; invalid tokens stay in the alt text. The width and the caption are independent — a title alone also produces a caption: