কোড
আপনার MDX ফাইলে code ব্যবহারে দক্ষতা অর্জন করুন
MDX ফাইলে code handle করতে opendocs rehype-pretty-code library ব্যবহার করে।
এর ফলে code কীভাবে দেখানো হবে তা আপনি অনেকভাবে customize করতে পারেন!
আরও তথ্যের জন্য official documentation এবং example দেখুন!
Title
উদাহরণ:
import { App } from './App';কোড:
```js title="apps/web/src/index.tsx"
import { App } from './App';
```Code highlighting
উদাহরণ:
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 code highlighting
উদাহরণ:
[1, 2, 3].join('-')-এর result হলো '1-2-3'।
কোড:
The result of `[1, 2, 3].join('-'){:js}` is `'1-2-3'{:js}`.Context-aware inline code highlighting
উদাহরণস্বরূপ, আপনার কাছে নিচের code block থাকলে:
function getStringLength(str) {
return str.length;
}যখন আমরা getStringLength-কে function হিসেবে refer করি,
তখন সেটিকে সেই অনুযায়ী color করা যায়। function-এর ক্ষেত্রেও একই, অথবা
str বনাম str ইত্যাদি। এতে inline code-কে তার কাছের যে code block-কে refer করে তার সঙ্গে semantically link করা যায়।
কোড:
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.Word highlighting
উদাহরণ:
relative w-full pl-12 rounded-lg borderকোড:
```css /pl-12/ /border/
relative w-full pl-12 rounded-lg border
```Line highlighting
উদাহরণ:
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))",
},
},
},
}
```Line numbering
উদাহরণ:
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.jsxInline ANSI: > Local: http://localhost:3000/
কোড:
```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 দিয়ে word group highlighting
wordগুলোর পরে # দিয়ে একটি id দিন।
এতে দেওয়া id অনুযায়ী character আলাদা রঙে দেখানো যায়।
উদাহরণ:
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");
```style বদলাতে বা নতুন style যোগ করতে:
[data-chars-id='v'] {
@apply !text-pink-300 bg-rose-800/50 font-bold;
}