Build a Markdown Previewer - Multiline code throws error

App.tsx

import { useState, useEffect } from 'react'
import './App.css'
// import Markdown from "react-markdown";
// import remarkGfm from 'remark-gfm';
import { marked } from 'marked';
marked.setOptions({
  gfm: true, // Enable GitHub flavored markdown
  breaks: true, // Enable line breaks in markdown
});


function Editor({value,sendEvent}){
  return(
    <>
    <div className='editor'>
      <h2>Editor</h2>
      <textarea value={value} name="editor-text" id="editor" onChange={sendEvent}></textarea>
    </div>
    </>
  )
}

function Previewer({markdown}){

  let m = marked.parse(markdown,{gfm: true, breaks:true});
  console.log(m)
  return(
      <div id="preview" dangerouslySetInnerHTML={{ __html: m }} />
  )
}

function App() {
  const [markdownText, setMarkdownText] = useState('')
  useEffect(()=>{
    const markdown = `# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:

Heres some code, `<div></div>`, between 2 backticks.

```
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '```' && lastLine == '```') {
    return multiLineCode;
  }
}

You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.org), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbered lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:

![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
`;
    setMarkdownText(markdown)
  }, [])

  const changeMarkdown = (event) =>{
      setMarkdownText(event.target.value);
  }
  return (
    <>
      <div id="container">
        <h1>Welcome to My React Markdown previewer</h1>
        <div id='review_editor'>
          <Editor value={markdownText} sendEvent={changeMarkdown}/>
          <Previewer markdown={markdownText} />
          </div>
        </div>
    </>
  )
}

export default App

marked installed
react setup created with vite

share this “codepen/repl” link as well, that way it becomes much easier to troubleshoot, thanks and happy coding :slight_smile:

You have to escape the backticks inside the template literal.