Support code highlighting

[rickyzhangca]

Feature

specify the language for the snippet and highlight lines, see examples below (using screenshots because github can't escape ```)

Syntax

after specifying the language, specify one or multiple line ranges to highlight, surrounded by {}, it can be {integer}, {integer-integer}, or combined like {integer-integer, integer}

```java {2}
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

Examples

highlight one line

highlight multiple lines with

highlight line range with

combine them with

Note

• range parsing is handled by https://www.npmjs.com/package/parse-numeric-range
• the styling of the highlighted lines is handled by classnames so it can be further customized by client CSS later

Test plan

see the deployment below to preview it, or to test locally,

1. clone the repo
2. yarn
3. cd examples
4. cd pages-router or cd app-router
5. yarn add file:../../
6. yarn dev
7. change the files in examples/pages-router/examples/highlight.mdx or examples/app-router/examples/highlight.mdx and restart the page to see changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mdx-app-router	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 26, 2024 1:29pm
mdx-pages-router	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 26, 2024 1:29pm

[hahnbeelee]

@rickyzhangca can you provide a better test plan? What's the syntax?

[hahnbeelee]

@rickyzhangca how would this work with our current code block component?

[rickyzhangca]

@hahnbeelee

@rickyzhangca how would this work with our current code block component?

it's plug-and-play, just two things to do!

1. bump @mintlify/mdx
2. update this line of prism css in client to be #f7d87c24 to add transparency

but testing in client locally with npm link is kinda hard, i tried both npm link and yarn link and had no luck (likely because both package stat with @mintlify/... but are in different repo), i was just copying over the dist folder to node_modules in mint, and manually yarn add parse-numeric-range in mint

note: made a one line fix to remove highlighting range from the meta so the client components don't need to do it, to minimize changes needed downstream