Markdown Components

Wuzi

•

January 2020, 1

•

18 min read

Markdown Components

Aside

Icon

<Aside title="Amazon Icon" icon="amazon">
  This is an amazon icon example, which can contain any content.
</Aside>
<Aside title="Apple Icon" icon="apple">
  This is an apple icon example, which can contain any content.
</Aside>
<Aside title="Google Icon" icon="google">
  This is a google icon example, which can contain any content.
</Aside>

Preview

Variant

<Aside title="Default" variant="default">
  This is a default aside example, which can contain any content.
</Aside>
<Aside title="Note" variant="note">
  This is a note aside example, which can contain any content.
</Aside>
<Aside title="Tip" variant="tip">
  This is a tip aside example, which can contain any content.
</Aside>
<Aside title="Important" variant="important">
  This is an important aside example, which can contain any content.
</Aside>
<Aside title="Warning" variant="warning">
  This is a warning aside example, which can contain any content.
</Aside>
<Aside title="Caution" variant="caution">
  This is a caution aside example, which can contain any content.
</Aside>

Preview

Badge

<div class="flex gap-2">
  <Badge text="Default Badge" />
  <Badge text="Note Badge" variant="note" icon="note" />
  <Badge text="Tip Badge" variant="tip" icon="tip" />
  <Badge text="Important Badge" variant="important" icon="important" />
  <Badge text="Warning Badge" variant="warning" icon="warning" />
  <Badge text="Caution Badge" variant="caution" icon="caution" />
</div>

Preview

Default Badge Note Badge Tip Badge Important Badge Warning Badge Caution Badge

Icon

<div class="flex gap-2">
  <Badge text="Amazon Badge" icon="amazon" />
  <Badge text="Apple Badge" icon="apple" />
  <Badge text="Google Badge" icon="google" />
</div>

Preview

Amazon Badge Apple Badge Google Badge

Variant

<div class="flex gap-2">
  <Badge text="Default Badge" variant="default" />
  <Badge text="Note Badge" variant="note" />
  <Badge text="Tip Badge" variant="tip" />
  <Badge text="Important Badge" variant="important" />
  <Badge text="Warning Badge" variant="warning" />
  <Badge text="Caution Badge" variant="caution" />
</div>

Preview

Default Badge Note Badge Tip Badge Important Badge Warning Badge Caution Badge

Card

Base Card

Icon

<Card title="Amazon Card" icon="amazon">
  This is an amazon card example, which can contain any content.
</Card>
<Card title="Apple Card" icon="apple">
  This is an apple card example, which can contain any content.
</Card>
<Card title="Google Card" icon="google">
  This is a google card example, which can contain any content.
</Card>

Preview

Amazon Card

This is an amazon card example, which can contain any content.

Apple Card

This is an apple card example, which can contain any content.

Google Card

This is a google card example, which can contain any content.

Icon

<LinkCard
  href="https://www.amazon.com"
  title="Open Amazon"
  description="Click here to open Amazon"
  icon="amazon"
/>
<LinkCard
  href="https://www.apple.com"
  title="Open Apple"
  description="Click here to open Apple"
  icon="apple"
/>
<LinkCard
  href="https://www.google.com"
  title="Open Google"
  description="Click here to open Google"
  icon="google"
/>

Preview

Variant

<div class="flex flex-col gap-4">
  <LinkCard
    href="/blog/markdown-example"
    title="Default"
    description="Use the default link card"
    variant="default"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Note"
    description="Use the note link card"
    variant="note"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Tip"
    description="Use the tip link card"
    variant="tip"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Important"
    description="Use the important link card"
    variant="important"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Warning"
    description="Use the warning link card"
    variant="warning"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Caution"
    description="Use the caution link card"
    variant="caution"
  />
</div>

Preview

Card Grid

Code Block

Add title to code block

```ts title=hello.ts
console.log("Hello world!");
```

Preview

hello.ts
console.log("Hello world!");

Highlight certain text

```ts "console"
console.log("Hello");
console.log("world!");
```

Preview

console.log("Hello world!");
console.log("world!");

Highlight certain lines

```ts {3, 5-7}
import { MarkdownInstance } from "astro";


export const formatDate = (pubDate: string) => {
  var options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};


  return new Date(pubDate).toLocaleDateString('en-US', options);
}


export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}
```

Preview

import { MarkdownInstance } from "astro";


export const formatDate = (pubDate: string) => {
  var options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};


  return new Date(pubDate).toLocaleDateString('en-US', options);
}


export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}

Add or delete certain lines

