Front End Libraries Markdown Previewer

[nelliesnoodles]

Tell us what’s happening:
Describe your issue in detail here.

No matter what I do, the marked library is translating any pre code syntax into p code. I can’t pass the tests and I’m not sure what I’m missing. The code pen is linked below. In an attempt to find whatever I did wrong, there is a console.log of the marked(text) where you can see the pre is instead a p. I also copy and pasted the placeholder from the example code to rule out a typo on my part.

Your code so far

// From the FCC example.
// the library/package marked does all the 
// markdown work.
 
/* CODE from FCC example:
https://codepen.io/freeCodeCamp/full/GrZVVO
 1)
 ALLOWS LINE BREAKS WITH RETURN BUTTON
 2)
 INSERTS target="_blank" INTO HREF TAGS (required for Codepen links)
 */

// 1)
marked.setOptions({
  breaks: true,
  highlight: function (code) {
    return Prism.highlight(code, Prism.languages.javascript, 'javascript');
  }
});
// 2)
// removing this will not prevent <pre> => <p> error
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
  return `<a target="_blank" href="${href}">${text}</a>`;
};


// End referenced CODE
//  Nellie's code below this line:




class Buttons extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return(
      <div class="options">
        <button 
          aria-label="Maximize" 
          onClick={this.props.maxClick}
          title="maximize"> &harr;
        </button>
        <button 
          aria-label="Minimize" 
          onClick={this.props.minClick}
          title="minimize"> &mdash;                   </button>
        </div>

    )
  }}


class Editor extends React.Component {
  constructor(props) {
    super(props);
    
   this.handleClickMax =this.handleClickMax.bind(this)
    this.handleClickMin = this.handleClickMin.bind(this)
    
  }
  
  handleClickMax(){
    let preview =document.getElementById('previewbox')
    preview.classList.add("minimized")
    let editor = 
        document.getElementById('editorbox')
    editor.classList.add("maximized")
  }
  
  handleClickMin(){
    let preview =document.getElementById('previewbox')
    preview.classList.remove("minimized")
    let editor = 
        document.getElementById('editorbox')
    editor.classList.remove("maximized")
  }
  render() {
    return(
    <div class="coffee beach-sand left-component flex-center-full" id="editorbox">
    <h2 class="coffee-dark headLabel"> Editor </h2>
         <Buttons maxClick={this.handleClickMax} minClick={this.handleClickMin}/>
    <textarea id="editor"
      onChange={this.props.change}> 
      {this.props.text}
      </textarea>
      </div>
      )
    
  }}

class Preview extends React.Component{
  constructor(props) {
    super(props);
    
    this.handleClickMax =this.handleClickMax.bind(this)
    this.handleClickMin = this.handleClickMin.bind(this)
    
  }
  
 
  
  handleClickMax(){
    let preview =document.getElementById('previewbox')
    preview.classList.add("maximized")
    let editor = 
        document.getElementById('editorbox')
    editor.classList.add("minimized")
  }
  
  handleClickMin(){
    let preview =document.getElementById('previewbox')
    preview.classList.remove("maximized")
    let editor = 
        document.getElementById('editorbox')
    editor.classList.remove("minimized")
  }
  
  render() {
    return(
      <div class="dark-ocean right-component flex-center-full" id="previewbox">
        <h2 class="dark-coffee headLabel"> Preview 
        </h2>
        <Buttons maxClick={this.handleClickMax} minClick={this.handleClickMin}/>
     <div class="whitebox"
      dangerouslySetInnerHTML={{
        __html: marked(this.props.text, { renderer: renderer })
      }}
     
      id="preview"
    />
       
        
       
        
        </div>
    )
  }}

class PageOperations extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      text: placeholder,
      html: marked(placeholder)
    
    };
    
    this.handleChange = this.handleChange.bind(this)
    
  }
  handleChange(){
    let newvalue = `` + event.target.value;
    console.log(marked(newvalue))
    this.setState( {
      text: newvalue,
      html: marked(newvalue)
    } );
    
    
  }
  
  
  render() {
    let editortext = this.state.text;
    let htmltext = this.state.html;
    
    
    return(
      <div id="page">
    <Editor text={editortext} change={this.handleChange}/>
      <Preview text={htmltext}/>
        </div>
    )
  }
  
}


const placeholder = 
`# 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.
**If the last back slash is not trailing, the entire component will fail to render**
\`\`\`\
// 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)

`

let element = document.getElementById('root')
ReactDOM.render(<PageOperations />, element);

Your browser information:

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

Challenge: Build a Markdown Previewer

Link to the challenge:

FCC: Markdown Previewer

[nelliesnoodles]

I found the issue to be a setting option with the marked library.
Current pen is passing all tests.
Solution - adding this and removing the code examples carriage return solution.

marked.setOptions({
  breaks: true,
  xhtml: true,
  headerIds: false,
  gfm: true
});