This post is no longer maintained and may contain outdated information or examples incompatible with current tools and practices. Here is an example of syntax highlighting with `react-syntax-highlighter` and `react-markdown` in Next.js: ```tsx{5} const Hello = () => { return (

Let's dive into syntax highlighting!

) } export default Hello ``` So, how is it done? Much of the information available online refers to a [now-deprecated](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15) approach. The `renderer` API is no longer available. After some digging through [the documentation](https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight), here is how you can add code syntax highlighting to a Next.js project using TypeScript. ### Install the Dependencies ```bash npm install react-markdown react-syntax-highlighter ``` If you are using TypeScript, you will also need the corresponding type definitions: ```bash npm install @types/react-syntax-highlighter --save-dev ``` ### Configure the `ReactMarkdown` Component I will assume that you already have a page or component that processes Markdown. When using `react-markdown`, you may have a component named `Markdown.tsx` that looks something like this: ```tsx // Markdown.tsx import { FC } from 'react' import ReactMarkdown from 'react-markdown' type MarkdownProps = { markdown: string & { content?: string } } const Markdown: FC = ({ markdown }) => { return ( {markdown.content} ) } export default Markdown ``` In this basic example, the `ReactMarkdown` component receives raw Markdown from `markdown.content`. You can adapt this value to match the structure of your own project. Next, add the `components` prop to `ReactMarkdown`. This will allow us to provide a custom renderer for code elements in the following steps. ```tsx{12-14,18} // Markdown.tsx import { FC } from 'react' import ReactMarkdown from 'react-markdown' type MarkdownProps = { markdown: string & { content?: string } } const Markdown: FC = ({ markdown }) => { const MarkdownComponents: object = { // Syntax highlighting code will go here } return ( {markdown.content} ) } export default Markdown ``` ### Choose the Correct `SyntaxHighlighter` Import The [official documentation](https://github.com/react-syntax-highlighter/react-syntax-highlighter#react-syntax-highlighter) covers the available builds in detail, but here are the main considerations: * Unless you want to add a large amount of JavaScript to your Markdown pages, use the [Light Build](https://github.com/react-syntax-highlighter/react-syntax-highlighter#light-build). This requires you to import and register each language you intend to highlight. * When this post was written, Next.js projects required changing theme imports from `dist/esm` to `dist/cjs`. Full ESM support was still being tracked in [this Next.js issue](https://github.com/vercel/next.js/issues/9607). * To highlight TSX or JSX, use Prism. Highlight.js does not support those languages. For the rest of this guide, I will use the Prism Light Build with CommonJS imports. I will add support for TSX, TypeScript, SCSS, Bash, Markdown, and JSON. Import only the languages you need. You can find the full list of [languages supported by Prism here](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD). ```tsx{4-18} // Markdown.tsx import { FC } from 'react' import ReactMarkdown from 'react-markdown' import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter' import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx' import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typescript' import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss' import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash' import markdown from 'react-syntax-highlighter/dist/cjs/languages/prism/markdown' import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json' SyntaxHighlighter.registerLanguage('tsx', tsx) SyntaxHighlighter.registerLanguage('typescript', typescript) SyntaxHighlighter.registerLanguage('scss', scss) SyntaxHighlighter.registerLanguage('bash', bash) SyntaxHighlighter.registerLanguage('markdown', markdown) SyntaxHighlighter.registerLanguage('json', json) type MarkdownProps = { markdown: string & { content?: string } } const Markdown: FC = ({ markdown }) => { const MarkdownComponents: object = { // Syntax highlighting code will go here } return ( {markdown.content} ) } export default Markdown ``` ### Configure `SyntaxHighlighter` and Add Line Highlighting Now we can begin adding the custom code renderer. We will import a [Prism theme](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD) and `parse-numeric-range`, which will handle the line-number ranges used by our highlighting logic. ```tsx{4-5,13,14-55} // Markdown.tsx ... import rangeParser from 'parse-numeric-range' import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism' type MarkdownProps = { markdown: string & { content?: string } } const Markdown: FC = ({ markdown }) => { const syntaxTheme = oneDark const MarkdownComponents: object = { code({ node, inline, className, ...props }) { const hasLang = /language-(\w+)/.exec(className || '') const hasMeta = node?.data?.meta const applyHighlights: object = (lineNumber: number) => { if (hasMeta) { const RE = /{([\d,-]+)}/ const metadata = node.data.meta?.replace(/\s/g, '') const stringLineNumbers = RE.test(metadata) ? RE.exec(metadata)?.[1] || '0' : '0' const highlightLines = rangeParser(stringLineNumbers) const data: string | null = highlightLines.includes(lineNumber) ? 'highlight' : null return { data } } return {} } return hasLang ? ( {props.children} ) : (


      )
    },
  }

  ...
}

