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

feat: add ruby helper shortcode

Browse source
This commit is contained in:
草师傅 2025-06-12 20:35:32 +08:00
parent a2d594b393
commit d5d025e011
2 changed files with 21 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/shortcodes/Ruby.astro Normal file
View file

@ -0,0 +1,6 @@
---
const { text, ruby } = Astro.props;
---
<ruby>
{text} <rp>(</rp><rt>{ruby}</rt><rp>)</rp>
</ruby>

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

@ -7,6 +7,7 @@ tags: ["markdown", "css", "html", "sample"]
import Callout from '/src/components/shortcodes/Callout.astro'; import Callout from '/src/components/shortcodes/Callout.astro';
import LinkCard from '/src/components/shortcodes/LinkCard.astro'; import LinkCard from '/src/components/shortcodes/LinkCard.astro';
import Spoiler from '/src/components/shortcodes/Spoiler.astro'; import Spoiler from '/src/components/shortcodes/Spoiler.astro';
import Ruby from '/src/components/shortcodes/Ruby.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. 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.
## Markdown in Astro ## Markdown in Astro
@ -52,6 +53,17 @@ You can also display a 'tip' for the reader when hovered:
</Spoiler> </Spoiler>
``` ```
### Ruby
The `Ruby` component allows you to quickly add ruby annotations to your text, which is useful for providing pronunciation or additional information about certain words, especially in East Asian languages.
<Ruby text="汉" ruby="han" />
<Ruby text="字" ruby="zi" />
```mdx
<Ruby text="汉" ruby="han" />
<Ruby text="字" ruby="zi" />
```
### Callouts ### 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. 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"> <Callout icon='💁' type="info">
@ -88,6 +100,9 @@ You can use the `LinkCard` component to create cards that link to external resou
Or to customize the card further with a title and description: 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" /> <LinkCard url="https://www.bilibili.com/video/BV1PC4y1L7mq/" title="Don't check the description" description="Don't click on the link" />
## Headings ## Headings
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest. The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.