MDX 组件
本页面描述了如何在 Prisma 文档中使用自定义的 MDX 组件（例如代码块）。
此处未列出的组件是 Docusaurus Markdown 功能 的一部分
TopBlock
必须在页面顶部使用，以避免样式问题
<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.org.cn/docs/markdown-features)
</TopBlock>
代码块
示例
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
代码
```js
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```
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[]
}
代码
```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[]
}
```
带有文件图标的代码块
示例
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[]
}
代码
```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[]
}
```
没有复制选项的代码块
默认情况下，所有代码块都有一个 copy 图标用于复制代码。 如果你想禁用代码块中的 copy 选项，请使用 no-copy 属性。
示例
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
代码
```js no-copy
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```
没有行号的代码块
示例
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
代码
```js no-lines
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```
终端样式的代码块
示例
npm run dev
代码
```terminal
npm run dev
```
可换行的代码块
对于我们不希望有滚动框的代码块。
带有 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
没有 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 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
```
带有高亮代码的代码块
示例
test.ts
async function main() {
added code
deleted code
edited
code
highlights
over multiple
lines can be done by using
a hyphen
}
代码
```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
}```
展开/折叠部分
示例
如果你想查看更多，请展开
这里有更多！
<details>
<summary>Expand if you want to view more</summary>
Here's more!
</details>
带有结果的代码
示例
yarn prisma init
显示CLI结果
$ 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
代码
<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>
带有自定义输出文本的示例
yarn prisma init
显示一些输出结果
$ 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
代码
<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>
并行块
示例
Prisma
const posts = await postRepository.find({
where: {
title: 'Hello World',
},
})
TypeORM
const posts = await postRepository.find({
where: {
title: ILike('Hello World'),
},
})
代码
<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>