Some of my markdown text displays properly and some doesn't

I'm making a simple markdown previewer, and when I type the markdown text, some of the text displays properly, and some doesn't (the table, block quotes, the 'multi-line code' don't), also when I text-align the text, most of it centers except for the table, bullet points, and numbered lists (if that's some sort of clue), here's my code:

class Editor extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      markdownInput: defaultText
    }

  this.handleChange = this.handleChange.bind(this);
  };

  handleChange(event) {
    this.setState({
      markdownInput: event.target.value
    });
  }

  render() {
    return (
      <div className='container'>
        <h5>Editor</h5>
        <textarea id='editortext' value={this.state.markdownInput} onChange={this.handleChange}/>
        <h5>Preview</h5>
        <Preview markdownInput={this.state.markdownInput}/>
      </div>
    );
  }
}


class Preview extends React.Component {
  constructor(props) {
    super(props);
  }

  getMarkdownText() {
    var rawMarkdownText = marked(this.props.markdownInput, {sanitize: true});
    return { __html: rawMarkdownText };
  }

  render() {
    return (
      <div id='previewtext' dangerouslySetInnerHTML={this.getMarkdownText()} />
    );
  };
}

var defaultText = 
`# 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.com), 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 numbererd lists too.
1. Use just 1s if you want! 
1. But the list goes on...
- Even if you use dashes or asterisks.
* And last but not least, let's not forget embedded images:

![React Logo w/ Text](google image link that stackoverflow won't let me post, the image renders properly anyway)
`

ReactDOM.render(<Editor />, document.getElementById('app'));

and here's the link to my codepen to show you the source: https://codepen.io/canadiancoder95/pen/KKwqjoE?editors=0110

Thanks for taking the time to help me!