Merge pull request #7 from mintlify/deep/eng-3060-code-blocks-line-highlighting

dks333 · web-flow · commit db78d1b09a7f · 2024-10-22T11:52:50.000-07:00
Deep/eng 3060 code blocks line highlighting
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+"@mintlify/prettier-config/config.js"
diff --git a/examples/app-router/app/globals.css b/examples/app-router/app/globals.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --primary-light: 85 215 153;
+  }
+}
diff --git a/examples/app-router/app/layout.tsx b/examples/app-router/app/layout.tsx
@@ -1,17 +1,14 @@
-import type { Metadata } from "next";
-import "@/app/globals.css";
-import "@mintlify/mdx/dist/styles.css";
+import '@mintlify/mdx/dist/styles.css';
+import type { Metadata } from 'next';
+
+import '@/app/globals.css';
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>{children}</body>
diff --git a/examples/app-router/app/page.tsx b/examples/app-router/app/page.tsx
@@ -1,15 +1,13 @@
-import { getCompiledServerMdx } from "@mintlify/mdx";
+import { getCompiledServerMdx } from '@mintlify/mdx';
+import { promises as fs } from 'fs';
 
 export default async function Home() {
-  const fileContentResponse = await fetch(
-    "https://raw.githubusercontent.com/mintlify/starter/main/essentials/code.mdx"
-  );
-  const fileContentData = await fileContentResponse.text();
+  const data = await fs.readFile(process.cwd() + '/examples/highlight-example.mdx');
 
   const { content, frontmatter } = await getCompiledServerMdx<{
     title: string;
   }>({
-    source: fileContentData,
+    source: data.toString(),
   });
 
   return (
diff --git a/examples/app-router/examples/highlight-example.mdx b/examples/app-router/examples/highlight-example.mdx
@@ -0,0 +1,51 @@
+---
+title: 'Line Highlighting'
+description: 'Highlights specific lines and/or line ranges'
+---
+
+This MDX file demonstrates syntax highlighting for various programming languages.
+
+## JavaScript
+
+```js index.js {2}
+console.log('Hello, world!');
+function add(a, b) {
+  return a + b;
+}
+
+function subtract(a, b) {
+  return a - b;
+}
+```
+
+## Python
+
+```python index.py {1-2,4-5}
+def add(a, b):
+    return a + b
+
+def subtract(a, b):
+    return a - b
+```
+
+## Java
+
+```java {3}
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+## C#
+
+```csharp index.cs {1,3-4}
+public class Program
+{
+    public static void Main(string[] args)
+    {
+        Console.WriteLine("Hello, World!");
+    }
+}
+```
diff --git a/examples/app-router/next.config.js b/examples/app-router/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mintlify/mdx": "^0.0.43",
+    "@mintlify/mdx": "^0.0.44",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"
diff --git a/examples/app-router/postcss.config.js b/examples/app-router/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/app-router/readme.md b/examples/app-router/readme.md
@@ -13,7 +13,7 @@ You can check out the demo of [this page](https://github.com/mintlify/mdx/blob/m
 1. Call the `getCompiledServerMdx` function inside your async React Server Component which will give you the `frontmatter` and `content`.
 
    ```tsx
-   import { getCompiledServerMdx } from "@mintlify/mdx";
+   import { getCompiledServerMdx } from '@mintlify/mdx';
 
    export default async function Home() {
      const { content, frontmatter } = await getCompiledServerMdx({
@@ -38,19 +38,15 @@ You can check out the demo of [this page](https://github.com/mintlify/mdx/blob/m
 2. Import `@mintlify/mdx/dist/styles.css` inside your `layout.tsx` file. This file contains the styles for the code syntax highlighting.
 
    ```tsx
-   import type { Metadata } from "next";
-   import "@mintlify/mdx/dist/styles.css";
+   import '@mintlify/mdx/dist/styles.css';
+   import type { Metadata } from 'next';
 
    export const metadata: Metadata = {
-     title: "Create Next App",
-     description: "Generated by create next app",
+     title: 'Create Next App',
+     description: 'Generated by create next app',
    };
 
-   export default function RootLayout({
-     children,
-   }: {
-     children: React.ReactNode;
-   }) {
+   export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body>{children}</body>
diff --git a/examples/app-router/tailwind.config.ts b/examples/app-router/tailwind.config.ts
@@ -1,20 +1,19 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [require('@tailwindcss/typography')],
 };
 export default config;
diff --git a/examples/pages-router/examples/highlight-example.mdx b/examples/pages-router/examples/highlight-example.mdx
@@ -0,0 +1,51 @@
+---
+title: 'Line Highlighting'
+description: 'Highlights specific lines and/or line ranges'
+---
+
+This MDX file demonstrates syntax highlighting for various programming languages.
+
+## JavaScript
+
+```js index.js {2}
+console.log('Hello, world!');
+function add(a, b) {
+  return a + b;
+}
+
+function subtract(a, b) {
+  return a - b;
+}
+```
+
+## Python
+
+```python index.py {1-2,4-5}
+def add(a, b):
+    return a + b
+
+def subtract(a, b):
+    return a - b
+```
+
+## Java
+
+```java {3}
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+## C#
+
+```csharp index.cs {1,3-4}
+public class Program
+{
+    public static void Main(string[] args)
+    {
+        Console.WriteLine("Hello, World!");
+    }
+}
+```
diff --git a/examples/pages-router/next.config.js b/examples/pages-router/next.config.js
@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mintlify/mdx": "^0.0.43",
+    "@mintlify/mdx": "^0.0.44",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"
diff --git a/examples/pages-router/pages/_app.tsx b/examples/pages-router/pages/_app.tsx
@@ -1,7 +1,7 @@
-import "@/styles/globals.css";
-import "@mintlify/mdx/dist/styles.css";
+import '@mintlify/mdx/dist/styles.css';
+import { AppProps } from 'next/app';
 
-import { AppProps } from "next/app";
+import '@/styles/globals.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
diff --git a/examples/pages-router/pages/_document.tsx b/examples/pages-router/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/pages-router/pages/api/hello.ts b/examples/pages-router/pages/api/hello.ts
@@ -1,13 +1,10 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
+export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+  res.status(200).json({ name: 'John Doe' });
 }
diff --git a/examples/pages-router/pages/index.tsx b/examples/pages-router/pages/index.tsx
@@ -1,15 +1,13 @@
-import { MDXComponent, getCompiledMdx } from "@mintlify/mdx";
-import type { MDXCompiledResult } from "@mintlify/mdx";
-import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import type { MDXCompiledResult } from '@mintlify/mdx';
+import { MDXComponent, getCompiledMdx } from '@mintlify/mdx';
+import { promises as fs } from 'fs';
+import type { GetStaticProps, InferGetStaticPropsType } from 'next';
 
 export const getStaticProps = (async () => {
-  const fileContentResponse = await fetch(
-    "https://raw.githubusercontent.com/mintlify/starter/main/essentials/code.mdx"
-  );
-  const fileContentData = await fileContentResponse.text();
+  const data = await fs.readFile(process.cwd() + '/examples/highlight-example.mdx');
 
   const mdxSource = await getCompiledMdx({
-    source: fileContentData,
+    source: data.toString(),
   });
 
   return {
@@ -21,9 +19,7 @@ export const getStaticProps = (async () => {
   mdxSource: MDXCompiledResult;
 }>;
 
-export default function Home({
-  mdxSource,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
+export default function Home({ mdxSource }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <article className="prose mx-auto py-8">
       <h1>{String(mdxSource.frontmatter.title)}</h1>
diff --git a/examples/pages-router/postcss.config.js b/examples/pages-router/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/pages-router/styles/globals.css b/examples/pages-router/styles/globals.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --primary-light: 85 215 153;
+  }
+}
diff --git a/examples/pages-router/tailwind.config.ts b/examples/pages-router/tailwind.config.ts
@@ -1,20 +1,19 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [require('@tailwindcss/typography')],
 };
 export default config;
diff --git a/package.json b/package.json
diff --git a/src/client/default.tsx b/src/client/default.tsx
diff --git a/src/client/index.ts b/src/client/index.ts
diff --git a/src/client/rsc.tsx b/src/client/rsc.tsx
diff --git a/src/plugins/rehype/rehypeSyntaxHighlighting.ts b/src/plugins/rehype/rehypeSyntaxHighlighting.ts
diff --git a/src/server/index.ts b/src/server/index.ts
diff --git a/src/styles/prism.css b/src/styles/prism.css
