Zum Inhalt springen

Markdown

Markdown wird häufig verwendet, um textlastige Inhalte wie Blog-Beiträge und Dokumentationen zu erstellen. Astro bietet eine integrierte Unterstützung von Markdown-Dateien, die auch Frontmatter YAML beinhalten können, um Metadaten wie Titel, Beschreibung oder Tags zu definieren.

Mit der @astrojs/mdx-Integration installiert, unterstützt Astro auch MDX-Dateien (.mdx) mit einigen zusätzlichen Funktionen wie der Verwendung von JavaScript-Ausdrücken und Astro-Komponenten direkt in deinem Markdown.

Verwende einen oder beide Dateitypen, um deinen Markdown-Inhalt zu schreiben!

Markdown- und MDX-Seiten

Abschnitt betitelt Markdown- und MDX-Seiten

Content-Sammlungen

Abschnitt betitelt Content-Sammlungen

Du kannst deine Markdown- und MDX-Dateien in deinem Astro-Projekt in einem speziellen src/content/-Verzeichnis verwalten. Content-Sammlungen helfen dir, deinen Content zu verwalten, das Frontmatter zu validieren und sorgen für automatische TypeScript-Typensicherheit, während du mit deinem Content arbeitest.

  • Directorysrc/content/
    • Directorynewsletter/
      • week-1.md
      • week-2.md
    • Directoryauthors/
      • grace-hopper.md
      • alan-turing.md

Mehr über die Verwendung von Content-Sammlungen in Astro findest du hier.

Dateibasiertes Routing

Abschnitt betitelt Dateibasiertes Routing

Astro behandelt jede .md-Datei im /src/pages-Verzeichnis als eine Seite. Wenn du eine Datei in diesem Verzeichnis oder einem beliebigen Unterverzeichnis ablegst, wird automatisch eine Seitenroute erstellt, die den Pfadnamen der Datei verwendet.

src/pages/page-1.md
---
title: Hallo, Welt
---


# Hi!


Diese Markdown-Datei erstellt eine Seite für `your-domain.com/page-1/`


