Can't make distinction between inline-code () and block-code (``)

[BenchBadr]

The issue

I've been trying for multiple hours to resolve this issue with no success.

This is what I actually have with the code below

This is what I expect with the exact same code

The variable inline mapProps is undefined so I have no way to make the distinction between a code with no language but three backticks and a code with one backticks.

import { ThemeContext } from './sidebar/ThemeContext';
import React, { useState, useEffect } from 'react';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import remarkGfm from 'remark-gfm';
import { BlockMath, InlineMath } from 'react-katex';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw'
import 'katex/dist/katex.min.css';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { tomorrowNight, solarizedLight, codepenEmbed } from 'react-syntax-highlighter/dist/esm/styles/hljs';


const _mapProps = (props) => ({
  ...props,
  remarkPlugins: [remarkMath, [remarkGfm]],
  rehypePlugins: [rehypeKatex, rehypeRaw],
  components: {
    math: ({ value }) => <BlockMath>{value}</BlockMath>,
    inlineMath: ({ value }) => <InlineMath>{value}</InlineMath>,
    code: ({ node, className, children, ...props }) => {
      console.log(className);
      const match = /language-(\w+)/.exec(className || '');
      const numBackticks = children.match(/`/g)?.length || 0;

      if (numBackticks === 1) {
        // It's inline code
        return (
          <code
            className={'inline-code'}
            style={{
              background:
                localStorage.getItem('mode') === 'dark'
                  ? 'var(--dark-low)'
                  : 'var(--light-low)',
              color: 'grey',
            }}
            {...props}
          >
            {children}
          </code>
        );
      } else {
        // It's a code block
        if (match) {
          return <CodeBlock language={`${match[1]}`} code={children} />;
        } else {
          return <CodeBlock language={``} code={children} />;
        }
      }
    },
  },
});


export const Md = ({ custom = 0, ...props }) => {
  const processChildren = (children) => {
    children = children.replace(/(^|[\s\n])@(\w+)/g, '$1<a href="/u/$2" target="_blank">@$2</a>');
  
    children = children.replace(/__{(.*?)}__/g, '<u>$1</u>');
  
    const classes = ['tips'];
    classes.forEach((cls) => {
      const regex = new RegExp(`\\{${cls}\\}\\((.*?)\\)`, 'gs');
      children = children.replace(regex, `<div class="${cls}">$1</div>`);
    });
  
    return children;
  };
  
    props['children'] = processChildren(props['children']);
  
  if (custom) {
    return <ReactMarkdown {..._mapProps(props)} />
  } else {
    return (
      <div className="markdown-body">
        <ReactMarkdown {..._mapProps(props)} />
      </div>
    );
  }
};

Thanks in advance!

[ChristianMurphy]

Welcome @BenchBadr! 👋

The difference between inline and block code.
Blocks are wrapped with a pre tag containing a code tag inside, and you can add a component for pre to style it.
Inline only have a code tag.

[iSuslov]

Desn't work for me.


Hi @ChristianMurphy. Doesn't work for me. Inline code gets wrapped into pre tag.

[BenchBadr]

Thanks a lot!

[JackBlair87]

do you have the final code you used?

[caihai123]

Hello, thank you for your reply. I have already implemented this functionality. Here's how I did it.
https://github.com/caihai123/react-admin-web/blob/master/src/components/Markdown/index.jsx