```ts ins={3, 5-7} del={6-8, 17-22}
import { MarkdownInstance } from "astro";


export const formatDate = (pubDate: string) => {
  var options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};


  return new Date(pubDate).toLocaleDateString('en-US', options);
}


export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}
```

Preview

import { MarkdownInstance } from "astro";


export const formatDate = (pubDate: string) => {
  var options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};


  return new Date(pubDate).toLocaleDateString('en-US', options);
}


export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}

Show line numbers

```ts showLineNumbers
console.log("Hello");
console.log("world!");
```

Preview

console.log("Hello world!");
console.log("world!");

Collapse certain lines

```ts collapse={4-6}
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}
```

Preview

export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
3 collapsed lines
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}

Case summary

```tsx title=file.tsx "return" "React" showLineNumbers collapse={2-6} ins={15-20, 27-32} del={35-40, 47-52}
const binaryStringToArray = (binaryString: string | undefined) => {
  if (!binaryString) {
    return [];
  }


  return binaryString.split("").map((char) => parseInt(char, 10));
};




const IChingIcon = ({ base, value }: IconProps) => {
  const valueArray = binaryStringToArray(value);


  return (
    <svg
      key={value}
      fill="none"
      height={base ? "24" : "48"}
      viewBox={base ? "0 0 24 24" : "0 0 24 48"}
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      {valueArray.map((value, index) => {
        if (value === 0) {
          return (
            <React.Fragment key={index}>
              <rect
                key={`left-${index}`}
                fill="currentColor"
                height="4"
                width="10"
                x="0"
                y={8 * index + 2}
              />
              <rect
                key={`right-${index}`}
                fill="currentColor"
                height="4"
                width="10"
                x="14"
                y={8 * index + 2}
              />
            </React.Fragment>
          );
        } else {
          return (
            <rect
              key={index}
              fill="#FF0000"
              height="4"
              width="24"
              x="0"
              y={8 * index + 2}
            />
          );
        }
      })}
    </svg>
  );
};
```

Preview

file.tsx
const binaryStringToArray = (binaryString: string | undefined) => {
5 collapsed lines
  if (!binaryString) {
    return [];
  }


  return binaryString.split("").map((char) => parseInt(char, 10));
};




const IChingIcon = ({ base, value }: IconProps) => {
  const valueArray = binaryStringToArray(value);


  return (
    <svg
      key={value}
      fill="none"
      height={base ? "24" : "48"}
      viewBox={base ? "0 0 24 24" : "0 0 24 48"}
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      {valueArray.map((value, index) => {
        if (value === 0) {
          return (
            <React.Fragment key={index}>
              <rect
                key={`left-${index}`}
                fill="currentColor"
                height="4"
                width="10"
                x="0"
                y={8 * index + 2}
              />
              <rect
                key={`right-${index}`}
                fill="currentColor"
                height="4"
                width="10"
                x="14"
                y={8 * index + 2}
              />
            </React.Fragment>
          );
        } else {
          return (
            <rect
              key={index}
              fill="#FF0000"
              height="4"
              width="24"
              x="0"
              y={8 * index + 2}
            />
          );
        }
      })}
    </svg>
  );
};

File Tree

Steps

<Steps>
  <Step number={1} title="Base Step">
    <Card title="Base Card">
      This is a base card example, which can contain any content.
    </Card>
  </Step>
  <Step number={2} title="Note Step" variant="note">
    <Card title="Note Card" icon="note" variant="note">
      This is a note card example, which can contain any content.
    </Card>
  </Step>
  <Step number={3} title="Tip Step" variant="tip">
    <Card title="Tip Card" icon="tip" variant="tip">
      This is a tip card example, which can contain any content.
    </Card>
  </Step>
  <Step number={4} title="Important Step" variant="important">
    <Card title="Important Card" icon="important" variant="important">
      This is an important card example, which can contain any content.
    </Card>
  </Step>
  <Step number={5} title="Warning Step" variant="warning">
    <Card title="Warning Card" icon="warning" variant="warning">
      This is a warning card example, which can contain any content.
    </Card>
  </Step>
  <Step number={6} title="Danger Step" variant="caution">
    <Card title="Danger Card" icon="caution" variant="caution">
      This is a danger card example, which can contain any content.
    </Card>
  </Step>
</Steps>

Preview

1

Base Step

Base Card

This is a base card example, which can contain any content.

2

Note Step

Note Card

This is a note card example, which can contain any content.

3

Tip Step

Tip Card

This is a tip card example, which can contain any content.

4

Important Step

Important Card

This is an important card example, which can contain any content.

5

Warning Step

Warning Card

This is a warning card example, which can contain any content.

6

Danger Step

Danger Card

This is a danger card example, which can contain any content.

