Front End Development Libraries Projects - Build a Markdown Previewer

Tell us what’s happening:
Describe your issue in detail here.
I feel like i am misunderstanding something major, I created a text box with all of the stuff required, but it says it has to b rendered as html. Which i do not understand what that means, its in the html box in codepen. What does “rendered as html” mean

Your code so far
Html:

<body>
  
  <textarea id="editor">
# FreeCodeCamp Markdown Previewer
## this is a project made for [freeCodeCamp](https://www.freecodecamp.org/learn)
`//code`

//more code
>block quote

- this
- is
- a
- list
**here's some bold text too**
![an image too](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
  </textarea>
  
  <div id="preview">
  </div>
</body>

CSS:

#editor, #preview{
  width: 48%; 
  min-height: 320px;
  border-style: solid;
  border-radius: 10px;
  border-color: #55c;
  border-width: 3px;
}
#editor {
  float: left;
}
#preview {
  float: right;
}

JavaScript:

function rendermd(val) { $("#preview").html(markdown.toHTML($("#editor").val())); }
$("#editor").on('keyup', rendermd);
$(rendermd);

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/114.0.5735.124 Mobile/15E148 Safari/604.1

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

Post your Codepen.

It means to take the markdown and transform it to HTML and then put it on the page. You would use a library for the transformation and not do it by hand.

1 Like

Here is the codepen: https://codepen.io/gottro/pen/wvQGgvN?editors=1010
What library should I use?
Also did i somehow miss a section on markdown because I had never even heard of it before this challenge

You can use the Marked library linked to in the challenge description.

Markdown isn’t taught and it really doesn’t have to be. You are expected to do your own research for a lot of the certificate projects.

Markdown is just a convenient syntax for writing HTML faster. You can think of it as an HTML shorthand syntax that gets parsed and transformed into actual HTML.

# This is an h1 in Markdown

## This is an h2 in Markdown

I have marked on the codepen, but it still is not passing the test, do I need to specifically activate it somehow?

Well, you need to use it. Look at the docs.

https://marked.js.org/

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