SyntaxHighlighter fails to color the code on atomOneDark and Docco, possibly other themes

[sash20m]

I have a problem regarding the styles of the component where it doesn't color the code for some themes at least.

If I add no theme, hence:

const MarkdownText = ({ markdown }: { markdown: string }) => {
  return (
    <Markdown
      children={markdown}
      components={{
        code(props) {
          const { children, className, node, ...rest } = props;
          const match = /language-(\w+)/.exec(className || "");
          return match ? (
            <SyntaxHighlighter
              PreTag="div"
              children={String(children).replace(/\n$/, "")}
              language={match[1]}
            />
          ) : (
            <code {...rest} className={className}>
              {children}
            </code>
          );
        },
      }}
    />
  );
};

The code looks like this:

However, when adding atomOneDark theme from react-syntax-highlighter/dist/esm/styles/hljs, so adding the style={atomOneDark} prop to the <SyntaxHighlighter /> components, background seems to change:

I have observed in the DOM, the html code of the highlighter when there's no theme is like this: <span class="token" style="color: rgb(0, 119, 170);">function</span> for each word of the code snippet provided. When adding the atomOneDark theme though, there is no inline style with the color, so there seems to be a bug when adding the styles. Tried the docco theme and it also fails.

Also, that's my component usage in the code:

<MarkdownText
      markdown={"```javascript\nfunction createStyleObject(classNames, style) {\n return classNames.reduce((styleObject, 
                            className) => {\nreturn {...styleObject, ...style[className]};\n}, {});\n}\n```"}
/>

I have to add that I am using the latest version of NextJS - v14.0.3 and I have tailwind. I have also tried deleting my global css but didn't change anything.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome, Opera

[ApplePieGiraffe]

Same issue here, the default styles seem to be working fine but when changing to any other theme, the background changes (and so does the main text color) but none of the code is highlighted

[sash20m]

Same issue here, the default styles seem to be working fine but when changing to any other theme, the background changes (and so does the main text color) but none of the code is highlighted

Please let me know if you have found any solution. I have tried all kinds of things but none of them work. Thanks

[kyczawon]

I have the same issue, but even the default styling doesn't work for me and was only able to make things work when using this solution from 2020 and not setting the language on SyntaxHighlighter. As soon as I set a language things would stop working. I tried various SyntaxHighlighter imports & styles.

import {Light as SyntaxHighlighter} from 'react-syntax-highlighter';

import typescript from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
import {tomorrow} from 'react-syntax-highlighter/dist/esm/styles/hljs';

export const CodeBlock = () => {
    SyntaxHighlighter.registerLanguage('xml', xml);
    SyntaxHighlighter.registerLanguage('typescript', typescript);
    return (
        <SyntaxHighlighter style={tomorrow}>
            {`function App() {return true;}`}
        </SyntaxHighlighter>
    );
};

I am using Mantine for my front end, and if I put SyntaxHighlighter outside of the top level MantineProvider things work. So I suspect there is some interaction going on there between my react framework and this library...