MDX components

Overview

This page describes how to use MDX components (e.g. code blocks) in the Prisma docs.

Code blocks

Example:

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

Code:

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

Prisma schema

Example:

datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}

Code:

```prisma
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
```

Code block with file icon

Example:

schema.prisma
1datasource db {
2 provider = "sqlite"
3 url = env("DATABASE_URL")
4}
5generator client {
6 provider = "prisma-client-js"
7}
8model Post {
9 id Int @id @default(autoincrement())
10 title String
11 content String?
12 published Boolean @default(false)
13 author User? @relation(fields: [authorId], references: [id])
14 authorId Int?
15}
16model User {
17 id Int @id @default(autoincrement())
18 email String @unique
19 name String?
20 posts Post[]
21}

Code:

```prisma file=schema.prisma
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
```

Code block with copy

Example:

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

Code:

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

Code block 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 block with highlighted code

Example:

async function main() {
added code
deleted code
neutral highlight
}

Code:

```js
async function main() {
added code
deleted code
neutral highlight
}
```

File icons

There are 4 icons available:

  • file.pdf
  • dev.db
  • Windows
  • schema.ts
  • prisma.schema
<FileWithIcon text="file.pdf" icon="file"/>
<FileWithIcon text="dev.db" icon="database"/>
<FileWithIcon text="Windows" icon="display"/>
<FileWithIcon text="schema.ts" icon="code"/>
<FileWithIcon text="prisma.schema" icon="prisma"/>

Tabbed blocks

Example:

schema.ts
dev.db
idemailname
1"sarah@prisma.io""Sarah"
2"maria@prisma.io""Maria"

Code:

<TabbedContent tabs={[<FileWithIcon text="schema.ts" icon="file"/>, <FileWithIcon text="dev.db" icon="database"/>]}>
<tab>
**id** | **email** | **name** |
:----- | :------------------ | :-------- |
`1` | `"sarah@prisma.io"` | `"Sarah"` |
`2` | `"maria@prisma.io"` | `"Maria"` |
</tab>
<tab>
```copy bash-symbol
npm run dev
```
</tab>
</TabbedContent>

Expand/Collapse section

Example:

Here's more!

<details><summary>Expand if you want to view more</summary>
Here's more!
</details>

Example:

Button text

Code:

<ButtonLink color="dark" type="primary" href="https://www.prisma.io/docs">
Button text
</ButtonLink>

Terminals with output

Example:

yarn prisma init
Hide CLI output
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init
✔ Your Prisma schema was created at prisma/schema.prisma.
You can now open it in your favorite editor.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma introspect to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started

Code:

<CodeWithResult expanded={true}>
<Cmd>
```
yarn prisma init
```
</Cmd>
<CmdResult>
```
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init
✔ Your Prisma schema was created at prisma/schema.prisma.
You can now open it in your favorite editor.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma introspect to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started
```
</CmdResult>
</CodeWithResult>
Edit this page on GitHub