DokumentationDocumentationMdxCode

Code

Code in euren MDX-Dateien meistern

Quellcode

opendocs verwendet die rehype-pretty-code-Bibliothek zur Handhabung von Code in MDX-Dateien. Dies ermöglicht es euch, die Art der Code-Darstellung stark anzupassen!

Für weitere Informationen siehe die offizielle Dokumentation und Beispiele!

Titel

Beispiel:

apps/web/src/index.tsx
import { App } from './App';

Code:

```js title="apps/web/src/index.tsx"
import { App } from './App';
```

Code-Hervorhebung

Beispiel:

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

Code:

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}
```

Inline-Code-Hervorhebung

Beispiel:

Das Ergebnis von [1, 2, 3].join('-') ist '1-2-3'.

Code:

Das Ergebnis von `[1, 2, 3].join('-'){:js}` ist `'1-2-3'{:js}`.

Kontextbewusste Inline-Code-Hervorhebung

Zum Beispiel, wenn ihr den folgenden Codeblock hättet:

function getStringLength(str) {
  return str.length;
}

Wenn wir uns auf getStringLength als Funktion beziehen, können wir es entsprechend einfärben. Dasselbe gilt für function, oder str vs. str, etc. Dies ermöglicht es, Inline-Code semantisch mit dem nächstgelegenen Codeblock zu verknüpfen, auf den er sich bezieht.

Code:

Wenn wir uns auf `getStringLength{:.entity.name.function}` als Funktion beziehen,
können wir es entsprechend einfärben. Dasselbe gilt für `function{:.keyword}`, oder
`str{:.variable.parameter}` vs. `str{:.variable.other.object}`, etc. Dies ermöglicht
es, Inline-Code semantisch mit dem nächstgelegenen Codeblock zu verknüpfen, auf den er sich bezieht.

Wort-Hervorhebung

Beispiel:

relative w-full pl-12 rounded-lg border

Code:

```css /pl-12/ /border/
relative w-full pl-12 rounded-lg border
```

Zeilen-Hervorhebung

Beispiel:

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

Code:

```js {2-4,6}
module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}
```

Zeilennummerierung

Beispiel:

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

Code:

```js showLineNumbers
module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}
```

Diff

Beispiel:

const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)

Code:

```diff
const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)
```

ANSI-Hervorhebung

Beispiel:

[0;36m  vite v5.0.0[0;32m dev server running at:[0m
 
  > Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m
  > Network: [0;2muse `--host` to expose[0m
 
  [0;36mready in 125ms.[0m
 
[0;2m8:38:02 PM[0m [0;36;1m[vite][0m [0;32mhmr update [0;2m/src/App.jsx

Inline ANSI: > Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m

Code:

```ansi
[0;36m  vite v5.0.0[0;32m dev server running at:[0m
 
  > Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m
  > Network: [0;2muse `--host` to expose[0m
 
  [0;36mready in 125ms.[0m
 
[0;2m8:38:02 PM[0m [0;36;1m[vite][0m [0;32mhmr update [0;2m/src/App.jsx
```
 
Inline ANSI: `> Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m{:ansi}`

Wortgruppen-Hervorhebung nach ID

Fügt eine ID nach # nach den Wörtern hinzu. Dies ermöglicht es euch, Zeichen basierend auf der angegebenen ID unterschiedlich einzufärben.

Beispiel:

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

Code:

```js /age/#v /name/#v /setAge/#s /setName/#s /50/#i /"Taylor"/#i
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");
```

Um Stile zu ändern oder neue hinzuzufügen:

apps/web/src/styles/mdx.css
[data-chars-id='v'] {
  @apply !text-pink-300 bg-rose-800/50 font-bold;
}
Adding new docsComponents