MDX components
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:
```jsasync 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 Stringcontent String?published Boolean @default(false)author User? @relation(fields: [authorId], references: [id])authorId Int?}model User {id Int @id @default(autoincrement())email String @uniquename String?posts Post[]}
Code:
```prismadatasource db {provider = "sqlite"url = env("DATABASE_URL")}generator client {provider = "prisma-client-js"}model Post {id Int @id @default(autoincrement())title Stringcontent String?published Boolean @default(false)author User? @relation(fields: [authorId], references: [id])authorId Int?}model User {id Int @id @default(autoincrement())email String @uniquename 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 String11 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 @unique19 name String?20 posts Post[]21}
Code:
```prisma file=schema.prismadatasource db {provider = "sqlite"url = env("DATABASE_URL")}generator client {provider = "prisma-client-js"}model Post {id Int @id @default(autoincrement())title Stringcontent String?published Boolean @default(false)author User? @relation(fields: [authorId], references: [id])authorId Int?}model User {id Int @id @default(autoincrement())email String @uniquename String?posts Post[]}```
Code block with copy
Example:
Code:
```js copyasync 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-linesasync function main() {const allUsers = await prisma.user.findMany()console.log(allUsers)}```
Code block with highlighted code
Example:
test.ts
1async function main() {+ added code3- deleted code5✎ edited✎ code89 highlights10 over multiple11 lines can be done by using12 a hyphen13}
Code:
```js file=test.ts highlight=2;add|4;delete|6,7;edit|9-12;normalasync function main() {added codedeleted codeeditedcodehighlightsover multiplelines can be done by usinga hyphen}```
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 | 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-symbolnpm 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>
Button link
Example:
Button textCode:
<ButtonLink color="dark" type="primary" href="https://www.prisma.io/docs">Button text</ButtonLink>
Code with output
Example:
yarn prisma init
Hide CLI output
$ yarn prisma inityarn run v1.22.0warning 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 inityarn run v1.22.0warning 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>