Starlight Examples

Markdown Basics

let example = "hello";

let example = "hello";

Asides can be used in .md and .mdx files

Starlight’s custom aside syntax looks like this:

:::note
A note aside
:::

… to create this:

Import a component into an .mdx file in Starlight like this:

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

<Card title="Check this out">Interesting content you want to highlight.</Card>

… which results in this:

Check this out

Interesting content you want to highlight.

Learn more about icons

Components can also contain nested content.

Overview
This is a custom callout

This is a custom callout

This embed requires all of YouTube’s surveillance scripts to load

See the Pen JS Color Array by Owen Mundy (@owenmundy) on CodePen.

Expand this

Content, only when you need it.

A Tutorial is a practical activity, in which the student learns by doing something meaningful, towards some achievable goal.
How-to guides lead a user through a specific task they want to accomplish, often with a sequence of steps. Writing a good guide requires thinking about what your users are trying to do.
Reference pages are ideal for outlining how things work in terse and clear terms. Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you’re documenting.
An Explanation provides context and background.