gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

chore(docs): add 'spoiler' example to Markdown syntax example

Browse source
This commit is contained in:
草师傅 2025-06-08 22:33:20 +08:00
parent fd3b47fa91
commit 2f415f9c8f
1 changed files with 31 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/content/posts/markdown-example/index.mdx
View file

@ -6,6 +6,7 @@ tags: ["markdown", "css", "html", "sample"]
---
import Callout from '/src/components/shortcodes/Callout.astro';
import LinkCard from '/src/components/shortcodes/LinkCard.astro';
import Spoiler from '/src/components/shortcodes/Spoiler.astro';
This article offers a sample of basic and extended Markdown formatting that can be used, also it shows how some basic HTML elements are decorated.
@ -21,6 +22,30 @@ your content here...
</ExampleShortcode>
```
### Spoiler
Inspired by the spoiler in [Moegirl wiki](https://zh.moegirl.org.cn/Mainpage), you can use the `Spoiler` component to hide content that you want to reveal later. This is useful for spoilers in game plots , movies plots, or any other content where you want to keep certain information hidden until the user chooses to reveal it.
To reveal the content, readers can hover over the text to reveal it.
<Spoiler>
A hot take: the theme is done through what is called 'vibe coding'.
</Spoiler>
```mdx
<Spoiler>
A hot take: the theme is done through what is called 'vibe coding'.
</Spoiler>
```
You can also display a 'tip' for the reader when hovered:
<Spoiler tip='attention is all you need'>
A hot take: the theme is done through what is called 'vibe coding'.
</Spoiler>
```mdx
<Spoiler tip='attention is all you need'>
A hot take: the theme is done through what is called 'vibe coding'.
</Spoiler>
```
### Callouts
You can use callouts to highlight important information or warnings in your content. Callouts are styled boxes that draw attention to specific parts of the text.
<Callout icon='💁' type="info">
@ -46,12 +71,17 @@ You can use callouts to highlight important information or warnings in your cont
```
### LinkCard
You can use the `LinkCard` component to create cards that link to external resources or pages. This is useful for showcasing projects, documentation, or any other relevant links.
<LinkCard url="https://astro.build"/>
```mdx
<LinkCard url="https://astro.build"/>
```
<Callout type="warning">
On a machine with bad network, this will significantly increase build time when no other params are passed to the component.
</Callout>
Or to customize the card further with a title and description:
<LinkCard url="https://www.bilibili.com/video/BV1PC4y1L7mq/" title="Don't check the description" description="Don't click on the link" />
## Headings
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
@ -92,7 +122,7 @@ The blockquote element represents content that is quoted from another source, op
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
Tables aren't part of the core Markdown spec, but Astro supports supports them out-of-the-box.
| Name | Age |
| ----- | --- |