Markdown Previewer - Beta Tests Not Passing

Markdown Previewer - Beta Tests Not Passing
0

#1

I’m working on the React Markdown previewer using the beta testing suite. Test #3 and #4 are not passing, but my code seems to be working. Can anyone see why these tests are not passing?

#3. When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea

#4. When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (Hint: You don’t need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked)


#2

The optional bonus requirement is not passing because when you click a link on the previewer the link does not open up another browser tab directing you to the anchor tags url.

In order for you to open up a new browser tag via an anchor tag you need to give that anchor tag a blank target.

The default markdown renderer does not add a target to the rendered anchor tag.

  • For example, your freecodecamp link is rendered as follows:
<a href="https://www.freecodecamp.com">links</a>
  • What you need is this:
<a target="_blank" href="https://www.freecodecamp.com">links</a>

In order to do this, you need to override how the marked renderer renders anchor tags so that it has a target value of blank.

As the failing test suggests go to the documentation to find out how to override renderer methods. There’s a section on there that shows you how to override the header renderer.

What you need to do it override the link renderer.

Below is a code snippet illustrating how I did this. Please try it for yourself and come back after trying.

Spoiler
    var renderer = new marked.Renderer();
    // override how the link is rendered
    renderer.link = function(href, title, text) {
      var out = '<a target="_blank" href="' + href + '"';
      if(title) {
        out += ' title="' + title + '"';
      }
      out += '>' + text + '</a>';
      return out;
    }
    console.log(marked('[links](https://www.freecodecamp.com)', { renderer: renderer })); 
  }