Tell us what’s happening:
The output text in the label is displayed as html even when i dont call the marked function.
Your code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:yellow;" >
<textarea id='editor' onkeyup="Preview()" cols=50 rows=10>
<h1>Nisha</h1>
<h2>Brijesh</h2>
<a href=#>link</a>
inline code
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<ol><li>item1</li></ol>
<img src='https://images.app.goo.gl/AqTzvcXYnBpumBk38' />
<b>bolded</b>
</textarea>
</div>
<div class="col-sm-6" style="background-color:pink;">
<label id='preview' ></label>
</div>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.1/marked.min.js" integrity="sha512-vDOU8ILVjHjOiDqh/68otCA4jVnZWIsvdi3YWtOecp9V4xrKdkmtI+O8ifj84hJtLh28D9kD42lM9rs63p4Grg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="script.js"></script>
</body>
</html>
document.getElementById("preview").innerHTML=(document.getElementById("editor").value)
function Preview(){
document.getElementById("preview").innerHTML=(document.getElementById("editor").value)
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
You are not supposed to add HTML in the textarea, it is supposed to be Markdown.
As an aside, I’m not sure why you are using a label element for the output. But that will produce invalid HTML. Use a different container for the output.
now i use markdown inside the textarea and div tags instead of label. it still does not interpret it as HTML correctly.
<body>
<div class="container">
<div class="row h-100">
<div class="col-md-6" style="background-color:yellow;" >
<textarea id='editor' onkeyup="Preview()" cols=50 rows=10>
#Nisha
##Brijesh
[link here](https://www.markdownguide.org/cheat-sheet/)
> For 50years, WWF has been protecting the >future of nature. >The world's leading >conservation organization, WWF works in >100 countries and is supported by 1.2 >million members in the >United States and >close to 5 million globally.1. item1
2.item2
3.item3
---
`alert('hello world!')`
**bolded**
</textarea>
</div>
<div class="col-md-6" style="background-color:pink;">
<div id='preview' ></div>
</div>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js">
</script>
<script src="script.js"></script>
</body>
document.getElementById("preview").innerHTML=marked(document.getElementById("editor").value)
console.log(marked(document.getElementById("editor").value))
function Preview(){
document.getElementById("preview").innerHTML=marked(document.getElementById("editor").value)
}
Some of your Markdown isn’t using the correct syntax. For example, for the headings, you need a space between the # and the text.
It does work for Markdown you write in the textarea. But you haven’t set up any code to use the preloaded Markdown. One simple option might be to add a DOMContentLoaded event listener. Inside the callback handler get the editor element and add the Markdown to it, I would suggest using a template literal. Then call the Preview function to render the markdown.
If you need more help with this I would appreciate it if you posted a link to your live version of the project (Codepen, etc.) so we do not have to create it every time ourselves.
