MDX Components

Code blocks without line numbers

Example:

async function main() {
  const allUsers = await prisma.user.findMany();
  console.log(allUsers);
}

Code:

```js no-lines
async function main() {
  const allUsers = await prisma.user.findMany()
  console.log(allUsers)
}
```

Code blocks with line numbers

Example: Line Numbers

1async function main() {
2  added code
3

4  single line highlight
5

6  edited
7  code
8

9  highlights
10  over multiple
11  lines can be done by using
12  a hyphen
13}

Code:

```js {4,9-12}
async function main() {
  added code


  deleted code


  edited
  code


  highlights
  over multiple
  lines can be done by using
  a hyphen
}
```

CodeSandbox

PropTypeDefaultDescription
titlestringDispaly Title for Embedded CodeSandbox
idstringid of unique CodeSandbox of the project
viewenumpreview or editor defaults to 50/50 split view
showFilestringRelitive path of file to display onload /<path>/**/<file>.js
1<CodeSandbox
2  title="Great Example of Media"
3  id="determined-davinci-6kd2w"
4  showFile="/pages/about.js"
5/>

Callout

Aside