Custom Notes

Using Asides

Asides is a component we can use to create custom notes.

I use Asides to present important information.

Importing Asides in the mdx file

After the frontmatter of the mdx file, add the following import:

import { Aside } from '@astrojs/starlight/components';

Creating notes with custom titles

Note

This is a note with a custom title.

<Aside type="note" title="Note">
  This is a note with a custom title.
</Aside>

Tip

This is a tip with a custom title.

<Aside type="tip" title="Tip">
  This is a tip with a custom title.
</Aside>

Attention!

This is a caution with a custom title.

<Aside type="caution" title="Attention!">
  This is a caution with a custom title.
</Aside>

Danger!

This is a danger with a custom title.

<Aside type="danger" title="Danger!">
  This is a danger with a custom title.
</Aside>

Adding code

We can add code and other markdown details inside an Aside.

Attention!

We can add code and other details using the following structure:

import { Aside } from '@astrojs/starlight/components';

We can also highlight a piece of information.

We can add Links and Highlight information.

<Aside type="caution" title="Attention!">
  We can add code and other details using the following structure:

  //put the ```js here
  import { Aside } from '@astrojs/starlight/components';
  //put the 3 closing backticks here

  We can also `highlight` a piece of information.

  We can add [Links]() and <span style="color: red">Highlight</span> information.
</Aside>

Adding custom icons

We can use custom icons available in Starlight

Tip!

This is an example of a tip for C# code.

Console.WriteLine("Hello World");

<Aside type="note" title="Tip!" icon="seti:c-sharp">
    This is an example of a tip for C# code.

    //```csharp
    Console.WriteLine("Hello World");
    //``
</Aside>