డాక్స్DocumentationMdxCode

Code ఉపయోగించడం

మీ MDX ఫైల్‌లలో code ను నైపుణ్యంగా ఉపయోగించడం

మూలం

MDX ఫైల్‌లలో code ను నిర్వహించడానికి opendocs rehype-pretty-code library ను ఉపయోగిస్తుంది. దీంతో code ఎలా కనిపించాలో మీరు చాలా వరకు customize చేయగలరు!

మరింత సమాచారం కోసం, అధికారిక 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('-') ఫలితం '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 గా సూచించినప్పుడు, దానిని ఆ విధంగా color చేయవచ్చు. function విషయంలోనూ అలాగే, లేదా str vs. str మొదలైనవి. ఇది inline code ను అది సూచించే సమీప 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

పదాల తర్వాత # తర్వాత 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