DocsDocumentationMdxCode

Kode

Bliv fortrolig med kode i dine MDX-filer

Kilde

opendocs bruger biblioteket rehype-pretty-code til at håndtere kode i MDX-filer. Det giver dig mulighed for i høj grad at tilpasse, hvordan kode vises!

Se den officielle dokumentation og eksemplerne for flere oplysninger!

Titler

Eksempel:

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

Kode:

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

Kodefremhævning

Eksempel:

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

Kode:

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

Fremhævning af inline-kode

Eksempel:

Resultatet af [1, 2, 3].join('-') er '1-2-3'.

Kode:

The result of `[1, 2, 3].join('-'){:js}` is `'1-2-3'{:js}`.

Kontekstbevidst fremhævning af inline-kode

Hvis du for eksempel havde følgende kodeblok:

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

Når vi refererer til getStringLength som en funktion, kan vi farve den som sådan. Det samme gælder function eller str kontra str osv. Det gør det muligt semantisk at knytte inline-kode til den nærmeste kodeblok, den refererer til.

Kode:

When we refer to `getStringLength{:.entity.name.function}` as a function,
we can color it as such. Same with `function{:.keyword}`, or
`str{:.variable.parameter}` vs. `str{:.variable.other.object}`, etc. This allows
semantically link inline code to the nearest block of code it refers to.

Ordfremhævning

Eksempel:

relative w-full pl-12 rounded-lg border

Kode:

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

Linjefremhævning

Eksempel:

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

Kode:

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

Linjenummerering

Eksempel:

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

Kode:

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

Diff

Eksempel:

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

Kode:

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

ANSI-fremhævning

Eksempel:

  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx

Inline ANSI: > Local: http://localhost:3000/

Kode:

```ansi
  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx
```
 
Inline ANSI: `> Local: http://localhost:3000/{:ansi}`

Ordfremhævning efter gruppe-id

Sæt et id efter # efter ordene. Det giver dig mulighed for at farve tegn forskelligt baseret på det angivne id.

Eksempel:

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

Kode:

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

Sådan ændrer eller tilføjer du nye styles:

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