DocsDocumentationMdxCode

Code

Code in je MDX-bestanden beheersen

Bron

opendocs gebruikt de library rehype-pretty-code om code in MDX-bestanden te verwerken. Hierdoor kun je de manier waarop code wordt weergegeven uitgebreid aanpassen!

Zie de officiele documentatie en voorbeelden voor meer informatie!

Titels

Voorbeeld:

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

Code:

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

Code highlighting

Voorbeeld:

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 highlighting

Voorbeeld:

Het resultaat van [1, 2, 3].join('-') is '1-2-3'.

Code:

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

Contextbewuste inline code highlighting

Als je bijvoorbeeld het volgende codeblok had:

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

Wanneer we naar getStringLength verwijzen als functie, kunnen we die ook zo kleuren. Hetzelfde geldt voor function, of str versus str, enz. Hierdoor kan inline code semantisch worden gekoppeld aan het dichtstbijzijnde codeblok waarnaar die verwijst.

Code:

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.

Woord-highlighting

Voorbeeld:

relative w-full pl-12 rounded-lg border

Code:

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

Regel-highlighting

Voorbeeld:

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))",
      },
    },
  },
}
```

Regelnummers

Voorbeeld:

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

Voorbeeld:

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 Highlight

Voorbeeld:

  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/

Code:

```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}`

Woordgroep-highlighting op id

Plaats na de woorden een id na #. Hiermee kun je tekens anders kleuren op basis van de opgegeven id.

Voorbeeld:

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");
```

Om stijlen te wijzigen of nieuwe stijlen toe te voegen:

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