Sie ist wahrscheinlich nicht besonders gestaltet, obwohl Markdown folgendes unterstützt:
- **fett** und _kursiv._
- Listen
- [Links](https://astro.build)
- und mehr!
Lies mehr über das dateibasierte Routing von Astro oder über die Möglichkeiten, dynamische Routen zu erstellen.

Markdown-Features

Abschnitt betitelt Markdown-Features

Astro bietet einige zusätzliche, integrierte Markdown-Funktionen, die bei der Verwendung von Markdown- und MDX-Dateien verfügbar sind.

Markdown-Layouts

Abschnitt betitelt Markdown-Layouts

Astro stellt Markdown- und MDX-Seiten (in src/pages/) mit einer speziellen Frontmatter-Prop layout bereit, die einen relativen Pfad (oder Alias) zu einer Astro Layout-Komponente.

src/pages/posts/post-1.md
---
layout: ../../layouts/BlogPostLayout.astro
title: Astro in Kurzform
author: Himanshu
description: Find heraus, was Astro so großartig macht!
---
Dieser Blogpost wurde in Markdown geschrieben.

Spezielle Props sind dann in der Layout-Komponente durch Astro.props verfügbar. So kannst du zum Beispiel auf Frontmatter-Props durch Astro.props.frontmatter zugreifen.

src/layouts/BlogPostLayout.astro
---
const {frontmatter} = Astro.props;
---
<html>
  <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>Autor des Beitrags: {frontmatter.author}</h2>
  <p>{frontmatter.description}</p>
  <slot /> <!-- Hier wird Markdown-Inhalt eingefügt -->
   <!-- ... -->
</html>

Du kannst in deiner Layout-Komponente auch deinen Markdown-Inhalt stylen.

Lerne mehr über Markdown-Layouts.

Überschriften-IDs

Abschnitt betitelt Überschriften-IDs

Durch die Verwendung von Überschriften in Markdown und MDX erhaltest du automatisch Ankerlinks, sodass du direkt auf bestimmte Abschnitte deiner Seite verlinken kannst.

src/pages/page-1.md
---
title: Meine Seite voller Content
---
## Einführung


Ich kann intern zu [meiner Schlussfolgerung](#schlussfolgerung) auf der selbe Seite verlinken, während ich Markdown schreibe.


## Schlussfolgerung


Ich kann auch die URL `https://example.com/page-1/#einführung` verwenden, um direkt zu meiner Einführung auf der Seite zu navigieren.

Astro generiert die Überschriften-IDs mit github-slugger. Du findest mehr Beispiele in der github-slugger Dokumentation.

Sonderzeichen umgehen

Abschnitt betitelt Sonderzeichen umgehen

Gewissen Zeichen haben eine besondere Bedeutung in Markdown und MDX. Du musst vielleicht einen anderen Syntax verwenden, um sie korrekt darzustellen. Verwende dafür HTML-Entitäten statt dieser Zeichen.

Beispielsweise kannst du &lt; schreiben, um zu verhindern, dass < als Beginn eines HTML-Elements interpretiert wird. Oder um zu verhindern, dass { als Beginn JavaScript-Ausdruck interpretiert wird, schreibe &lcub;.

MDX-spezifische Features

Abschnitt betitelt MDX-spezifische Features

Das Hinzufügen der Astro MDX-Integration erweitert deinen Markdown-Inhalt mit JSX-Variablen, Ausdrücken und Komponenten.

Auch werden dadurch weitere Features hinzugefügt, wie der Support für Markdown-ähnliches Frontmatter in MDX. Das erlaubt dir, die meisten der in Astro integrierten Markdown-Features wie die Frontmatter layout-Eigenschaft.

.mdx-Dateien müssen im MDX-Syntax geschrieben werden, nicht im typischen, HTML-ähnlichen Astro-Syntax.

Exportierte Variablen in MDX

Abschnitt betitelt Exportierte Variablen in MDX

MDX unterstützt die Verwendung von export-Ausdrücken, um Variablen deinem MDX-Inhalt hinzuzufügen. Auf diese Variablen kann sowohl in der Vorlage selbst als auch als benannte Props beim Importieren der Datei an einer anderen Stelle zugegriffen werden.

Zum Beispiel kannst du eine title-Variable von einer MDX-Seite oder Komponente exportieren und sie als Überschrift mit {JSX-Ausdruck}verwenden:

/src/pages/posts/post-1.mdx
export const title = 'Mein erster MDX Beitrag'


# {title}

Frontmatter-Variablen in MDX

Abschnitt betitelt Frontmatter-Variablen in MDX

Die Astro-MDX-Integration umfasst standardmäßig Unterstützung für die Verwendung von Frontmatter in MDX. Füge Frontmatter-Props genauso hinzu, wie du es in Markdown-Dateien tun würdest, und diese Variablen können in der Vorlage, in ihrer Layout-Komponente und als benannte Props beim Importieren der Datei verwendet werden.

/src/pages/posts/post-1.mdx
---
layout: '../../layouts/BlogPostLayout.astro'
title: 'Mein erster MDX Beitrag'
---


# {frontmatter.title}

Komponenten in MDX

Abschnitt betitelt Komponenten in MDX

Nach der Installation der MDX-Integration, kannst du sowohl Astro-Komponenten als auch UI-Framework-Komponenten in deinen .mdx-Dateien verwenden, genauso wie du es in anderen Astro-Komponenten tun würdest. Vergiss nicht, eine client:directive zu deiner UI-Framework-Komponente hinzuzufügen, wenn es notwendig sein sollte!

Für mehr Beispiele zu import und export-Ausdrücken, findest du diese in der MDX-Dokumentation.

src/pages/about.mdx
---
layout: ../layouts/BaseLayout.astro
title: Über mich
---
import Button from '../components/Button.astro';
import ReactCounter from '../components/ReactCounter.jsx';


Ich lebe auf dem **Mars**, aber du kannst mich trotzdem <Button title="kontaktieren" />.


Hier ist meine Zähler-Komponente, und sie funktioniert in MDX:


<ReactCounter client:load />

Zuweisen benutzerdefinierter Komponenten zu HTML-Elementen

Abschnitt betitelt Zuweisen benutzerdefinierter Komponenten zu HTML-Elementen

Mit MDX kannst du die Markdown-Syntax benutzerdefinierten Komponenten anstelle der Standard-HTML-Elemente zuordnen. Dadurch kannst du in der Standard-Markdown-Syntax schreiben, aber auf ausgewählte Elemente einen speziellen Komponentenstil anwenden.

Importiere deine benutzerdefinierte Komponente in deine .mdx-Datei und exportiere dann ein components-Objekt, das das Standard-HTML-Element deiner benutzerdefinierten Komponente zuordnet:

src/pages/about.mdx
import Blockquote from '../components/Blockquote.astro';
export const components = {blockquote: Blockquote}


> Dieses Zitat wird ein benutzerdefiniertes Blockquote sein
src/components/Blockquote.astro
---
const props = Astro.props;
---
<blockquote {...props} class="bg-blue-50 p-4">
  <span class="text-4xl text-blue-600 mb-2">“</span>
  <slot /> <!-- Denke daran, ein `<slot />`-Element für `child`-Inhalte hinzuzufügen! -->
</blockquote>

Besuche die MDX-Webseite für eine vollständige Liste an HTML-Elementen, die mit benutzerdefinierten Komponenten überschrieben werden können.

Importieren von Markdown

Abschnitt betitelt Importieren von Markdown

Du kannst Markdown- und MDX-Dateien direkt in deine Astro-Dateien importieren! Dies gibt dir Zugang zu dem Markdown-Inhalt, aber auch zu den Frontmatter-Werten, die dann in Astros JSX-ähnlichen Syntax verwendet werden können.

Für den Import einzelner Seiten verwendest du import, und für mehrere Seiten Astro.glob().

src/pages/index.astro
---
// Importiere eine einzelne Markdown-Datei.
import * as meinBeitrag from '../pages/post/mein-beitrag.md';


// Du kannst auch mehrere Markdown-Dateien
// mit Astro.glob importieren:
const posts = await Astro.glob('../pages/post/*.md');
---

Wenn du Markdown- und MDX-Dateien in einer Astro-Komponente importierst, bekommst du ein Objekt mit den exportierten Props.

/src/pages/post/toller-beitrag.md
---
title: 'Der großartigste Beitrag aller Zeiten'
author: 'Ben'
---


Hier ist mein _großartiger_ Beitrag!
src/pages/index.astro
---
import * as tollerBeitrag from '../pages/post/toller-beitrag.md';


const posts = await Astro.glob('../pages/post/*.md');
---


<p>{tollerBeitrag.frontmatter.title}</p>
<p>Geschrieben von: {tollerBeitrag.frontmatter.author}</p>


<p>Archiv:</p>
<ul>
  {posts.map(post => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
</ul>

Von MDX-Dateien hast du Zugriff zu Props von sowohl dem Frontmatter als auch von export-Ausdrücken:

/src/pages/posts/mdx-post.mdx
---
title: 'Der großartigste Beitrag aller Zeiten'
author: 'Ben'
---
export const description = 'Mach es dir bequem! Das wird eine tolle Lektüre.'


Hier ist mein _großartiger_ Beitrag!
src/pages/my-posts.astro
---
import * as tollerBeitrag from '../pages/post/mdx-post.mdx';
---


<p>{tollerBeitrag.frontmatter.title}</p>
<p>Geschrieben von: {tollerBeitrag.frontmatter.author}</p>
<p>{tollerBeitrag.description}</p>

Du kannst optional einen Typ für die Variable frontmatter bereitstellen, indem du ein TypeScript-Generikum verwendest:

src/pages/index.astro
---
interface Frontmatter {
  title: string;
  description?: string;
}
const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
---


<ul>
  {posts.map(post => <li>{post.title}</li>)}
  <!-- post.title ist vom Typ `string`! -->
</ul>

Exportierte Props

Abschnitt betitelt Exportierte Props

Die folgenden Props sind in eine .astro-Komponente verfügbar, wenn man den import-Ausdruck oder Astro.glob() verwenden:

  • file - Der absolute Pfad dieser Datei (z. B. /home/benutzer/projekte/.../datei.md).
  • url - Wenn es sich um eine Seite handelt, die URL der Seite (z. B. /de/guides/markdown-content/).
  • frontmatter - Enthält alle Daten, die im YAML-Frontmatter dieser Datei angegeben sind.
  • getHeadings - Eine asynchrone Funktion, die die Überschriften der Markdown-Datei zurückgibt. Der Rückgabewert folgt diesem Typ: { depth: number; slug: string; text: string }[].
  • Content - Eine Komponente, die den vollständigen gerenderten Inhalt der Markdown-Datei zurückgibt.
  • (Nur Markdown) rawContent() - Eine Funktion, die den unverarbeiteten Markdown-Quellcode (ohne den Frontmatter-Block) als String zurückgibt.
  • (Nur Markdown) compiledContent() - Eine asynchrone Funktion, die das Ergebnis der Umwandlung deines Markdown-Quellcodes zu Astro-Quellcode zurückgibt. Bitte beachte, dass dies keine in Frontmatter konfigurierten Layouts umfasst! Nur das Markdown-Dokument selbst wird als HTML zurückgegeben.
  • (Nur MDX) - MDX-Dateien können Daten auch mit dem export-Ausdruck exportieren.

Die Content-Komponente

Abschnitt betitelt Die Content-Komponente

Eine Komponente, die den vollständigen gerenderten Inhalt der Markdown-Datei zurückgibt. Hier ein Beispiel:

src/pages/content.astro
---
import {Content as PromoBanner} from '../components/promoBanner.md';
---


<h2>Heutige Sonderaktion</h2>
<PromoBanner />

Beispiel: Dynamisches Routing

Abschnitt betitelt Beispiel: Dynamisches Routing

Statt deine Markdown/MDX-Dateien in das src/pages/-Verzeichnis zu geben, um Seitenrouten zu erzeugen, kannst du Seiten dynamisch generieren.

Um Seiten aus Markdown-Dateien zu generieren, kannst du props verwenden, um die <Content/>-Komponente an die generierte Seite zu übergeben. Anschließend kannst du die Komponente aus Astro.props abrufen und in deiner Vorlage rendern.

src/pages/[slug].astro
---
export async function getStaticPaths() {
  const posts = await Astro.glob('../posts/**/*.md')


  return posts.map(post => ({
    params: {
      slug: post.frontmatter.slug
    },
    props: {
      post
    },
  }))
}


const { Content } = Astro.props.post
---
<article>
  <Content/>
</article>

MDX-spezifische Exporte

Abschnitt betitelt MDX-spezifische Exporte

MDX-Dateien können Daten auch mit dem export-Ausdruck exportieren.

Beispielsweise kannst du ein title-Feld von einer MDX-Seite oder Komponente exportieren:

/src/pages/posts/post-1.mdx
export const title = 'Mein erster MDX-Beitrag'

Dieses title-Feld ist dann über den import und Astro.glob()-Ausdrücken verfügbar:

src/pages/index.astro
---
const posts = await Astro.glob('./*.mdx');
---


{posts.map(post => <p>{post.title}</p>)}

Benutzerdefinierte Komponenten mit importiertem MDX

Abschnitt betitelt Benutzerdefinierte Komponenten mit importiertem MDX

Beim Rendern importierter MDX-Inhalte können benutzerdefinierte Komponenten über den components-Prop übergeben werden.

src/pages/page.astro
---
import { Content, components } from '../content.mdx';
import Heading from '../Heading.astro';
---
<!-- Erstellt ein benutzerdefiniertes <h1> für den # Syntax, _und_ wendet alle in `content.mdx` definierten Komponenten an -->
<Content components={{...components, h1: Heading }} />

Markdown und MDX konfigurieren

Abschnitt betitelt Markdown und MDX konfigurieren

Astros Markdown-Unterstützung basiert auf remark, einem leistungsstarken Werkzeug zum Parsen und Verarbeiten von Markdown mit einem aktiven Ökosystem. Andere Markdown-Parser wie Pandoc oder markdown-it werden derzeit nicht unterstützt.

Astro wendet standardmäßig die Plugins GitHub-flavored Markdown und SmartyPants an. Dies bringt einige Feinheiten mit sich, wie das Generieren anklickbarer Links aus Text, und Formatierung von Zitaten und em-Bindestrichen.

Über die Datei astro.config.mjs kannst du anpassen, wie remark deinen Markdown-Code parsen soll. Lies unsere Konfigurationsreferenz für eine vollständige Liste aller Optionen.

Markdown-Plugins

Abschnitt betitelt Markdown-Plugins

Die Verarbeitung von Markdown und MDX in Astro kann durch Drittanbieter-Plugins für remark und rehype erweitert werden. Du kannst deine Plugins in astro.config.mjs bereitstellen. Diese Plugin erlauben dir, dein Markdown mit neuen Möglichkeiten zu erweitern, wie zum Beispiel automatisches Generieren eines Inhaltsverzeichnis, Anwenden von zugänglichen Emoji-Labels, und Stylen deines Markdowns.

Wir empfehlen dir, die awesome-remark und awesome-rehype-Listen auf GitHub für beliebte Plugins zu durchstöbern! In den jeweiligen READMEs findest du die Anleitungen zur Installation.

Dieses Beispiel wendet remark-toc und rehype-accessible-emojis für Markdown und MDX-Dateien angewendet:

astro.config.mjs
import { defineConfig } from 'astro/config';
import remarkToc from 'remark-toc';
import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';


export default defineConfig({
  markdown: {
    // Wird für .md und .mdx-Dateien angewendet
    remarkPlugins: [remarkToc],
    rehypePlugins: [rehypeAccessibleEmojis],
  },
});

Bitte beachte, dass remarkToc standardmäßig eine “ToC” oder “Table of Contents” Überschrift auf deiner Seite erwartet, um das Inhaltsverzeichnis darzustellen.

Überschriften-IDs und Plugins

Abschnitt betitelt Überschriften-IDs und Plugins

Astro fügt ein id-Attribut in alle Überschriftenelemente (<h1> bis <h6>) in Markdown- und MDX-Dateien ein und stellt eine getHeadings()-Funktion in den von Markdown exportierten Props bereit, um diese IDs zu erhalten.

Du kannst diese Überschriften-IDs überschreiben, indem du ein Rehype-Plugin verwendest, das ein id-Attribut hinzufügt (z.B. rehype-slug). Deine benutzerdefinierten IDs werden anstelle von Astros Standard-IDs im HTML ausgegeben und auch in getHeadings().

Standardmäßig fügt Astro id-Attribute ein, nachdem deine Rehype-Plugins ausgeführt wurden. Wenn eines deiner benutzerdefinierten Rehype-Plugins auf die von Astro eingefügten IDs zugreifen muss, kannst du das rehypeHeadingIds-Plugin von Astro direkt importieren und verwenden. Stelle sicher, dass du rehypeHeadingIds vor allen Plugins hinzufügst, die darauf basieren:

astro.config.mjs
import { defineConfig } from 'astro/config';
import { rehypeHeadingIds } from '@astrojs/markdown-remark';
import { otherPluginThatReliesOnHeadingIDs } from 'some/plugin/source';


export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeHeadingIds,
      otherPluginThatReliesOnHeadingIDs,
    ],
  },
});

Anpassen eines Plugins

Abschnitt betitelt Anpassen eines Plugins

Um ein Plugin anzupassen, füge ein Optionen-Objekt nach ihm in einer verschachtelten Liste hinzu.

Das folgende Beispiel fügt dem remarkToc-Plugin die Option heading hinzu, um zu ändern, wo das Inhaltsverzeichnis platziert wird, und die Option behavior zum rehype-autolink-headings-Plugin, um das Anker-Tag nach dem Überschriftentext hinzuzufügen.

astro.config.mjs
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';


export default {
  markdown: {
    remarkPlugins: [ [remarkToc, { heading: "contents"} ] ],
    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }]],
  },
}

