Table of Contents

1. How to use them
2. 1. Alert
3. 2. ImageCode
4. 3. Video
5. 4. Youtube
6. 5. Bilibili
7. 6. Spotify
8. 7. Steam
9. 8. CRT
10. Practical suggestions

Currently available shortcodes:

• Alert
• ImageCode
• Video
• Youtube
• Bilibili
• Steam
• Spotify
• CRT

How to use them

In MDX, these components are already injected through ExtendMarkdown.astro, so you can write them directly like this:

1
<Alert type="note">Hello</Alert>

No extra import is required.

1. Alert

Renders a GitHub-style alert block.

Props

Example

1
<Alert type="note">
2
This is a note.
3
</Alert>
4

5
<Alert type="warning">
6
This is a warning.
7
</Alert>

Notes

• Content is passed through the default slot.
• If type is omitted, note is used.

2. ImageCode

Renders an image with a set of combinable style classes.

Props

Example

1
<ImageCode
2
  url="/images/example.png"
3
  alt="Example image"
4
  no_hover="true"
5
/>
6

7
<ImageCode
8
  url="/images/original.png"
9
  url_min="/images/preview.png"
10
  alt="Clickable preview"
11
  full="true"
12
/>

Notes

• solid only has an effect when spoiler is enabled.
• When url_min is present, the component renders a linked preview image pointing to url.
• Layout flags like full, full_bleed, start, and end are best used intentionally rather than all together.

3. Video

Renders a local or remote video and supports most of the same presentation classes as ImageCode.

Props

Example

1
<Video
2
  url="/videos/demo.webm"
3
  alt="Demo video"
4
  controls="true"
5
/>
6

7
<Video
8
  url="/videos/hero.webm"
9
  full_bleed="true"
10
  autoplay="true"
11
  muted="true"
12
  loop="true"
13
  playsinline="true"
14
/>

Notes

• The component passes url directly to <video src> and does not infer formats.
• solid only matters when spoiler is enabled.
• Unlike ImageCode, Video does not support url_min or no_hover.

4. Youtube

Embeds a YouTube video using the youtube-nocookie.com domain.

Props

Example

1
<Youtube id="0Da8ZhKcNKQ" />
2

3
<Youtube id="0Da8ZhKcNKQ" autoplay="true" start={30} />

Notes

• The embed URL format is https://www.youtube-nocookie.com/embed/<id>.
• Query parameters are only appended when corresponding props are provided.

5. Bilibili

Embeds the Bilibili player.

Props

Example

1
<Bilibili bvid="BV1yt4y1Q7SS" />
2

3
<Bilibili
4
  bvid="BV1yt4y1Q7SS"
5
  page={2}
6
  autoplay="true"
7
/>

Notes

• The component builds a URL like //player.bilibili.com/player.html?....
• It always appends isOutside=true.
• All ID props are technically optional, but in practice you should usually provide at least bvid or aid.

6. Spotify

Embeds Spotify content such as albums, playlists, tracks, shows, and episodes.

Props

Example

1
<Spotify album="5gDJVilnZpPt8zwBC467UH" />
2

3
<Spotify type="track" id="11dFghVXANMlKmJXsNCbNl" />
4

5
<Spotify playlist="37i9dQZF1DXcBWIGoYBM5M" height={480} />

Notes

• You can pass props in two ways:
  • shorthand: album="...", track="...", etc.
  • generic: type="album" id="..."
• If both are present, shorthand props take priority.
• If neither shorthand props nor a valid type + id pair is provided, the component throws an error.
• Default height:
  • track → 152
  • all other types → 352

7. Steam

Displays a Steam store card.

Props

Example

1
<Steam appid="1127400" />
2

3
<Steam appid="730" variant="vertical" />

Notes

• The component builds:
  • Store URL: https://store.steampowered.com/app/<appid>/
  • Horizontal image: header.jpg
  • Vertical image: library_600x900_2x.jpg
• In vertical mode, the media container gets a fixed width of 200px.
• It does not call the Steam API; it only constructs URLs from the given appid.

8. CRT

Renders a CRT-styled code container.

Props

Example

1
<CRT code={`
2
Hello, CRT
3
`} />
4

5
<CRT
6
  no_scanlines="true"
7
  code={`
8
No scanlines here
9
`}
10
/>

Notes

• If code starts with a newline, the component strips that first newline for cleaner multiline template usage.
• When no_scanlines is false, the component also adds the scanlines class.

Practical suggestions

Media

• Need a preview image that links to the original: use ImageCode with url_min
• Need spoiler masking: use spoiler, and add solid for a stronger effect
• Need a full-width image inside the content column: use full
• Need content that breaks beyond the column: use full_bleed

Embeds

• YouTube: pass id
• Bilibili: prefer bvid
• Spotify: prefer shorthand props like album="..."
• Steam: pass appid, then choose variant based on layout needs

Alerts and presentation

• Use Alert for callouts
• Use CRT for retro terminal-styled code
• Use normal Markdown code fences for regular syntax-highlighted code unless you specifically want the CRT look