MDX components

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

Components not listed here are part of the Docusaurus Markdown features

`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.

Components not listed here are part of the [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features)

</TopBlock>

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

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:

test.ts

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
}```

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>

Code with result

Example:

yarn prisma init

Show CLI results

$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/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 introspect your database schema and update the Prisma schema data models accordingly.
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>

```code no-copy wrap
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/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 introspect your database schema and update the Prisma schema data models accordingly.
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

yarn prisma init

Show some output results

$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/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 introspect your database schema and update the Prisma schema data models accordingly.
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 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/janedoe/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 introspect your database schema and update the Prisma schema data models accordingly.
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:

Prisma

const posts = await postRepository.find({
  where: {
    title: 'Hello World',
  },
})

TypeORM

const posts = await postRepository.find({
  where: {
    title: ILike('Hello World'),
  },
})

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>

TopBlock​

Code blocks​

Prisma schema​

Code block with file icon​

Code block with no copy option​

Code block without line numbers​

Terminal styled code block​

Code block wrapped​

Code block with highlighted code​

Expand/Collapse section​

Code with result​

Parallel blocks​

`TopBlock`

Code blocks

Prisma schema

Code block with file icon

Code block with no copy option

Code block without line numbers

Terminal styled code block

Code block wrapped

Code block with highlighted code

Expand/Collapse section

Code with result

Parallel blocks