Programmatische Frontmatter-Modifizierung

Abschnitt betitelt Programmatische Frontmatter-Modifizierung

Du kannst Frontmatter-Props zu deinen Markdown- und MDX-Dateien hinzufügen, indem du Remark- oder Rehype-Plugins verwendest.

  1. Füge eine customProperty zu der data.astro.trontmatter-Eigenschaft aus dem file-Argument deines Plugins hinzu:

    example-remark-plugin.mjs
    export function exampleRemarkPlugin() {
      // Alle Remark- oder Rehype-Plugins geben eine separate Funktion zurück
      return function (tree, file) {
        file.data.astro.frontmatter.customProperty = 'Generated property';
      }
    }

  2. Wende dieses Plugin in deiner markdown oder mdx-Integrationskonfiguration an:

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
    

    export default defineConfig({
      markdown: {
        remarkPlugins: [exampleRemarkPlugin]
      },
    });

    oder

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
    

    export default defineConfig({
      integrations: [
        mdx({
          remarkPlugins: [exampleRemarkPlugin],
        }),
      ],
    });

Jetzt hat jede Markdown- oder MDX-Datei die customProperty im eigenen Frontmatter und stellt sie beim Import von Markdown und in der Astro.props.frontmatter Eigenschaft in deinen Layouts zur Verfügung.

