दस्तऐवजDocumentationMdxCode

Code

तुमच्या MDX files मधील code वापरण्यावर प्रभुत्व मिळवा.

स्रोत

opendocs MDX files मधील code हाताळण्यासाठी rehype-pretty-code library वापरते. यामुळे code कसा दाखवला जातो हे तुम्ही मोठ्या प्रमाणात customize करू शकता.

अधिक माहितीसाठी 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 ला तो ज्या जवळच्या code block ला refer करतो त्याच्याशी 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}`

Word group highlighting by id

Words नंतर # नंतर id ठेवा. यामुळे दिलेल्या 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 बदलण्यासाठी किंवा जोडण्यासाठी:

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