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