Reactmarkdown SyntaxHighlighter backticks and tilders break app

[norbertkross]

I have the code below which helps me display markdowns component with syntax highlighting. Everything works fine except when I input ``` which is always going to happen because am taking the markdown source from an input field.

const renderers = {
   code:({language,value})=>{
   return <SyntaxHighlighter style={dark} language={"dart"} children={value} />
}
}


export default function CodeMarkDown(props){
  return (
   <ReactMarkdown renderers={renderers} children={props.markdown}></ReactMarkDown>
)
}

As I stated earlier, whenever i input ``` or ~~~ it breaks the app before I'm able to close it with the remainng quotes with this error message

Reactmarkdown Uncaught TypeError: Cannot read property 'match' of undefined at getNewLines (highlight.js:10)

what I have tried so far:

I have tried replacing each  ```  with \`\`\` but when I do I it cant be formatted as markdown anymore. 

[wooorm]

The error “Reactmarkdown Uncaught TypeError: Cannot read property 'match' of undefined at getNewLines (highlight.js:10)” sounds like highlight.js is throwing an error. You’re probably not passing something correctly in your code component. Maybe add some console.log’s there to figure out what props you’re getting?

[norbertkross]

Ok thanks @wooorm

[norbertkross]

For anyone else who may be facing the same problem, you can find my solution here

https://stackoverflow.com/a/64849033/9398610