More / Prisma style guide

Components and code blocks


Overview

This page describes how to use code blocks and MDX components on the Prisma doc site.

Code blocks

Example:

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

Code:

1```js
2async function main() {
3const allUsers = await prisma.user.findMany()
4console.log(allUsers)
5}
6```

Prisma schema

Example:

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:

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

Code block with copy

Example:

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

Code:

1```js copy
2async function main() {
3 const allUsers = await prisma.user.findMany()
4 console.log(allUsers)
5}
6```

Code block with line number

Example:

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

Code:

1```js line-number
2async function main() {
3 const allUsers = await prisma.user.findMany()
4 console.log(allUsers)
5}
6```

Code block with highlighted code

Example:

1async function main() {
+ added code
- deleted code
4 neutral highlight
5}

Code:

1```js line-number
2async function main() {
+ added code
- deleted code
5 neutral highlight
6}
7```

File name with icon

There are 4 icons available:

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

Tabbed blocks

Example:

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

Code:

1<TabbedContent tabs={[<FileWithIcon text="schema.ts" icon="file"/>, <FileWithIcon text="dev.db" icon="database"/>]}>
2
3<tab>
4
5 **id** | **email** | **name** |
6 :----- | :------------------ | :-------- |
7 `1` | `"sarah@prisma.io"` | `"Sarah"` |
8 `2` | `"maria@prisma.io"` | `"Maria"` |
9
10</tab>
11
12<tab>
13
14```copy bash-symbol
15npm run dev
16```
17
18</tab>
19
20</TabbedContent>

Expand/Collapse section

Example:

Here's more!

1<details><summary>Expand if you want to view more</summary>
2
3Here's more!
4
5</details>

Example:

Button text

Code:

1<ButtonLink color="dark" type="primary" href="/to/path">
2 Button text
3</ButtonLink>
Edit this page on Github