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.dev.org.tw/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[]
}
```
不含複製選項的程式碼區塊
預設情況下，所有程式碼區塊都會有一個 複製 圖示，用於複製程式碼。如果您想在程式碼區塊中停用 複製 選項，請使用 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>