Asides, tabs and cards

Callouts work in any Markdown file. Everything else on this page needs the file to be .mdx, so it can import components.

Asides

Three colons, a type, the text, three colons:

:::note
Notes are for things worth knowing.
:::

Tabs

For the same instruction on different systems:

npm install

pnpm install

yarn

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs syncKey="pkg">
  <TabItem label="npm">`npm install`</TabItem>
  <TabItem label="pnpm">`pnpm install`</TabItem>
</Tabs>

syncKey keeps every tab group with the same key on the same choice, so a reader who picks pnpm once sees pnpm everywhere.

Steps

Wrap an ordered list in <Steps> for numbered instructions:

Create the site.
Terminal window
```
one9x pages create mydocs
```
Add ONE9X_SITE and ONE9X_TOKEN to the repository.
Push to main.

Cards

Short blocks of related content.

In a grid

CardGrid lays them out two to a row on wide screens.

File trees

Directorysrc/
- Directorycontent/
  - Directorydocs/
    index.mdx
    Directorywriting/
    pages.md
astro.config.mjs

Code blocks

Add a title, highlight lines, or mark changes:

export default defineConfig({
  integrations: [
    starlight({ title: 'My Project' }),
  ],
});

title: 'Docs Template',
title: 'My Project',

Deployed on One9x Pages