Markdown Previewer Challenge - Marked js fails to parse code blocks

JavaScript
1

Tell us what’s happening:
Alright, so I am currently working on the challenges for the Front End Development certification. Unfortunately, the markdown previewer puts up a bit of a fight.

Technically, I am done. Everything works as intended, Marked JS is included and parses the strings as the textArea is written in. However, whenever I try to include a code block for user story 5, the entire editor window goes blank. It happens both with enclosing backticks ((content)) as well as tildes (~(content)~), but only once the block is completed.

I read through the documentation and looked up errors of that kind, but found nothing helpful. A peek at the example previewer the challenge offers did not help, either; it passes marked(text, {renderer}), which is a syntax I found no documentation for and that does not work even if I copy the example code wholesale to check.

Help would be appreciated, I have no idea what causes this or how to solve it.

Your code so far

//const DEFAULT_TEXT = "";
//removed the long string, it's irrelevant

marked.setOptions({
  breaks: true,
  highlight: function (code) {
    return Prism.highlight(code, Prism.languages.javascript, 'javascript');
  }
});

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: DEFAULT_TEXT
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      text: event.target.value
    });
  }
  render() {
    return (
      <div>
        <div id="editDiv">
          <h1>Enter your text/code here:</h1>
          <Editor 
          text={this.state.text}
          onChange={this.handleChange}
          />
        </div>
          <Preview text={this.state.text}
            />
      </div>
      );
    }
  }

          
const Editor = (props) => {
  return (
    <textarea
      id="editor"
      rows="10"
      onChange={props.onChange}
      type="text"
      value={props.text}
    />
  );
};

const Preview = (props) => {
  return (
    <div
      id="preview"
      dangerouslySetInnerHTML={{
        __html: marked.parse(props.text)
      }}
    />
  );
};

ReactDOM.render(<App />, document.getElementById('previewer'));

Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Build a Markdown Previewer

Link to the challenge:

2

Well, I found the issue and may now feel dumb, as one does when the devil’s in the details.

After removing the generic markedjs-import I got from the github page and adding it directly to the external JS scripts in codepen (same as the example does, in fact the exact same address as the example uses), the parsing works as intended. All tests come back green, problem solved.

3

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