Front End Development Libraries Projects - Build a Markdown Previewer

Tell us what’s happening:

Describe your issue in detail here.
I’m pretty sure my code is doing what the tests are asking it to do (just with showdown not marked), but the tests aren’t passing. I tried using marked instead, but when I try the code won’t render at all. Do you think I can submit this as my completed project or are there things actually missing that is causing the tests to fail?

Your code so far

Your browser information:

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

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

If the project doesn’t pass the test you should not submit it. It must pass the requirements.


The initial markdown is missing some of the required elements. Read the test or requirements to see which elements.

The library has 3 options you have to add.

  1. Option making it convert ... into ellipsis (default).

  2. Option making it add an id to heading elements (default).

  3. Option to add linebreaks (not default).

Look at the docs.

I looked at the docs and tried to modify my code as you suggested. However, now the same problem I was running into with marked is happening with showdown too where my Previewer and Editor aren’t rendering at all (leading to less tests passing). (the code I had earlier had the Editor and Previewer rendering properly and it did convert the line breaks into html properly from markdown language)

link to my codepen again: https://codepen.io/cmalloy/pen/rNPyNeG

previous code for reference (though I’m starting to think the issue is how codepen loads the libraries though I might be wrong):

const defaultMarkdown = `# Your Main Header Here
## Your subheading
### Another kind of heading

Here is an example of how to write \`code\` in an inline with backticks.

\`\`\`
// This is a multiline code block
exampleArray = [
  { foodType: "pie", flavor: "apple" },
  { foodType: "ramen", flavor: "chicken" },
  { foodType: "oatmeal", flavor: "apple cinnamon" }
];
\`\`\`
;

const Editor = ({ markdownText, onInputChange }) => {
  return (
    <div id="editor-container" className="editor-container">
      <div id="editor-toolbar" className="editor-toolbar">
        <span><i className="fa-solid fa-pen-nib"></i> Editor</span>
        <i className="fa-solid fa-maximize"></i>
      </div>
      <textarea
        id="editor"
        className="editor"
        type="text"
        defaultValue={markdownText}
        onChange={onInputChange} // Use the passed onInputChange function
      />
    </div>
  );
};

const markdownConverter = new showdown.Converter();

const Previewer = ({ markdownText }) => {
  const htmlOutput = markdownConverter.makeHtml(markdownText);

  return (
    <div id="preview-container" className="preview-container">
      <div className="preview-toolbar">
        <span><i className="fa-solid fa-eye"></i> Preview</span>
        <i className="fa-solid fa-maximize"></i>
      </div>
      <div id="preview" className="preview" dangerouslySetInnerHTML={{ __html: htmlOutput }}></div>
    </div>
  );
};

const App = () => {
  const [markdownText, setMarkdownText] = React.useState(defaultMarkdown);

  const handleInputChange = (event) => {
    setMarkdownText(event.target.value);
  };

  return (
    <div id="outer-container">
      <Editor markdownText={markdownText} onInputChange={handleInputChange} />
      <Previewer markdownText={markdownText} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));   

current javascript code (it has this error despite having showdown externally rendered: Uncaught ReferenceError: Showdown is not defined):

const App = () => {
  const [markdownText, setMarkdownText] = React.useState(defaultMarkdown);

  const initializeMarkdown = () => {
    const showdown = new Showdown.Converter({
      tables: true,
      strikethrough: true,
      tasklists: true,
      smoothLivePreview: true,
    });

    const defaultMarkdown = `# Your Main Header Here
## Your subheading
### Another kind of heading

Here is an example of how to write \`code\` in an inline with backticks.

\`\`\`
// This is a multiline code block
exampleArray = [
  { foodType: "pie", flavor: "apple" },
  { foodType: "ramen", flavor: "chicken" },
  { foodType: "oatmeal", flavor: "apple cinnamon" }
];
\`\`\`

- This is a list item
- Another list item

> This is a blockquote

Here is an ![example image](https://via.placeholder.com/150) and some **bold text**.

This is a [link](https://www.example.com).

And some \`inline code\`.
`;

    const Editor = ({ markdownText, onInputChange }) => {
      // ... (unchanged)
    };

    const Previewer = ({ markdownText }) => {
      const htmlOutput = showdown.makeHtml(markdownText);

      return (
        <div id="preview-container" className="preview-container">
          {/* ... (unchanged) */}
        </div>
      );
    };

    const handleInputChange = (event) => {
      setMarkdownText(event.target.value);
    };

    ReactDOM.render(
      <div id="outer-container">
        <Editor markdownText={markdownText} onInputChange={handleInputChange} />
        <Previewer markdownText={markdownText} />
      </div>,
      document.getElementById("root")
    );
  };

  React.useEffect(() => {
    initializeMarkdown(); 
  }, []); 

  return null;
};
\`\`\`

ReactDOM.render(<App />, document.getElementById("root"));

Scripts externally rendered(in the order they’re being rendered):
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
https://unpkg.com/react@16.13.1/umd/react.development.js
https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js
https://cdnjs.cloudflare.com/ajax/libs/showdown/1.10.2/showdown.min.js
(I also tried replacing the cdn with and unpkg and got the same error)

Not sure why you made all those changes. The code you had before was fine and all you had to do was update the showdown constructor with the correct options and add the missing elements to the initial markdown. I would suggest you revert to what you had before.


You are not using the correct options. You want to look at the ellipsis, noHeaderId, and simpleLineBreaks options.

You can’t have components inside components.

There should not be anything after the mounting/render code at the bottom.

Don’t change the version of showdown

It is showdown with a lowercase s

Probably more stuff. Please just revert back to what you had.

Thank you, I’m not sure why I did that. That fixed the bonus test. I realized I was missing some things for the default editor as well and added those elements which fixed test #5. For some reason, the 4th test still isn’t passing though. (I tried adding github flavor in two different ways). The text in the containers aren’t centered anymore either for some reason.

Again here’s my codepen: FreeCodeCamp.org: Frontend Development Project: Markdown Previewer (codepen.io)

The ellipsis option is true by default you want to set it to false.

That also means you shouldn’t have that replace regex. You do not want to replace ... they need to stay as is and not be transformed.

Thank you, this fixed the remaining errors. Is there a coding error reason why it had to be set to false if the default ellipsis option is to have it converted to the unicode character?

There is no error, the default option is just not what you want in order to pass the tests. The test expects the ... to not be converted and the libs default options do convert it.

Oh, okay thank you again!