Verwandte Anleitung: Add reading time (EN)

Erweitern der Markdown-Konfiguration von MDX

Abschnitt betitelt Erweitern der Markdown-Konfiguration von MDX

Astros MDX-Integration erweitert standardmäßig die existierende Markdown-Konfiguration deines Projekts. Um individuelle Optionen zu überschreiben, kannst du sie in deiner MDX-Konfiguration spezifizieren.

Das folgende Beispiel deaktiviert GitHub-Flavored Markdown und wendet einen anderen Remark-Plugin für MDX-Dateien an:

astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';


export default defineConfig({
  markdown: {
    syntaxHighlight: 'prism',
    remarkPlugins: [remarkPlugin1],
    gfm: true,
  },
  integrations: [
    mdx({
      // `syntaxHighlight` von Markdown übernommen


      // Markdown `remarkPlugins` werden ignoriert,
      // nur `remarkPlugin2` werden angewendet.
      remarkPlugins: [remarkPlugin2],
      // `gfm` wird überschrieben zu `false`
      gfm: false,
    })
  ]
});

Um zu verhindern, dass deine MDX-Konfiguration von der Markdown-Konfiguration übernimmt, setze die extendMarkdownConfig-Option (standardmäßig aktiviert) auf false:

astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';


export default defineConfig({
  markdown: {
    remarkPlugins: [remarkPlugin],
  },
  integrations: [
    mdx({
      // Markdown Konfiguration nun ignoriert
      extendMarkdownConfig: false,
      // Keine `remarkPlugins` angewendet
    })
  ]
});

