rehype-highlight not working with some languages, code is not highlighted

I'm using rehype-highlight with Next.js MDX for syntax highlighting, but my Erlang code blocks are not being highlighted. The code appears as plain text without any syntax colors.

Here's an example of my Erlang code block:

```erlang
-module(hello).
-export([greet/1]).

greet(Name) ->
    io:format("Hello, ~s!~n", [Name]).

start() ->
    greet("World").
```

The code block shows up without any syntax highlighting, even though I have rehype-highlight configured in my next.config.ts. Other languages like JavaScript and Python work fine, but Erlang doesn't get highlighted.

Solution

The issue is that rehype-highlight by default only supports a limited set of 37 languages defined in the common object of the lowlight library. Erlang is not included in this default set, which is why your code blocks aren't being highlighted.

1. Check Current Configuration

First, verify your current next.config.ts setup:

import type { NextConfig } from "next";
import createMDX from '@next/mdx'
import rehypeHighlight from 'rehype-highlight';

const nextConfig: NextConfig = {
  // ... your config
};

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [rehypeHighlight], // This only supports 37 common languages
  }
})
 
export default withMDX(nextConfig)

2. Solution: Configure Language Support

You have two options to fix this:

Option A: Support All Languages To support all available languages (including Erlang), modify your configuration:

import type { NextConfig } from "next";
import createMDX from '@next/mdx'
import rehypeHighlight from 'rehype-highlight';
import { all } from 'lowlight';

const nextConfig: NextConfig = {
  // ... your config
};

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [
      [rehypeHighlight, { languages: all }] // Supports all languages
    ],
  }
})
 
export default withMDX(nextConfig)

Option B: Support Specific Languages Only If you want to support only specific languages (for better performance), import them individually:

import type { NextConfig } from "next";
import createMDX from '@next/mdx'
import rehypeHighlight from 'rehype-highlight';
import erlang from 'highlight.js/lib/languages/erlang';
import rust from 'highlight.js/lib/languages/rust';
import javascript from 'highlight.js/lib/languages/javascript';

const nextConfig: NextConfig = {
  // ... your config
};

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [
      [rehypeHighlight, { 
        languages: {
          erlang,
          rust,
          javascript
        }
      }]
    ],
  }
})
 
export default withMDX(nextConfig)

3. Verify the Fix

After updating your configuration, restart your development server:

npm run dev

Your Erlang code blocks should now be properly highlighted:

-module(hello).
-export([greet/1]).

greet(Name) ->
    io:format("Hello, ~s!~n", [Name]).

start() ->
    greet("World").

4. Performance Considerations

Option A (all languages): Larger bundle size but supports everything
Option B (specific languages): Smaller bundle size, only includes what you need

Choose based on your needs - if you only use a few specific languages, Option B is more efficient.

Alternative #1

If you're still having issues after configuring the languages, check if you need to install additional dependencies. Sometimes the language support requires extra packages:

npm install highlight.js

Also, make sure your highlight.js CSS is properly imported in your MDX layout. The syntax highlighting won't work without the CSS styles:

// In your MDX layout component
import "@/app/styles/highlight-js.css"

If you're using a custom theme, make sure it includes styles for the specific language tokens that Erlang uses.

Alternative #2

Another approach is to use a different syntax highlighting library that has better language support out of the box. Consider switching to rehype-prism or rehype-shiki:

npm install rehype-prism-plus

Then update your configuration:

import rehypePrism from 'rehype-prism-plus';

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [rehypePrism],
  }
})

These alternatives often have better language support and more consistent highlighting across different languages.

Alternative #3

If you want to stick with rehype-highlight but need to debug which languages are actually supported, you can check the available languages programmatically:

import { common } from 'lowlight';

console.log('Supported languages:', Object.keys(common));

This will show you exactly which 37 languages are supported by default. You can also check if a specific language is available:

import { common } from 'lowlight';

if ('erlang' in common) {
  console.log('Erlang is supported by default');
} else {
  console.log('Erlang needs to be explicitly imported');
}

This helps you understand exactly what's happening with your language support.