Reactmarkdown can not escape quotes and backticks

Question

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. 

Answer 1

After several hours of analyzing my code, I realized that the syntax highlighter was returning null when I have ``` or ~~~ (for the beginning of the code) without the closing backticks or tilders.

const renderers = {
   code:({language,value})=>{
   var newCode = value
   var oldCode = value || oldCode

   return <SyntaxHighlighter style={dark} language={"dart"} children={newCode || "" } />
}
}


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

So in this case I'm returning the old value (which is not null and does not make the app crash) whenever the new value is null