Syntaxhervorhebung

Abschnitt betitelt Syntaxhervorhebung

Astro unterstützt von Haus aus Shiki und Prism und ermöglicht so die Syntaxhervorhebung in folgenden Bereichen:

Shiki ist standardmäßig aktiviert und mit dem Design github-dark vorkonfiguriert. Die kompilierte Ausgabe wird auf Inline-Stile ohne überflüssige CSS-Klassen, Stylesheets oder clientseitigen JavaScript-Code beschränkt.

Shiki-Konfiguration

Abschnitt betitelt Shiki-Konfiguration

Wenn du Shiki verwendest, kannst du alle Optionen wie folgt über das Objekt shikiConfig konfigurieren:

astro.config.mjs
export default {
  markdown: {
    shikiConfig: {
      // Wähle eines der von Shiki mitgelieferten Themen,
      // oder füge dein eigenes hinzu. Mehr dazu hier:
      // https://github.com/shikijs/shiki/blob/main/docs/themes.md
      theme: 'dracula',
      // Alternativ, stelle mehrere Themen bereit
      // https://shiki.style/guide/dual-themes
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
      // Füge eigene Sprachen hinzu.
      // Hinweis: Shiki hat unzählige Sprachen direkt eingebaut,
      // einschließlich .astro! Mehr dazu hier:
      // https://github.com/shikijs/shiki/blob/main/docs/languages.md
      langs: [],
      // Aktiviere automatische Zeilenumbrüche,
      // um horizontales Scrollen zu vermeiden
      wrap: true,
      // Füge benutzerdefinierte Transformer hinzu: https://shiki.style/guide/transformers
      // Finde beliebte Transformer: https://shiki.style/packages/transformers
      transformers: []
    },
  },
};

