Demo funkcji Starlight

Witamy w demo funkcji Starlight! Ta strona prezentuje wszystkie potężne komponenty MDX i funkcje dostępne w Starlight. Nowe

Wyróżnienia i adnotacje

Starlight zapewnia różne typy wyróżnień do podkreślania ważnych informacji:

Bloki kodu

Podstawowe podświetlanie składni

// To jest przykład JavaScript
function greet(name) {
  const message = `Cześć, ${name}!`;
  console.log(message);
  return message; // Ta linia jest podświetlona jako dodana
  // return null; // Ta linia jest podświetlona jako usunięta
}

Wiele języków

// Nowoczesny JavaScript
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error('Błąd:', error);
  }
};

// TypeScript z typami
interface User {
  id: number;
  name: string;
  email: string;
}

const fetchData = async (url: string): Promise<User[]> => {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error('Błąd:', error);
    return [];
  }
};

# Przykład Python
import asyncio
import aiohttp

async def fetch_data(url: str) -> dict:
    async with aiohttp.ClientSession() as session:
        async with session.get(url) as response:
            return await response.json()

Numerowanie linii i podświetlanie

#!/bin/bash
# Skrypt wdrożenia
npm run build
npm run test
npm run deploy
echo "Wdrożenie ukończone!"

Karty komponentów

Funkcja pierwsza

Buduj szybko z nowoczesnymi narzędziami i frameworkami.

Funkcja druga

Piękne, dostępne komponenty od razu po instalacji.

Funkcja trzecia

Pisz treści w MDX z pełnym wsparciem dla komponentów.

Funkcja czwarta

Wysoko konfigurowalne z minimalną konfiguracją.

Karty linków

Dowiedz się więcej o Starlight Eksploruj oficjalną dokumentację Starlight dla zaawansowanych funkcji.

Komponent drzewa plików

Foldersrc/
- Foldercomponents/
  - Header.astro
  - Footer.astro
  - Button.tsx (podświetlone)
- Foldercontent/
  - Folderdocs/
    Folderen/
    getting-started.mdx
    demo.mdx
    Folderpl/
    getting-started.mdx
    demo.mdx
- Folderpages/
  - index.astro
  - Folderapi/
    […slug].ts
package.json
astro.config.mjs
README.md (opcjonalne)

Przewodniki krok po kroku

Zainstaluj zależności
Okno terminala
```
npm install @astrojs/starlight
```

Skonfiguruj Astro Dodaj Starlight do swojego astro.config.mjs:

import starlight from '@astrojs/starlight';

export default {
  integrations: [starlight({
    title: 'Moja dokumentacja',
  })],
};

Stwórz treść Dodaj pliki MDX do src/content/pl/
Wdróż Zbuduj i wdróż swoją stronę dokumentacji

Tabele

Funkcja	Opis	Status
Wsparcie MDX	Pisz treści z komponentami	Stabilne
i18n	Wsparcie wielu języków	Stabilne
Wyszukiwanie	Wbudowana funkcjonalność wyszukiwania	Beta
Tryb ciemny	Automatyczne przełączanie motywów	Stabilne

Ikony i odznaki

Starlight zawiera wiele wbudowanych ikon:

GitHub Uruchom Ulubione Dokumentacja

I różne style odznak:

Domyślna Notatka Wskazówka Uwaga Niebezpieczeństwo Sukces

Details/Summary (zawartość zwijana)

Kliknij, aby rozwinąć zaawansowaną konfigurację

// Zaawansowana konfiguracja Starlight
export default {
  integrations: [
    starlight({
      title: 'Moja dokumentacja',
      social: {
        github: 'https://github.com/yourusername/yourrepo',
        twitter: 'https://twitter.com/yourusername',
      },
      sidebar: [
        {
          label: 'Przewodniki',
          autogenerate: { directory: 'guides' },
        },
        {
          label: 'Referencje',
          autogenerate: { directory: 'reference' },
        },
      ],
      customCss: ['./src/styles/custom.css'],
    }),
  ],
};

Wsparcie matematyki (jeśli włączone)

Starlight może wspierać wyrażenia matematyczne gdy jest odpowiednio skonfigurowany:

Matematyka w linii: $E = mc^2$

Matematyka blokowa:

$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

Praktyczne przykłady dla programistów

Schemat odpowiedzi API

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "Jan Kowalski",
        "email": "jan@example.com",
        "roles": ["admin", "developer"]
      }
    ],
    "pagination": {
      "page": 1,
      "limit": 10,
      "total": 100
    }
  },
  "timestamp": "2024-01-15T10:30:00Z"
}

Konfiguracja Docker

FROM node:18-alpine
WORKDIR /app
# Skopiuj i zainstaluj zależności
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Elementy interaktywne

Podsumowanie

To demo pokazuje moc i elastyczność możliwości MDX w Starlight. Możesz tworzyć bogate, interaktywne dokumentacje, które pomagają programistom zrozumieć i efektywnie używać twoje projekty.

Zobacz źródło Zobacz kod źródłowy MDX tej strony demo

Dokumentacja Starlight Dowiedz się więcej o wszystkich dostępnych funkcjach