MDX components
This page describes how to use the custom MDX components (e.g. code blocks) in the Prisma docs.
TopBlock
Required at the top of the page to avoid styling issues:
<TopBlock>
This page describes how to use [MDX](https://mdxjs.com/) components (e.g. code blocks) in the Prisma docs.
</TopBlock>
inlinecode
Instead of using backticks (`) to surround code snippets in headings, you should instead surround the snippet with <inlinecode></inlinecode>
## <inlinecode>inlinecode</inlinecode>
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:
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 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 no copy option
By default, all the code blocks will have a copy icon for copying the code. If you want to disable the copy option in the code block, please use no-copy property.
Example:
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
Code:
```js no-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)
}
```
Terminal styled code block
Example:
npm run dev
Code:
```terminal
npm run dev
```
Code block wrapped
For code blocks where we don't want to have a scrollable box.
Example with wrap:
$ this is a single, really long line of code that shouldn't need to be scrollable to check what it says and simply wraps over to the next line, making it all visible in the same box
Example without wrap:
$ this is a single, really long line of code that shouldn't need to be scrollable to check what it says and simply wraps over to the next line, making it all visible in the same box
Code:
```code wrap
$ this is a single, really long line of code that shouldn't need to be scrollable to check what it says and simply wraps over to the next line, making it all visible in the same box
```
Code block with highlighted code
Example:
async function main() {
added code
deleted code
edited
code
highlights
over multiple
lines can be done by using
a hyphen
}
Code:
```js file=test.ts highlight=2;add|4;delete|6,7;edit|9-12;normal
async function main() {
added code
deleted code
edited
code
highlights
over multiple
lines can be done by using
a hyphen
}```
FootNote
Example:
Every¹ feature in your data model maps to a corresponding feature in the underlying database.
¹ Comments and Prisma-level functions (uuid() and cuid()) do not map to database features.
Code:
<FootNote>
¹ Footnote text.
</FootNote>
File icons
There are 4 icons available:
- file.pdf
- dev.db
- Windows
- schema.ts
- schema.prisma
<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="schema.prisma" icon="prisma"/>
Tabbed blocks
Example:
schema.ts
dev.db
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>
Subsections
Lists all child pages of the current page to the specified depth:
<Subsections depth="3" />
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>
Code with result
Example:
Hide CLI results
Code:
<CodeWithResult expanded={true}>
<cmd>
```
yarn prisma init
```
</cmd>
<cmdResult>
```code no-copy wrap
$ 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 db pull 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>
Example with custom output text
Hide some output results
Code:
<CodeWithResult outputResultText="some output" expanded={true}>
<cmd>
```
yarn prisma init
```
</cmd>
<cmdResult>
```code no-copy wrap
$ 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 db pull 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>
Parallel blocks
Example:
Code:
<ParallelBlocks>
<block content="Prisma">
```ts
const posts = await postRepository.find({
where: {
title: 'Hello World',
},
})
```
</block>
<block content="TypeORM">
```ts
const posts = await postRepository.find({
where: {
title: ILike('Hello World'),
},
})
```
</block>
</ParallelBlocks>
Quiz component
Example:
Can Prisma be used with Node.js?
Code:
<Quiz
question="Can Prisma be used with Node.js?"
answerOptions={[
{
answer: 'It only works with potatoes',
isCorrect: true,
},
{
answer: 'It can be used with any Java backend!',
isCorrect: false,
},
{
answer: 'It can be used with any Node.js or TypeScript backend!',
isCorrect: false,
},
{
answer: 'It can be used with a Python backend!',
isCorrect: false,
},
]}
/>
Tip component
Example:
To find out if Prisma is the right fit for your project, head on over to What is Prisma and read all about what makes Prisma, Prisma!
Code:
<Tip>
To find out if Prisma is the right fit for your project, head on over to [What is Prisma](/orm/overview/introduction/what-is-prisma) and read all about what makes Prisma, Prisma!
</Tip>
Admonition component
The Admonition shows a message to the user with different levels of priority.
info: The message is informational.warning: The message is a warning.alert: The message is an alert.
Info Example
This is some information that might be of use to the reader
Warning Example
This is some information we want to warn the user about, maybe they should know this before they start using a feature.
Alert Example
This is some information we want to alert the user to, maybe they should be aware of some breaking changes
<Admonition type="info">
This is some information that might be of use to the reader
</Admonition>
<Admonition type="warning">
This is some information we want to warn the user about, maybe they should know this before they start using a feature.
</Admonition>
<Admonition type="alert">
This is some information we want to alert the user to, maybe they should be aware of some **breaking changes**
</Admonition>