Dein eigenes Theme hinzufügen

Abschnitt betitelt Dein eigenes Theme hinzufügen

Anstelle der von Shiki bereitgestellten Themen, kannst du dein eigenes Thema aus einer lokalen Datei importieren.

astro.config.mjs
import { defineConfig } from 'astro/config';
import customTheme from './my-shiki-theme.json';


export default defineConfig({
  markdown: {
    shikiConfig: { theme: customTheme },
  },
});

Wir empfehlen dir Skikis Dokumentation zu Themen durchzulesen, um mehr über Themen, Hell- und Dunkelmodus, und Styling mittels CSS-Variablen zu erfahren.

Ändere die Standard-Syntaxhervorhebung

Abschnitt betitelt Ändere die Standard-Syntaxhervorhebung

Shiki ist unsere Standard-Syntaxhervorhebung. Wenn du zu Prism wechseln oder die Syntaxhervorhebung vollständig deaktivieren möchtest, kannst du das Konfigurationsobjekt markdown.syntaxHighlighting verwenden:

astro.config.mjs
export default {
  markdown: {
    // Kann 'shiki' (Standard), 'prism' oder false sein,
    // um die Hervorhebung ganz zu deaktivieren
    syntaxHighlight: 'prism',
  },
};

Prism-Konfiguration

