Kod
MDX dosyalarınızda kod kullanımında ustalaşma
opendocs, MDX dosyalarındaki kodları işlemek için rehype-pretty-code kütüphanesini kullanır.
Bu, kodların nasıl görüntüleneceğini büyük ölçüde özelleştirmenizi sağlar!
Daha fazla bilgi için resmi dokümantasyona ve örneklere bakın!
Başlıklar
Örnek:
import { App } from './App';Kod:
```js title="apps/web/src/index.tsx"
import { App } from './App';
```Kod vurgulama
Örnek:
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
}Kod:
```js
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
}
```Satır içi kod vurgulama
Örnek:
[1, 2, 3].join('-') sonucu '1-2-3' olur.
Kod:
The result of `[1, 2, 3].join('-'){:js}` is `'1-2-3'{:js}`.Bağlama duyarlı satır içi kod vurgulama
Örneğin, aşağıdaki kod bloğunuz varsa:
function getStringLength(str) {
return str.length;
}getStringLength değerinden bir fonksiyon olarak söz ettiğimizde,
onu buna göre renklendirebiliriz. Aynısı function veya
str ile str vb. için de geçerlidir. Bu, satır içi kodu başvurduğu en yakın kod bloğuna anlamsal olarak bağlamayı sağlar.
Kod:
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.Sözcük vurgulama
Örnek:
relative w-full pl-12 rounded-lg borderKod:
```css /pl-12/ /border/
relative w-full pl-12 rounded-lg border
```Satır vurgulama
Örnek:
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
}Kod:
```js {2-4,6}
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
}
```Satır numaralandırma
Örnek:
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
}Kod:
```js showLineNumbers
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
}
```Diff
Örnek:
const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)Kod:
```diff
const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)
```ANSI vurgulama
Örnek:
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.jsxSatır içi ANSI: > Local: http://localhost:3000/
Kod:
```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}`Id'ye göre sözcük grubu vurgulama
Sözcüklerden sonra # işaretinin ardından bir id koyun.
Bu, karakterleri verilen id'ye göre farklı şekilde renklendirmenizi sağlar.
Örnek:
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");Kod:
```js /age/#v /name/#v /setAge/#s /setName/#s /50/#i /"Taylor"/#i
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");
```Stilleri değiştirmek veya yenilerini eklemek için:
[data-chars-id='v'] {
@apply !text-pink-300 bg-rose-800/50 font-bold;
}