Kode
Menguasai kode dalam file MDX Anda
opendocs menggunakan library rehype-pretty-code
untuk menangani kode dalam file MDX. Ini memungkinkan Anda menyesuaikan tampilan kode secara luas!
Untuk informasi lebih lanjut, lihat dokumentasi dan contoh resminya!
Judul
Contoh:
import { App } from './App';Kode:
```js title="apps/web/src/index.tsx"
import { App } from './App';
```Highlight kode
Contoh:
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))",
},
},
},
}
```Highlight kode inline
Contoh:
Hasil dari [1, 2, 3].join('-') adalah '1-2-3'.
Kode:
The result of `[1, 2, 3].join('-'){:js}` is `'1-2-3'{:js}`.Highlight kode inline sadar konteks
Misalnya, jika Anda memiliki blok kode berikut:
function getStringLength(str) {
return str.length;
}Saat kita merujuk getStringLength sebagai fungsi,
kita dapat mewarnainya sebagai fungsi. Begitu juga dengan function, atau
str vs. str, dan seterusnya. Ini memungkinkan
kode inline terhubung secara semantik ke blok kode terdekat yang dirujuknya.
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.Highlight kata
Contoh:
relative w-full pl-12 rounded-lg borderKode:
```css /pl-12/ /border/
relative w-full pl-12 rounded-lg border
```Highlight baris
Contoh:
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))",
},
},
},
}
```Penomoran baris
Contoh:
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
Contoh:
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"
)
```Highlight ANSI
Contoh:
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.jsxANSI inline: > Local: http://localhost:3000/
Kode:
```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}`Highlight grup kata berdasarkan id
Letakkan id setelah # setelah kata.
Ini memungkinkan Anda memberi warna berbeda pada karakter berdasarkan id yang diberikan.
Contoh:
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");
```Untuk mengubah atau menambahkan gaya baru:
[data-chars-id='v'] {
@apply !text-pink-300 bg-rose-800/50 font-bold;
}