diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..374cfd3 --- /dev/null +++ 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 index b5c61c9..66b454e 100644 --- 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 index 1b21819..bec98c5 100644 --- 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 ( {children} diff --git a/examples/app-router/app/page.tsx b/examples/app-router/app/page.tsx index f7d88a5..af95dd5 100644 --- 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 new file mode 100644 index 0000000..c4d8463 --- /dev/null +++ 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 index 767719f..658404a 100644 --- 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 index c224d2e..c369299 100644 --- 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 index 33ad091..12a703d 100644 --- 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 index 24a45c3..13e14fc 100644 --- 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 ( {children} diff --git a/examples/app-router/tailwind.config.ts b/examples/app-router/tailwind.config.ts index cc1084e..e4ff882 100644 --- 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 new file mode 100644 index 0000000..c4d8463 --- /dev/null +++ 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 index a843cbe..658404a 100644 --- 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 index 89d8c55..c824192 100644 --- 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 index 3b184f3..e3d15a8 100644 --- 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 ; diff --git a/examples/pages-router/pages/_document.tsx b/examples/pages-router/pages/_document.tsx index 54e8bf3..e1e9cbb 100644 --- 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() { - ) + ); } diff --git a/examples/pages-router/pages/api/hello.ts b/examples/pages-router/pages/api/hello.ts index f8bcc7e..eb4cc66 100644 --- 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 -) { - res.status(200).json({ name: 'John Doe' }) +export default function handler(req: NextApiRequest, res: NextApiResponse) { + res.status(200).json({ name: 'John Doe' }); } diff --git a/examples/pages-router/pages/index.tsx b/examples/pages-router/pages/index.tsx index 5783833..bdfe849 100644 --- 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) { +export default function Home({ mdxSource }: InferGetStaticPropsType) { return (

{String(mdxSource.frontmatter.title)}

diff --git a/examples/pages-router/postcss.config.js b/examples/pages-router/postcss.config.js index 33ad091..12a703d 100644 --- 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 index b5c61c9..66b454e 100644 --- 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 index cc1084e..e4ff882 100644 --- 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 index 9774f7f..65d7f38 100644 --- a/package.json +++ b/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,25 +34,41 @@ "devDependencies": { "@mintlify/eslint-config": "^1.0.4", "@mintlify/eslint-config-typescript": "^1.0.9", + "@mintlify/prettier-config": "^1.0.1", "@mintlify/ts-config": "^2.0.2", + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@tsconfig/recommended": "1.x", + "@types/react": "^18.3.11", + "@types/react-dom": "^18.3.0", "@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.6.8", + "react": "^18.3.1", + "react-dom": "^18.3.1", "rimraf": "^5.0.1", "typescript": "^5.2.2" }, + "peerDependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, "dependencies": { + "@mdx-js/mdx": "^3.0.1", + "@mdx-js/react": "^3.0.1", + "@types/hast": "^3.0.4", + "@types/unist": "^3.0.3", "hast-util-to-string": "^2.0.0", - "next-mdx-remote": "^4.4.1", + "next-mdx-remote": "^5.0.0", "refractor": "^4.8.0", - "rehype-katex": "^6.0.3", - "remark-gfm": "^3.0.1", - "remark-math": "^5.1.1", - "remark-smartypants": "^2.0.0", + "rehype-katex": "^7.0.1", + "remark-gfm": "^4.0.0", + "remark-math": "^6.0.0", + "remark-smartypants": "^3.0.2", + "unified": "^11.0.5", "unist-util-visit": "^4.1.1" } } diff --git a/src/client/default.tsx b/src/client/default.tsx index 4786b54..2e75976 100644 --- a/src/client/default.tsx +++ b/src/client/default.tsx @@ -1,5 +1,5 @@ -import { MDXRemote } from 'next-mdx-remote'; import type { MDXRemoteProps } from 'next-mdx-remote'; +import { MDXRemote } from 'next-mdx-remote'; export const MDXComponent = ({ compiledSource, diff --git a/src/client/index.ts b/src/client/index.ts index 78f9d9b..170d789 100644 --- a/src/client/index.ts +++ b/src/client/index.ts @@ -1,2 +1,2 @@ -export * from "./default.js"; -export * from "./rsc.js"; +export * from './default.js'; +export * from './rsc.js'; diff --git a/src/client/rsc.tsx b/src/client/rsc.tsx index 8d10793..d1420b3 100644 --- a/src/client/rsc.tsx +++ b/src/client/rsc.tsx @@ -1,7 +1,7 @@ -import { MDXRemote } from "next-mdx-remote/rsc"; -import type { MDXRemoteProps } from "next-mdx-remote/rsc"; +import type { MDXRemoteProps } from 'next-mdx-remote/rsc'; +import { MDXRemote } from 'next-mdx-remote/rsc'; export const MDXServerComponent = ({ source, components }: MDXRemoteProps) => { - // @ts-expect-error: 'MDXRemote' cannot be used as a JSX component. + // @ts-ignore: 'MDXRemote' cannot be used as a JSX component. return ; }; diff --git a/src/plugins/rehype/rehypeSyntaxHighlighting.ts b/src/plugins/rehype/rehypeSyntaxHighlighting.ts index 66a055c..c5a1f2e 100644 --- a/src/plugins/rehype/rehypeSyntaxHighlighting.ts +++ b/src/plugins/rehype/rehypeSyntaxHighlighting.ts @@ -1,83 +1,145 @@ -import { Node, toString } from "hast-util-to-string"; -import { refractor } from "refractor/lib/all.js"; -import { visit } from "unist-util-visit"; -import { Parent } from "unist"; +import { toString } from 'hast-util-to-string'; +import { RefractorElement, RefractorRoot } from 'refractor'; +import { refractor } from 'refractor/lib/all.js'; +import type { Plugin } from 'unified'; +import type { Node } from 'unist'; +import { Parent } from 'unist'; +import { visit } from 'unist-util-visit'; -export const rehypeSyntaxHighlighting = (options: { +export type RehypeSyntaxHighlightingOptions = { ignoreMissing?: boolean; alias?: Record; -}) => { +}; + +export type TreeNode = RefractorElement & + Node & { + properties: { + className?: string[]; + }; + }; + +export type TreeParent = Parent & { + tagName: string; + properties: { + className?: string[]; + }; +}; + +const lineHighlightPattern = /\{(.*?)\}/; + +export const rehypeSyntaxHighlighting: Plugin<[RehypeSyntaxHighlightingOptions?], TreeNode> = ( + options = {} +) => { if (options.alias) { refractor.alias(options.alias); } - return (tree: Parent) => { - visit( - tree, - "element", - ( - node: Node & { - tagName: string; - children: Node[]; - properties: { - className?: string[]; - }; - }, - _index, - parent?: { - tagName: string; - properties: { - className?: string[]; - }; - } - ) => { - if (!parent || parent.tagName !== "pre" || node.tagName !== "code") { - return; - } + return (tree) => { + visit(tree, 'element', (node: TreeNode, _index, parent?: TreeParent) => { + if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') { + return; + } - const lang = getLanguage(node); + const lang = getLanguage(node) || 'plaintext'; - if (lang === null) { - return; + try { + parent.properties.className = (parent.properties.className || []).concat( + 'language-' + lang + ); + const code = toString(node); + const lines = code.split('\n'); + const linesToHighlight = getLinesToHighlight(node, lines.length); + + const nodes = lines.reduce( + (acc: RefractorRoot['children'], line: string, index: number) => { + const isNotEmptyLine = line.trim() !== ''; + // Line numbers start from 1 + const isHighlighted = linesToHighlight.includes(index + 1); + + if (isNotEmptyLine) { + const node: TreeNode = { + type: 'element', + tagName: 'span', + properties: { + className: [isHighlighted ? 'line-highlight' : ''], + }, + children: refractor.highlight(line, lang).children, + }; + acc.push(node); + } else { + acc.push({ type: 'text', value: line }); + } + + if (index < lines.length - 1) { + acc.push({ type: 'text', value: '\n' }); + } + return acc; + }, + [] + ); + + if (node.data?.meta) { + // remove line highlight meta + node.data.meta = (node.data.meta as string).replace(lineHighlightPattern, '').trim(); } - let result; - try { - parent.properties.className = ( - parent.properties.className || [] - ).concat("language-" + lang); - result = refractor.highlight(toString(node), lang); - node.children = result.children; - } catch (err) { - if ( - options.ignoreMissing && - /Unknown language/.test((err as Error).message) - ) { - return; - } - throw err; + node.children = nodes; + } catch (err) { + if (options.ignoreMissing && /Unknown language/.test((err as Error).message)) { + return; } + throw err; } - ); + }); }; }; -function getLanguage( - node: Node & { - tagName: string; - children: Node[]; - properties: { - className?: string[]; - }; - } -) { +function getLanguage(node: TreeNode): string | null { const className = node.properties.className || []; for (const classListItem of className) { - if (classListItem.slice(0, 9) === "language-") { - return classListItem.slice(9).toLowerCase(); + if (classListItem.slice(0, 9) === 'language-') { + const lang = classListItem.slice(9).toLowerCase(); + + if (refractor.registered(lang)) { + return lang; + } + return null; } } return null; } + +function getLinesToHighlight(node: TreeNode, maxLines: number): number[] { + const meta = + typeof node.data?.meta === 'string' + ? node.data.meta + : node.properties.className?.reduce((acc, item) => acc + ' ' + item, ''); + if (!meta) return []; + + const content = meta.match(lineHighlightPattern)?.[1]?.trim(); + if (!content) return []; + + const lineNumbers = new Set(); + + content.split(',').forEach((part) => { + const [start, end] = part.split('-').map((num) => { + const trimmed = num.trim(); + if (!/^\d+$/.test(trimmed)) return undefined; + const parsed = parseInt(trimmed, 10); + return parsed > maxLines ? maxLines : parsed; + }); + + if (!start) return; + const endLine = end ?? start; + + if (endLine < start) return; + const max = Math.min(endLine, maxLines); + for (let i = start; i <= max; i++) { + lineNumbers.add(i); + } + }); + + return Array.from(lineNumbers).sort((a, b) => a - b); +} diff --git a/src/server/index.ts b/src/server/index.ts index 843e662..4394ca2 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,12 +1,13 @@ -import { compileMDX } from "next-mdx-remote/rsc"; -import type { CompileMDXResult, MDXRemoteProps } from "next-mdx-remote/rsc"; -import { serialize } from "next-mdx-remote/serialize"; -import rehypeKatex from "rehype-katex"; -import remarkGfm from "remark-gfm"; -import remarkMath from "remark-math"; -import remarkSmartypants from "remark-smartypants"; -import { rehypeSyntaxHighlighting } from "../plugins/index.js"; -import type { SerializeOptions } from "../types/index.js"; +import type { CompileMDXResult, MDXRemoteProps } from 'next-mdx-remote/rsc'; +import { compileMDX } from 'next-mdx-remote/rsc'; +import { serialize } from 'next-mdx-remote/serialize'; +import rehypeKatex from 'rehype-katex'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; +import remarkSmartypants from 'remark-smartypants'; + +import { rehypeSyntaxHighlighting } from '../plugins/index.js'; +import type { SerializeOptions } from '../types/index.js'; export const getCompiledMdx = async ({ source, @@ -15,9 +16,9 @@ export const getCompiledMdx = async ({ parseFrontmatter = true, }: { source: string; - mdxOptions?: SerializeOptions["mdxOptions"]; - scope?: SerializeOptions["scope"]; - parseFrontmatter?: SerializeOptions["parseFrontmatter"]; + mdxOptions?: SerializeOptions['mdxOptions']; + scope?: SerializeOptions['scope']; + parseFrontmatter?: SerializeOptions['parseFrontmatter']; }) => { try { const serializedResponse = await serialize(source, { @@ -39,7 +40,7 @@ export const getCompiledMdx = async ({ ], ...(mdxOptions?.rehypePlugins || []), ], - format: mdxOptions?.format || "mdx", + format: mdxOptions?.format || 'mdx', useDynamicImport: mdxOptions?.useDynamicImport || true, }, scope, @@ -54,18 +55,16 @@ export const getCompiledMdx = async ({ } }; -export const getCompiledServerMdx = async < - TFrontmatter = Record, ->({ +export const getCompiledServerMdx = async >({ source, mdxOptions, components, parseFrontmatter = true, }: { - source: MDXRemoteProps["source"]; - mdxOptions?: SerializeOptions["mdxOptions"]; - components?: MDXRemoteProps["components"]; - parseFrontmatter?: SerializeOptions["parseFrontmatter"]; + source: MDXRemoteProps['source']; + mdxOptions?: SerializeOptions['mdxOptions']; + components?: MDXRemoteProps['components']; + parseFrontmatter?: SerializeOptions['parseFrontmatter']; }): Promise> => { return await compileMDX({ source, @@ -87,7 +86,7 @@ export const getCompiledServerMdx = async < ], ...(mdxOptions?.rehypePlugins || []), ], - format: mdxOptions?.format || "mdx", + format: mdxOptions?.format || 'mdx', useDynamicImport: mdxOptions?.useDynamicImport || true, }, parseFrontmatter, diff --git a/src/styles/prism.css b/src/styles/prism.css index d053306..5895419 100644 --- a/src/styles/prism.css +++ b/src/styles/prism.css @@ -261,17 +261,38 @@ code.language-toml .table { /********************************************************* * Line highlighting */ + pre[class*='language-'] > code[class*='language-'] { position: relative; z-index: 1; } -.line-highlight.line-highlight { - background: #f7ebc6; - box-shadow: inset 5px 0 0 #f7d87c; +.line-highlight { + background: rgb(var(--primary-light) / 0.2); + width: 100%; + display: inline-block; + position: relative; z-index: 0; } +.line-highlight::before, +.line-highlight::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + width: 1rem; + background: rgb(var(--primary-light) / 0.2); +} + +.line-highlight::before { + left: -1rem; + border-left: 4px solid rgb(var(--primary-light) / 1); +} +.line-highlight::after { + right: -1rem; +} + pre[class^='language-diff-'] { display: flex; padding-left: 2.25rem;