\n does not paste to <br>

clark-97 commented 3 years ago

Marked version: 1.2.5

Markdown flavor: i am not sure

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Marked in the browser</title>
  <style>
    blockquote {
      border-left: 6px solid #ccc;
      background-color: #f7f7f7;
      padding: 1em;
      margin: 1em 0;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked("*Write a sentence using the given vocabulary word in each of the specified parts of speech.*\n\n> **Example:**\ntarget\n Noun: *The arrow hit the **target**.*\n Verb: *The bully **targeted** the new student.*\n\ndismay\n");
  </script>
</body>
</html>

Expectation

Result

UziTech commented 3 years ago

You have to set the breaks option to true.

const markdown = "*Write a sentence using the given vocabulary word in each of the specified parts of speech.*\n\n> **Example:**\ntarget\n Noun: *The arrow hit the **target**.*\n Verb: *The bully **targeted** the new student.*\n\ndismay\n";
marked(markdown, {breaks: true});

demo with breaks demo without breaks

harryghgim commented 3 years ago

I used marked on browser, not on node environment. I did put {breaks: true} option as second argument in marked function, but it doesn't seem to be working as I expected. Did I miss something?

const markdownStr = "# I'm header\n\n\n\n## hello\n[I'm a link](https://github.com)\n- unordered list item\n1. ordered item list\n\n![](react.png)\n> That's what they said...\n\nI'm **bold**\n```\nfunction() {\n\tconsole.log('I'm inside code block')\n}\n```\nI'm `inline code`"
const preview = document.getElementById("preview")
preview.innerHTML = marked(markdownStr, {breaks: true})

console.log(preview.innerHTML)

I expect three <br /> after I'm header, but neither on console nor on browser it is rendered correctly.

On console

<h1 id="im-header">I'm header</h1>
<h2 id="hello">hello</h2>
<p><a href="https://github.com">I'm a link</a></p>
<ul>
<li>unordered list item</li>
</ul>
<ol>
<li>ordered item list</li>
</ol>
<p><img src="react.png" alt=""></p>
<blockquote>
<p>That's what they said...</p>
</blockquote>
<p>I'm <strong>bold</strong></p>
<pre><code>function() {
    console.log('I'm inside code block')
}
</code></pre>
<p>I'm <code>inline code</code></p>

On browser