Skip to main content

react-markdown ↔ React Lib FC Wrapper to render MDX extends with plugins

react-markdown + syntax-highlighter 

<ReactMarkdown
  children={text_key + card_arrow + text_val}
  components={{
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || "")
      return !inline && match ? (
        <SyntaxHighlighter
          children={String(children).replace(/\n$/, "")}
          // style={dark}
          language={match[1]}
          PreTag="div"
          {...props}
        /\>
      ) : (
        <code
          className={className}
          {...props}
        \>
          {children}
        </code\>
      )
    },
  }}
/\>

References​