Problem getting markdown previewer to read inline code

Problem getting markdown previewer to read inline code
0

#1

I´m having a hard time getting the previewer to read the inline code. I know it has something to be with string literals, but I can´t quite figure it out. Here´s the code:

import React, { Component } from 'react';
import './App.css';
import MarkdownExample from "./previewer";


class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: `# h1 Heading 
              ## h2 Heading
              Here´s a link too: (http://dev.nodeca.com)
              Inline `code`

              Indented code

              // Some comments
              line 1 of code
              line 2 of code
              line 3 of code
              Block code "fences"

An image:

![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

Ordered list

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_`


    };

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

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



  render() {
    return (
           <div>
          <textarea id="editor" rows="30" cols="50" value={this.state.value} onChange={this.handleChange}/>
          <MarkdownExample value={this.state.value}/>
          </div>
    );
  }
}
 export default Editor;

Previewer:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked(this.props.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div id="preview" dangerouslySetInnerHTML={this.getMarkdownText()} />
  }
}

export default MarkdownExample;
import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked(this.props.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div id="preview" dangerouslySetInnerHTML={this.getMarkdownText()} />
  }
}

export default MarkdownExample;
import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked(this.props.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div id="preview" dangerouslySetInnerHTML={this.getMarkdownText()} />
  }
}

export default MarkdownExample;

#2

The problem is likely to be here:

dangerouslySetInnerHTML={this.getMarkdownText()}

You are immediately invoking the getMarkdownText function. Try removing the (). You may also need to add .bind(this) in its place, as you refer to this within the getMarkdownText function.


#3

Thanks for the reply. I tried that but it doesn´t seem to work (I get a different error). The error I am getting with the string literal is:

              ## h2 Heading
              Here´s a link too: (http://dev.nodeca.com)
              Inline " is not a function

#4

Your state.value has back ticks ( ` ) nested within back ticks, cutting the string short. Try changing the first and last back ticks to a single quote.


#5

Thank you for answering. I tried that, but now it´s not even reading the quotes properly:

value: '# h1 Heading 
              ## h2 Heading
              Here´s a link too: (http://dev.nodeca.com)
              Inline `code`

              Indented code

              // Some comments
              line 1 of code
              line 2 of code
              line 3 of code
              Block code "fences"

An image:

![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.

Ordered list

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_'


#6

Ah, yes, because state.value is on multiple lines it needs to start and end with a back tick ` . You will need to escape any internal backticks by putting a backslash \ before them.