Skip to content
Starlight Template

Example Guide

Example content for the Starlight components get from the Starlight documentation.

Examples

Code block

Terminal window
npm create astro@latest -- --template starlight
Installing dependencies…
npm install
example.jsx
import { Code } from '@astrojs/starlight/components';


export const exampleCode = `console.log('This could come from a file or CMS!');`;
export const fileName = 'example.js';
export const highlights = ['file', 'CMS'];


<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />>
line-markers.js
function demo() {
  console.log('this line is marked as deleted');
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line');


  return 'this line uses the neutral default marker type';
}
function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Cards

Check this out

Interesting content you want to highlight.

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

Tabs

Sirius, Vega, Betelgeuse
Customizing Starlight Learn how to make your Starlight site your own with custom styles, fonts, and more.
Authoring Markdown
Components

Asides

File Tree

  • astro.config.mjs an important file
  • package.json
  • README.md
  • Directorysrc
    • Directorycomponents
      • Header.astro
    • …
  • Directorypages/
    • …

Steps

  1. Import the component into your MDX file:

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

  2. Wrap <Steps> around your ordered list items.

Icons

You can find more icons in the Starlight documentation.