MDX components in the Prisma docs

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

id	email	name
`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:

Expand if you want to view more

Here's more!

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

Button link

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>

Was this helpful?

Edit this page on GitHub

MDX components

Overview

Code blocks

Prisma schema

Code block with file icon

Code block with copy

Code block without line numbers

Code block with highlighted code

File icons

Tabbed blocks

Expand/Collapse section

Button link

Terminals with output

Was this helpful?

Products

Resources

Community

Company

Newsletter

Find Us