Support code highlighting

.prettierrc

@@ -0,0 +1 @@
+"@mintlify/prettier-config/config.js"

examples/app-router/app/page.tsx

@@ -1,20 +1,20 @@
-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.mdx');
 
   const { content, frontmatter } = await getCompiledServerMdx<{
     title: string;
+    description: string;
   }>({
-    source: fileContentData,
+    source: data.toString(),
   });
 
   return (
-    <article className="prose mx-auto py-8">
+    <article className="prose mx-auto py-12">
       <h1>{frontmatter.title}</h1>
+      <h2>{frontmatter.title}</h2>
       {content}
     </article>
   );

examples/app-router/examples/highlight.mdx

@@ -0,0 +1,90 @@
+---
+title: 'Line Highlighting'
+description: 'Highlights specific lines and/or line ranges'
+---
+
+Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Then specify which lines you would like to highlight in a pair of curly brackets.
+
+### Highlighting a line
+
+````md
+```java {2}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {2}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+### Highlighting multiple lines
+
+````md
+```java {2,4}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {2,4}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+### Highlighting a line range
+
+````md
+```java {1-5}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {1-5}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+### Combining them together
+
+````md
+```java {1,3-4,6}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {1,3-4,6}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+    }
+}
+```

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"

examples/pages-router/examples/highlight.mdx

@@ -0,0 +1,90 @@
+---
+title: 'Line Highlighting'
+description: 'Highlights specific lines and/or line ranges'
+---
+
+Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Then specify which lines you would like to highlight in a pair of curly brackets.
+
+### Highlighting a line
+
+````md
+```java {2}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {2}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+### Highlighting multiple lines
+
+````md
+```java {2,4}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {2,4}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+### Highlighting a line range
+
+````md
+```java {1-5}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {1-5}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+### Combining them together
+
+````md
+```java {1,3-4,6}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+    }
+}
+```
+````
+
+```java {1,3-4,6}
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+        System.out.println("Hello, World!");
+    }
+}
+```

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"

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.mdx');
 
   const mdxSource = await getCompiledMdx({
-    source: fileContentData,
+    source: data.toString(),
   });
 
   return {
@@ -21,13 +19,11 @@ 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">
+    <article className="prose mx-auto py-12">
       <h1>{String(mdxSource.frontmatter.title)}</h1>
-
+      <h2>{String(mdxSource.frontmatter.description)}</h2>
       <MDXComponent {...mdxSource} />
     </article>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/mdx",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "Markdown parser from Mintlify",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -34,20 +34,24 @@
   "devDependencies": {
     "@mintlify/eslint-config": "^1.0.4",
     "@mintlify/eslint-config-typescript": "^1.0.9",
+    "@mintlify/prettier-config": "^1.0.6",
     "@mintlify/ts-config": "^2.0.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@tsconfig/recommended": "1.x",
     "@typescript-eslint/eslint-plugin": "6.x",
     "@typescript-eslint/parser": "6.x",
     "eslint": "8.x",
     "eslint-config-prettier": "8.x",
     "eslint-plugin-unused-imports": "^3.x",
     "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "rimraf": "^5.0.1",
     "typescript": "^5.2.2"
   },
   "dependencies": {
     "hast-util-to-string": "^2.0.0",
     "next-mdx-remote": "^4.4.1",
+    "parse-numeric-range": "^1.3.0",
     "refractor": "^4.8.0",
     "rehype-katex": "^6.0.3",
     "remark-gfm": "^3.0.1",