Docusaurus: fix:DA-181 code block fixes

docs/100-getting-started/01-quickstart.mdx

@@ -69,7 +69,7 @@ This creates a new `prisma` directory with your Prisma schema file and configure
 
 The Prisma schema provides an intuitive way to model data. Add the following models to your `schema.prisma` file:
 
-```prisma file=prisma/schema.prisma
+```prisma file=prisma/schema.prisma showLineNumbers
 model User {
   id    Int     @id @default(autoincrement())
   email String  @unique
@@ -122,7 +122,7 @@ touch script.ts
 
 Then, paste the following boilerplate into it:
 
-```ts file=script.ts
+```ts file=script.ts showLineNumbers
 import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
@@ -148,19 +148,21 @@ This code contains a `main` function that's invoked at the end of the script. It
 
 Let's start with a small query to create a new `User` record in the database and log the resulting object to the console. Add the following code to your `script.ts` file:
 
-```ts file=script.ts highlight=6-12;add
+```ts file=script.ts highlight=6-12;add showLineNumbers
 import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
 async function main() {
+  // highlight-start
   const user = await prisma.user.create({
     data: {
       name: 'Alice',
       email: 'alice@prisma.io',
     },
   })
   console.log(user)
+  // highlight-end
 }
 
 main()
@@ -181,21 +183,15 @@ Next, execute the script with the following command:
 <CodeWithResult expanded={true}>
 
 <cmd>
-
 ```terminal
 npx ts-node script.ts
 ```
-
 </cmd>
-
 <cmdResult>
-
 ```code no-copy
 { id: 1, email: 'alice@prisma.io', name: 'Alice' }
 ```
-
 </cmdResult>
-
 </CodeWithResult>
 
 Great job, you just created your first database record with Prisma Client! 🎉
@@ -208,14 +204,16 @@ Prisma Client offers various queries to read data from your database. In this se
 
 Delete the previous Prisma Client query and add the new `findMany` query instead:
 
-```ts file=script.ts highlight=6-7;add
+```ts file=script.ts highlight=6-7;add showLineNumbers
 import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
 async function main() {
+  // highlight-start
   const users = await prisma.user.findMany()
   console.log(users)
+  // highlight-end
 }
 
 main()
@@ -259,12 +257,13 @@ One of the main features of Prisma Client is the ease of working with [relations
 
 First, adjust your script to include the nested query:
 
-```ts file=script.ts highlight=6-17;add
+```ts file=script.ts highlight=6-17;add showLineNumbers
 import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
 async function main() {
+  // highlight-start
   const user = await prisma.user.create({
     data: {
       name: 'Bob',
@@ -277,6 +276,7 @@ async function main() {
     },
   })
   console.log(user)
+  // highlight-end
 }
 
 main()
@@ -316,18 +316,20 @@ By default, Prisma Client only returns _scalar_ fields in the result objects of
 
 In order to also retrieve the `Post` records that belong to a `User`, you can use the `include` option via the `posts` relation field:
 
-```ts file=script.ts highlight=6-11;add
+```ts file=script.ts highlight=6-11;add showLineNumbers
 import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
 async function main() {
+// highlight-start
   const usersWithPosts = await prisma.user.findMany({
     include: {
       posts: true,
     },
   })
   console.dir(usersWithPosts, { depth: null })
+  // highlight-end
 }
 
 main()

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx

@@ -28,8 +28,9 @@ datasource db {
 
 Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For CockroachDB, you need to edit the `datasource` block to use the `cockroachdb` provider instead:
 
-```prisma file=prisma/schema.prisma highlight=2;edit
+```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers
 datasource db {
+  //edit-next-line
   provider = "cockroachdb"
   url      = env("DATABASE_URL")
 }

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx

@@ -29,8 +29,9 @@ datasource db {
 
 Note that the default schema created by `prisma init` uses PostgreSQL, so you first need to switch the `provider` to `mysql`:
 
-```prisma file=prisma/schema.prisma highlight=2;edit
+```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers
 datasource db {
+  //edit-next-line
   provider = "mysql"
   url      = env("DATABASE_URL")
 }

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx

@@ -29,19 +29,21 @@ datasource db {
 
 Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For PlanetScale, you need to edit the `datasource` block to use the `mysql` provider instead:
 
-```prisma file=prisma/schema.prisma highlight=2;edit
+```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers
 datasource db {
+  //edit-next-line
   provider = "mysql"
   url      = env("DATABASE_URL")
 }
 ```
 
 You will also need to set the relation mode type to `prisma` in order to [emulate foreign key constraints](/orm/overview/databases/planetscale#option-1-emulate-relations-in-prisma-client) in the `datasource` block:
 
-```prisma file=schema.prisma highlight=4;add
+```prisma file=schema.prisma highlight=4;add showLineNumbers
 datasource db {
   provider     = "mysql"
   url          = env("DATABASE_URL")
+  //highlight-next-line
   relationMode = "prisma"
 }
 ```

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx

@@ -29,8 +29,9 @@ datasource db {
 
 Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For CockroachDB, you need to edit the `datasource` block to use the `cockroachdb` provider instead:
 
-```prisma file=prisma/schema.prisma highlight=2;edit
+```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers
 datasource db {
+  //edit-next-line
   provider = "cockroachdb"
   url      = env("DATABASE_URL")
 }

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx

@@ -29,8 +29,9 @@ datasource db {
 
 Note that the default schema created by `prisma init` uses PostgreSQL, so you first need to switch the `provider` to `mysql`:
 
-```prisma file=prisma/schema.prisma highlight=2;edit
+```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers
 datasource db {
+  //edit-next-line
   provider = "mysql"
   url      = env("DATABASE_URL")
 }

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-mysql.mdx

@@ -51,11 +51,14 @@ Here's a quick overview of the different parts of the code snippet:
 
 Inside the `main` function, add the following query to read all `User` records from the database and print the result:
 
-```js file=index.js highlight=2;delete|3,4;add
+```js file=index.js highlight=2;delete|3,4; showLineNumbers
 async function main() {
+  //delete-next-line
   // ... you will write your Prisma Client queries here
+  //highlight-start
   const allUsers = await prisma.user.findMany()
   console.log(allUsers)
+  //highlight-end
 }
 ```
 

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-planetscale.mdx

@@ -79,6 +79,7 @@ Adjust the `main` function to send a `create` query to the database:
 
 ```js file=index.js highlight=2-21;add copy
 async function main() {
+  //highlight-start
   await prisma.user.create({
     data: {
       name: 'Alice',
@@ -99,6 +100,7 @@ async function main() {
     },
   })
   console.dir(allUsers, { depth: null })
+  //highlight-end
 }
 ```
 

docusaurus.config.ts

@@ -435,6 +435,24 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
+      magicComments: [
+        // Remember to extend the default highlight class name as well!
+        {
+          className: 'theme-code-block-highlighted-line highlighted-line code-highlight',
+          line: 'highlight-next-line',
+          block: {start: 'highlight-start', end: 'highlight-end'},
+        },
+        {
+          className: 'theme-code-block-deleted-line deleted-line code-highlight',
+          line: 'delete-next-line',
+          block: {start: 'delete-start', end: 'delete-end'},
+        },
+        {
+          className: 'theme-code-block-edited-line edited-line code-highlight',
+          line: 'edit-next-line',
+          block: {start: 'edit-start', end: 'edit-end'},
+        }
+      ]
     },
   } satisfies Preset.ThemeConfig,
 };

src/css/custom.css

@@ -1297,17 +1297,28 @@ article h6 {
   border-radius: 5px;
 }
 
+.language-terminal code > * {
+  position: relative;
+  margin-left: 16px;
+}
+.language-terminal code > *::before {
+  position: absolute;
+  content: "$";
+  right: 100%;
+  margin-right: 8px;
+}
+
 @media (max-width: 996px) {
   .clean-btn {
     z-index: 1;
     font-weight: 600;
     font-size: 18px;
     position: relative;
   }
-  nav {
+  .navbar {
     position: relative;
   }
-  nav::after {
+  .navbar::after {
     content: "";
     height: 68px;
     background-color: var(--ifm-navbar-background-color);
@@ -1364,4 +1375,4 @@ article h6 {
   .navbar-sidebar {
     z-index: 1;
   }
-}
+}

src/css/theming.css

@@ -34,7 +34,9 @@
   --ifm-card-background-color: white;
   --ifm-link-hover-color: #2E5297;
   --code-bg: var(--gray-200);
-
+  --docusaurus-highlighted-code-line-bg: #d9f4e6;
+  --docusaurus-deleted-code-line-bg: #f5e4e7;
+  --docusaurus-edited-code-line-bg: #c3dafe;
 
   --ifm-btn-border-color-active: #718096;
   --ifm-btn-border-color: #E2E8F0;

src/pages/index.tsx

@@ -117,8 +117,6 @@ function HomepageDatabasesSection() {
       </div>
       <div className={styles.databaseGrid}>
         {DatabaseData.map((e) => (
-          // <Link to={e.url}>
-          // </Link>
           <Link to={e.url} className={styles.linkCardWrapper}>
             <div className={styles.databaseEntry}>
               <img src={`/img/technologies/${e.icon}.svg`} style={{

src/theme/CodeBlock/Container/styles.module.scss

@@ -29,3 +29,20 @@
     padding-top: 0 !important;
   }
 }
+
+.file {
+  font-weight: 600;
+  color: rgb(113, 128, 150);
+  font-size: 0.875rem;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  margin-bottom: 0.5rem;
+  > span {
+    color: inherit;
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    svg {
+      margin-right: 0.5rem;
+    }
+  }
+}

src/theme/CodeBlock/Content/String.tsx

@@ -93,7 +93,7 @@ export default function CodeBlockString({
               isEnabled={wordWrap.isEnabled}
             />
           )}
-          <CopyButton className={styles.codeButton} code={code} />
+          {!metastring?.includes("no-copy") && <CopyButton className={styles.codeButton} code={code} />}
         </div>
       </div>
     </Container>

src/theme/CodeBlock/Content/styles.module.css

@@ -78,3 +78,7 @@
 :global(.theme-code-block:hover) .buttonGroup button {
   opacity: 0.4;
 }
+
+.language-terminal {
+  background-color: pink;
+}

src/theme/CodeBlock/Line/index.js → src/theme/CodeBlock/Line/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 export default function CodeBlockLine({
@@ -18,12 +18,15 @@ export default function CodeBlockLine({
   const lineTokens = line.map((token, key) => (
     <span key={key} {...getTokenProps({token, key})} />
   ));
+  const highlightedLine = classNames?.find((e:string) => e.includes("code-highlight"))
   return (
     <span {...lineProps}>
       {showLineNumbers ? (
         <>
-          <span className={styles.codeLineNumber} />
-          <span className={styles.codeLineContent}>{lineTokens}</span>
+          <span className={styles.codeLineContent}>
+            {!highlightedLine && <span className={styles.codeLineNumber} />}
+            {lineTokens}
+          </span>
         </>
       ) : (
         lineTokens