Icon

<Steps>
  <Step number={1} title="Amazon Step" icon="amazon">
    This is a step using the Amazon icon.
  </Step>
  <Step number={2} title="Apple Step" icon="apple">
    This is a step using the Apple icon.
  </Step>
  <Step number={3} title="Google Step" icon="google">
    This is a step using the Google icon.
  </Step>
</Steps>

Preview

Amazon Step

This is a step using the Amazon icon.

Apple Step

This is a step using the Apple icon.

Google Step

This is a step using the Google icon.

Variant

<Steps>
  <Step number={1} title="Default Step" variant="default">
    This is a default step.
  </Step>
  <Step number={2} title="Note Step" variant="note">
    This is a note step.
  </Step>
  <Step number={3} title="Tip Step" variant="tip">
    This is a tip step.
  </Step>
  <Step number={4} title="Important Step" variant="important">
    This is an important step.
  </Step>
  <Step number={5} title="Warning Step" variant="warning">
    This is a warning step.
  </Step>
  <Step number={6} title="Danger Step" variant="caution">
    This is a danger step.
  </Step>
</Steps>

Preview

1

Default Step

This is a default step.

2

Note Step

This is a note step.

3

Tip Step

This is a tip step.

4

Important Step

This is an important step.

5

Warning Step

This is a warning step.

6

Danger Step

This is a danger step.

TabGroup

<TabGroup>
  <TabHeader label="Base Tab" slot="header" />
  <TabHeader label="Note Tab" slot="header" icon="note" variant="note" />
  <TabHeader label="Tip Tab" slot="header" icon="tip" variant="tip" />
  <TabHeader label="Important Tab" slot="header" icon="important" variant="important" />
  <TabHeader label="Warning Tab" slot="header" icon="warning" variant="warning" />
  <TabHeader label="Danger Tab" slot="header" icon="caution" variant="caution" />


  <TabContent label="Base Tab" slot="content">
    <Card title="Base Card">
      This is a base card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Note Tab" slot="content">
    <Card title="Note Card" icon="note" variant="note">
      This is a note card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Tip Tab" slot="content">
    <Card title="Tip Card" icon="tip" variant="tip">
      This is a tip card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Important Tab" slot="content">
    <Card title="Important Card" icon="important" variant="important">
      This is an important card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Warning Tab" slot="content">
    <Card title="Warning Card" icon="warning" variant="warning">
      This is a warning card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Danger Tab" slot="content">
    <Card title="Danger Card" icon="caution" variant="caution">
      This is a danger card example, which can contain any content.
    </Card>
  </TabContent>
</TabGroup>

Preview

Icon

<TabGroup>
  <TabHeader label="Amazon Tab" slot="header" icon="amazon" />
  <TabHeader label="Apple Tab" slot="header" icon="apple" />
  <TabHeader label="Google Tab" slot="header" icon="google" />


  <TabContent label="Amazon Tab" slot="content">
    <Card title="Amazon Card" icon="amazon">
      This is a step using the Amazon icon.
    </Card>
  </TabContent>
  <TabContent label="Apple Tab" slot="content">
    <Card title="Apple Card" icon="apple">
      This is a step using the Apple icon.
    </Card>
  </TabContent>
  <TabContent label="Google Tab" slot="content">
    <Card title="Google Card" icon="google">
      This is a step using the Google icon.
    </Card>
  </TabContent>
</TabGroup>

Preview

Variant

<TabGroup>
  <TabHeader label="Default Tab" slot="header" variant="default" />
  <TabHeader label="Note Tab" slot="header" variant="note" />
  <TabHeader label="Tip Tab" slot="header" variant="tip" />
  <TabHeader label="Important Tab" slot="header" variant="important" />
  <TabHeader label="Warning Tab" slot="header" variant="warning" />
  <TabHeader label="Danger Tab" slot="header" variant="caution" />


  <TabContent label="Default Tab" slot="content">
    <Card title="Default Card" variant="default">
      This is a default card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Note Tab" slot="content">
    <Card title="Note Card" variant="note">
      This is a note card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Tip Tab" slot="content">
    <Card title="Tip Card" variant="tip">
      This is a tip card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Important Tab" slot="content">
    <Card title="Important Card" variant="important">
      This is an important card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Warning Tab" slot="content">
    <Card title="Warning Card" variant="warning">
      This is a warning card example, which can contain any content.
    </Card>
  </TabContent>
  <TabContent label="Danger Tab" slot="content">
    <Card title="Danger Card" variant="caution">
      This is a danger card example, which can contain any content.
    </Card>
  </TabContent>
</TabGroup>

Preview

Share to X