export default Markdown
```

Here is what the line-highlighting logic is doing:

* First, we check whether metadata exists to avoid errors when it is undefined.
* Inside `applyHighlights`, we define a regular expression that looks for line numbers enclosed in curly braces.
* We then remove spaces from the metadata string.
* `stringLineNumbers` checks the metadata against the regular expression and extracts numbers, commas, and ranges.
* `rangeParser()` converts the range into an array of individual line numbers.
* Finally, we check whether the current line should be highlighted and apply a `data="highlight"` attribute when it matches.

We can now target `data="highlight"` with CSS. The exact styling will depend on the visual design of your project.

### Controlling Line Highlighting in Markdown

Once the `ReactMarkdown` and `SyntaxHighlighter` components are configured, you can specify highlighted lines directly in the Markdown code fence:

````markdown
```tsx {3-4, 8}
```
````

Add comma-separated line numbers or ranges inside curly braces. In this example, lines `3`, `4`, and `8` will be highlighted.

### Adding Custom CSS

You can target the rendered `ReactMarkdown` and `SyntaxHighlighter` elements with custom CSS.

You may need to use `!important` for some styles generated by the syntax highlighter. This is not ideal, but it can be necessary when overriding inline or library-provided styles.


The following example uses CSS-in-JS with Emotion. Note the class names and adapt the styles to match your own CSS setup.


```tsx{10-29,37,47}
// Markdown.tsx
...

const Markdown: FC = ({ markdown }) => {
  ...

  const styleMarkdown = css({
    '.codeStyle, pre, code, code span': {
      // SyntaxHighlighter override styles
    },
    code: {
      // General code styles
    },
    'pre code': {
      // Code block styles
    },
    'h3 code': {
      color: 'inherit'
    },
    'span.linenumber': {
      display: 'none !important'
    },
    '[data="highlight"]': {
      // Custom line highlight styles
    },
  })

  const MarkdownComponents: object = {
    code({ node, inline, className, ...props }) {
      ...

      return hasLang ? (
        
          {props.children}
        
      ) : (
        
      )
    }
  }

  return (
    
      {markdown.content}
    
  )
}

...
```

### Fixing Mobile Highlighting Issues

Prism has a known issue where a highlighted line's background color may not extend beyond the viewport.

When a code block is wider than a mobile screen and the user scrolls horizontally, the highlighted background can end abruptly at the original viewport width.

Some suggested solutions involve wrapping the `pre` element in another container and applying additional styles. The following workaround is simpler:

```scss
code: {
  transform: translateZ(0);
  min-width: 100%;
  float: left;

  & > span {
    display: block;
  }
}
```

It relies on a float, but it resolves the issue.

### Removing Line Numbers

The `showLineNumbers` prop must be set to `true` for this line-highlighting implementation to work.

To hide the visible line numbers while preserving the highlighting behavior, use the following CSS:

```scss
span.linenumber {
  display: none;
}
```

A more flexible implementation could accept additional metadata for options such as titles or enabling and disabling line numbers, but that is outside the scope of this guide.

You should now have syntax highlighting for Markdown code blocks in React, including support for highlighting selected lines.

---

Thanks to [Prince](https://prince.dev/highlight-with-react) for the helpful write-up and the function that inspired this implementation. His guide is particularly useful for projects using Gatsby or `prism-react-renderer`.

Building: between

Building: manifold.observer