Fri Jul 12 2024

438 words · 4 minutes

Using mdx in Frosti

Table of Contents

Preface Link to Preface

This article describes how to use the components provided by Frosti in mdx to realize the functions that can’t be realized by normal md.

Main text Link to Main text

Getting started Link to Getting started

First you need to create an mdx file, which is as simple as changing the extension to .mdx.

Introducing Link to Introducing

The components provided by Frosti are placed in the /mdx folders. Write something under the document properties (frontmatter):

MDX

import Collapse from "../../components/mdx/Collapse.astro";
import Diff from "../../components/mdx/Diff.astro";
import Error from "../../components/mdx/Error.astro";
import Info from "../../components/mdx/Info.astro";
import Kbd from "../../components/mdx/Kbd.astro";
import Success from "../../components/mdx/Success.astro";
import Warning from "../../components/mdx/Warning.astro";
import TimeLine from "../../components/mdx/TimeLine.astro";
import LinkCard from "../../components/mdx/LinkCard.astro";

Example Link to Example

Collapse Link to Collapse

This is an example text.

This is the hidden content!

MDX

1
2
3

<Collapse title="This is an example text.">
  This is the hidden content!
</Collapse>

Diff Link to Diff

MDX

<Diff r="/image/r.png" l="/image/l.png" />

Error Link to Error

Maybe something went wrong?

MDX

<Error>Maybe something went wrong? </Error>

Warning Link to Warning

Hey! Watch out for potholes!

MDX

<Warning>Hey! Watch out for potholes! </Warning>

Message Link to Message

It’s just a message.

MDX

<Info>It's just a message. </Info>

Success Link to Success

Congratulations on your successful deployment!

MDX

<Success>Congratulations on your successful deployment! </Success>

Kbd Link to Kbd

Ctrl + C to copy the text.

MDX

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.

TimeLine Link to TimeLine

1984
First Macintosh computer
iMac
1998
2001
iPod
iPhone
2007
2015
Apple Watch

MDX

<TimeLine
  items={[
    { year: "1984", event: "First Macintosh computer" },
    { year: "1998", event: "iMac" },
    { year: "2001", event: "iPod" },
    { year: "2007", event: "iPhone" },
    { year: "2015", event: "Apple Watch" },
  ]}
/>

LinkCard Link to LinkCard

Frosti

My blog project!

Learn more

MDX

<LinkCard
  title="Frosti"
  desc="My blog project!"
  url="https://github.com/EveSunMaple/Frosti"
  img="/view.png"
/>

Thanks for reading!