DocsDocumentationMdxCode

Κώδικας

Εξοικείωση με τον κώδικα στα αρχεία MDX σας

Πηγή

Το opendocs χρησιμοποιεί τη βιβλιοθήκη rehype-pretty-code για τη διαχείριση του κώδικα σε αρχεία MDX. Αυτό σας επιτρέπει να προσαρμόσετε σε μεγάλο βαθμό τον τρόπο εμφάνισης του κώδικα!

Για περισσότερες πληροφορίες, δείτε την επίσημη τεκμηρίωση και τα παραδείγματα!

Τίτλοι

Παράδειγμα:

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

Κώδικας:

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

Επισήμανση κώδικα

Παράδειγμα:

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

Κώδικας:

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

Επισήμανση inline κώδικα

Παράδειγμα:

Το αποτέλεσμα του [1, 2, 3].join('-') είναι '1-2-3'.

Κώδικας:

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

Επισήμανση inline κώδικα με βάση το context

Για παράδειγμα, αν είχατε το παρακάτω block κώδικα:

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

Όταν αναφερόμαστε στο getStringLength ως συνάρτηση, μπορούμε να το χρωματίσουμε ανάλογα. Το ίδιο ισχύει για το function, ή για str έναντι str κ.λπ. Αυτό επιτρέπει τη σημασιολογική σύνδεση του inline κώδικα με το κοντινότερο block κώδικα στο οποίο αναφέρεται.

Κώδικας:

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.

Επισήμανση λέξεων

Παράδειγμα:

relative w-full pl-12 rounded-lg border

Κώδικας:

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

Επισήμανση γραμμών

Παράδειγμα:

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

Κώδικας:

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

Αρίθμηση γραμμών

Παράδειγμα:

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

Κώδικας:

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

Diff

Παράδειγμα:

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

Κώδικας:

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

ANSI Highlight

Παράδειγμα:

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

Επισήμανση ομάδων λέξεων με id

Τοποθετήστε ένα id μετά το # μετά από τις λέξεις. Αυτό σας επιτρέπει να χρωματίζετε χαρακτήρες διαφορετικά με βάση το συγκεκριμένο id.

Παράδειγμα:

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

Κώδικας:

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

Για να αλλάξετε ή να προσθέσετε νέα styles:

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