Error: Unknown language: g is not registered

[mohamadresaaa]

Hello
For example when I code snippet:

function name() { }

I put it and want to specify the language of the code, this error is displayed for me

The piece of code I wrote in the program:

<ReactMarkdown children={markdown} rehypePlugins={[rehypeHighlight]} remarkPlugins={[remarkGfm]} />

I think the rehypeHighlight plugin caused this error
How can I fix this problem, please help me

[wooorm]

Please provide much more information.

[mohamadresaaa]

I have a textarea in which I write the markdown value
For example, when I write this code in textarea:
```js
function name() { }
‍```
Everything is working properly but when I want to overwrite js to html, the error:
Error: Unknown language: g is not registered

[wooorm]

That error is thrown when something like the following is written:

```g
asdasd
```

Typically, if a plugin throws an error, you’ll find more information in the readme of that plugin.
In this case, you can reach its API docs: https://github.com/rehypejs/rehype-highlight#unifieduserehypehighlight-options.
Specifically, when reading that, you’ll find an option that you can use to not throw an error for missing languages: https://github.com/rehypejs/rehype-highlight#optionsignoremissing.

[mohamadresaaa]

Yes, if I type something like this and want to change g, this error occurs

[ChristianMurphy]

@mohamadresaaa have you tried the options @wooorm noted?
If you have and you are still seeing the issue, could you share a reproducible example.
A minimal sandbox goes a long way to better understanding what you are asking, some starters could include:

description	codesandbox	stackblitz
remark only (for markdown to markdown)	codesandbox	stackblitz
remark and rehype (for markdown to html)	codesandbox	stackblitz
react-markdown	codesandbox	stackblitz

[abdulmajeed33]

The rehypeHighlight plugin caused the error, here is full code and error:

Code

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import 'highlight.js/styles/github.css'; // Import a CSS file for styling

const MarkdownRenderer = ({ message, fontSize }) => {
  const markdownContent = `
To configure the environment variable for Python on Windows, follow these steps:

1. **Open PowerShell:**
- Run PowerShell from the Start menu by searching for it and hitting Enter.

2. **Set the Environment Variable:**
- Enter the following command in PowerShell:
\`\`\`powershell
[Environment]::SetEnvironmentVariable("Path", "\$env:Path;C:\\Python27", "User")
\`\`\`

3. **Restart PowerShell or Computer:**
- Close PowerShell and start it again to ensure the changes take effect.
- If Python still isn’t recognized, you may need to restart your computer.

This will correctly configure the environment variable for Python.
`;

  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeHighlight]}
      components={{
        code: ({ node, ...props }) => (
          <code className="p-1 rounded-lg bg-black/10" {...props} />
        ),
        a: ({ node, ...props }) => (
          <a
            href="#"
            className="text-blue-500 hover:text-blue-700"
            target="_blank"
            {...props}
          />
        ),
        p: ({ node, ...props }) => (
          <p {...props} data-testid="chat-response" />
        ),
      }}
      className={`${!fontSize && `text-sm`
        } overflow-hidden leading-7 prose max-w-full justify-center items-center ${message.textColor
        } ${fontSize && `text-${fontSize}`}`}
    >
      {markdownContent}
    </ReactMarkdown>
  );
};

export default MarkdownRenderer;

Error

[wooorm]

No longer, since a year ago. Update it.
Or, if you want to stay on the old version, configure it.
https://github.com/rehypejs/rehype-highlight/releases/tag/7.0.0

[abdulmajeed33]

Thanks! I updated it and now it works !!

[abdulmajeed33]

Hi ! I got following error today after building with nextJs npm run build command

[wooorm]

Use the latest react-markdown and the latest rehype-highlight.

[abdulmajeed33]

Thanks once again !! 👍