دستاویزاتDocumentationMdxCode

Code

اپنی MDX files میں code استعمال کرنے میں مہارت حاصل کریں

ماخذ

opendocs MDX files میں code handle کرنے کے لیے rehype-pretty-code library استعمال کرتا ہے۔ اس سے آپ code کے display ہونے کا طریقہ کافی حد تک customize کر سکتے ہیں!

مزید information کے لیے official documentation اور examples دیکھیں!

Titles

مثال:

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

Code:

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

Code:

```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' ہے۔

Code:

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 کو اس nearest code block سے semantically link کرنے دیتا ہے جس کا وہ حوالہ دیتا ہے۔

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.

Word highlighting

مثال:

relative w-full pl-12 rounded-lg border

Code:

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

Code:

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

Code:

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

Code:

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

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

id کے ذریعے word group highlighting

Words کے بعد # کے بعد id لگائیں۔ یہ given id کی بنیاد پر characters کو مختلف رنگ دینے کی اجازت دیتا ہے۔

مثال:

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

نئے styles change یا add کرنے کے لیے:

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