Abschnitt betitelt Prism-Konfiguration

Wenn du Prism verwenden willst, musst du ein Stylesheet zur Syntaxhervorhebung zu deinem Projekt hinzufügen. Wenn du gerade erst anfängst und Prism gegenüber Shiki bevorzugst, empfehlen wir dir folgende Vorgehensweise:

  1. Stelle syntaxHighlight: 'prism' in deiner Astro-Konfigurationsdatei ein.
  2. Wähle ein vorgefertigtes Stylesheet auf Prism Themes aus und lade es herunter.
  3. Füge dieses Stylesheet in das public/-Verzeichnis deines Projekts ein.
  4. Lade es im <head>-Abschnitt deiner Seite mit einem <link>-Tag.

Du kannst auch die Liste der von Prism unterstützten Sprachen besuchen, um mehr über die Optionen und deren Verwendung zu erfahren.

Remote-Markdown abrufen

Abschnitt betitelt Remote-Markdown abrufen

Astro wurde ursprünglich für lokale Markdown-Dateien, die in deinem Projekt­verzeichnis gespeichert sind, entwickelt. Allerdings gibt es eventuell Situationen, in denen du Markdown von einer Remote-Quelle abrufen musst. Zum Beispiel musst du möglicherweise Markdown von einer externen API abrufen und rendern, wenn du deine Website erstellst (oder wenn ein Benutzer eine Anfrage an deine Website stellt, wenn du SSR verwendest).

Astro enthält keine integrierte Unterstützung für remote Markdown! Um remote Markdown abzurufen und in HTML zu rendern, musst du deinen eigenen Markdown-Parser aus npm installieren und konfigurieren. Dies erbt nicht von den in Astro konfigurierten integrierten Markdown- und MDX-Einstellungen. Stelle sicher, dass du diese Einschränkungen verstehst, bevor du dies in deinem Projekt implementierst.

src/pages/remote-example.astro
---
// Example: Rufe Markdown von einer externen API ab
// und rendere es zu HTML.
// Verwende z.B. "marked" (https://github.com/markedjs/marked)
import { marked } from 'marked';
const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md');
const markdown = await response.text();
const content = marked.parse(markdown);
---
<article set:html={content} />