Front End Challenge. Markdown Help

I am having trouble with the markdown challenge. Please excuse that it looks like crap. I am trying to get the nuts and bolts working first then try and beautify it. To be honest, i have no idea what to do with the markdown translation, i just googled it and have been trying to make it fit in my preview section. I believe it is partway working, because the breaks are being translated and they wouldnt be if it wasnt working at all (i believe).

any help would be appreciated

Rob

const defaultText = `#Lorem
      ##lorem
      ###lorem
      1. helo
      2. world
      3.
      4.
      5.
      6.
      7
      8
      9
      10
      11
      12
      `

class TextArea extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      message: defaultText
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event){
    this.setState({
      message: event.target.value
    })
  }
  render(){
    return (
    <div>
        <h1>Markdown Editor</h1>
        <textarea id='editor' value={this.state.message} onChange={this.handleChange} cols='75' rows='10' />
        <Preview message={this.state.message} />
    </div>
    )
  }
}

marked.setOptions ({
  renderer: new marked.Renderer(),
  breaks: true
});

class Preview extends React.Component {
  constructor(props){
    super(props)
  }
  render (){
    
    return (
    <div>
        <div id='preview' dangerouslySetInnerHTML={{__html: marked(this.props.message)}} />
        
    </div>
    )
  }
}






ReactDOM.render(<TextArea/>,document.getElementById('root'));

This is more or less the idea. You need an element to input raw markdown and an element to display rendered markdown and it looks like you have those.

Posting a codepen or similar will get you better help since it’s much easier to see what the code is actually doing while running as opposed to eyeballing the source, especially since it’s not obvious what problem you’re having.

my apologies. i wasn’t sure the correct way to share a challenge.

i belive that gets you to the codepen

I’m still not sure of the problem. You can input markdown and it renders. Most of passing the last two tests is just getting the correct starting markdown in the editor. It’s not rendering correctly right now because you have spacing issues:

#lorem

is not the same as

# lorem

No space before and space between # and the header text.

I would just grab a markdown tutorial and start experimenting with text in the editor you have coded now since it’s working.

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