Test: Alle markdown-komponenter

Overskrift nivå 1

Dette er en introduksjon til testinnlegget. Her ser vi hvordan fet tekst og kursiv tekst ser ut i brødtekst. Vi kan også kombinere dem: fet og kursiv samtidig.

Overskrift nivå 2

En vanlig paragraf med litt mer tekst. Som CTO i en startup lærer man raskt at gode teknologivalg handler like mye om teamet som om teknologien. Her er en lenke til TanStack Start som vi bruker.

Overskrift nivå 3

Noen ganger trenger man tre nivåer av overskrifter for å strukturere innholdet godt.

Lister

Uordnet liste

• Første punkt i listen
• Andre punkt med litt mer tekst for å se hvordan det bryter over flere linjer når innholdet er langt nok
• Tredje punkt
  • Nestet punkt
  • Enda et nestet punkt

Ordnet liste

1. Velg riktig teknologi for teamet
2. Start med det enkleste som fungerer
3. Iterer basert på faktisk bruk
4. Optimaliser når du har data

Sitat

Prematur optimalisering er roten til alt ondt. — Donald Knuth

Et enkelt sitat med én linje:

Den beste koden er den du aldri trengte å skrive.

Kode

Inline-kode ser slik ut: const greeting = "Hei verden" midt i en setning.

Her er en kodeblokk:

interface BlogPost {
  title: string;
  description: string;
  date: string;
  tags: string[];
  draft: boolean;
}

async function getAllPosts(): Promise<BlogPost[]> {
  const files = fs.readdirSync(POSTS_DIR);
  return files
    .filter((f) => f.endsWith(".md"))
    .map((f) => parseFrontmatter(f))
    .sort((a, b) => (a.date > b.date ? -1 : 1));
}

Og en kort en:

bun run build

Bilder

Bilder vises ikke i denne testen siden vi ikke har lagt inn noen ennå, men de ville hatt avrundede hjørner og full bredde.

Horisontal linje

Innhold over linjen.

---

Innhold under linjen.

Tabell

Teknologi	Bruksområde	Vurdering
Bun	Runtime	Rask og enkel
TanStack Start	SSG/SSR	Fleksibel routing
Tailwind CSS	Styling	Produktiv
unified	Markdown	Kraftig pipeline

Blanding av elementer

Her er en paragraf som inneholder fet tekst, kursiv, inline kode, og en lenke til noe interessant. Alt dette i én setning.

Noen ganger trenger man en liste etter en paragraf:

1. Første steg — sett opp prosjektet med bun create
2. Andre steg — konfigurer routing og innholdspipeline
3. Tredje steg — deploy til produksjon

Merk: Dette er et sitat med fet tekst inni, noe som er vanlig i teknisk dokumentasjon.

Og til slutt en kodeblokk etter et sitat:

{
  "name": "blog",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build"
  }
}

Egendefinert komponent

Det var alle de vanligste komponentene. Ser bra ut?