Front End Development Libraries Projects - Build a Markdown Previewer

Tell us what’s happening:
i am having issue with code in this code previewer is not working is there anyone who can help me?

Your code so far

import React from ''
import ReactDOM from ''

  highlight: function(code){
    return Prism.highlight(code, Prism.languages.javascript,'javascript');

const renderer=new marked.Renderer(); =function(href,title,text){
  return `<a target="_blank" href="${href}">${text}</a>`;

const Editor = ({ content, handleTextareaChange }) => (
  <textarea defaultValue={content} onChange={handleTextareaChange} />

const Previewer = ({ content }) => (<div id="preview" dangerouslySetInnerHTML={{
    __html: marked(content, { renderer: renderer} )
  }} />);

const App = () => {
  const [content, setContent] = React.useState("hey this is pavan");

  const handleTextareaChange = (event) => {

  return (
    <div className="main">
      <Editor content={content} handleTextareaChange={handleTextareaChange} />
      <Previewer content={content} />

ReactDOM.render(<App />, document.querySelector("#app"));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

Depending on how you bring in the Marked lib, you may have to use the parse method.


You are more likely to get help if you post a StackBlitz/CodeSandbox/Codepen or a GitHub repo.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.