# Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

**URL:** <https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [May 12, 2026, 7:57pm UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670 "2026-05-12T19:57:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![silentlion-ux](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/silentlion-ux/32/415294_2.png) [@silentlion-ux](https://forum.freecodecamp.org/u/silentlion-ux)\
**Post date:** [May 12, 2026, 7:57pm UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670/1 "2026-05-12T19:57:25Z")

</div>

### Tell us what’s happening:

Another newbie here complaining that their code DOES past the tests, I’m afraid (which it does).

Also, if my suspicion is right that it doesn’t like me bypassing appendChild() by just sticking tags into innerHTML, can anyone explain that? What’s the difference between writing, say, blah into the HTML file (which creates a child) and doing the same thing with javascript? Shouldn’t that also append a child in the same way? If I’m doing other things wrong, please tell me of course!  
Thanks

### Your code so far

```html
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Markdown to HTML Converter</h1>
    <div id="container">
        <div class="container">
            <h2>Markdown Input:</h2>
            <textarea id="markdown-input" placeholder="Enter your markdown here..."
            onchange="runConverter()"></textarea>
        </div>
        <div class="container">
            <h2>Raw HTML Output:</h2>
            <div id="html-output"></div>
        </div>
        <div class="container">
            <h2>HTML Preview:</h2>
            <div id="preview"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

```

```css
/* file: styles.css */
* {
     box-sizing: border-box;
}
 body {
     font-family: Arial, sans-serif;
     padding: 20px;
}
 #markdown-input {
     width: 100%;
     height: 100px;
}
 #html-output, #preview {
     height: 100px;
     display: inline-block;
     width: 100%;
     border: 1px solid #ccc;
     padding: 10px;
     margin: auto;
     white-space: pre-wrap;
     background-color: #f9f9f9;
}
 @media (min-width: 600px) {
     #markdown-input, #html-output, #preview {
         height: 200px;
         margin: 0;
    }
     #container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
    }
}

```

```js
/* file: script.js */
function convertMarkdown(){
  let input = document.getElementById("markdown-input").value;
  function convert() {
    let rawHTML = input;
    return function(regex="",replacement=""){
      rawHTML = rawHTML.replaceAll(regex, replacement);
      return rawHTML;
    }
  }
  const markdowns = [
    [/^\>\s{0,1}(.{1,})/gm,"<blockquote>$1</blockquote>"],
    [/^\#{3}\s{0,1}(.{0,})/gm,"<h3>$1</h3>"],
    [/^\#{2}\s{0,1}(.{0,})/gm,"<h2>$1</h2>"],
    [/^\#\s{0,1}(.{0,})/gm,"<h1>$1</h1>"],
    [/\_{2}(.{0,})\_{2}/gm,"<strong>$1</strong>"],
    [/\*{2}(.{0,})\*{2}/gm,"<strong>$1</strong>"],
    [/\*(.{0,})\*/gm,"<em>$1</em>"],
    [/\_(.{0,})\_/gm,"<em>$1<em/>"],
    [/\!\[(.{0,})\]\((.{1,})\)/gm,`<img alt="$1" src="$2">`],
    [/\[(.{0,})\]\((.{1,})\)/gm,`<a href="$2">$1</a>`]
  ];
  let converter = convert();
  for (let i=0; i<markdowns.length; i++){
    converter(...markdowns[i]);
  }
  return converter();
}

function runConverter(){
  let rawBox = document.getElementById("html-output");
  let previewBox = document.getElementById("preview");
  let convertedText = convertMarkdown();
  rawBox.innerText = convertedText;
  previewBox.innerHTML = convertedText;
}

```

### Your browser information:

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

### Challenge Information:

Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/javascript-v9/lab-markdown-to-html-converter/build-a-markdown-to-html-converter)**
>
> Learn to Code — For Free

Github Link: [freeCodeCamp/curriculum/challenges/english/blocks/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md at main · freeCodeCamp/freeCodeCamp · GitHub](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md)

---

<div class="post-metadata">

**Author:** ![silentlion-ux](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/silentlion-ux/32/415294_2.png) [@silentlion-ux](https://forum.freecodecamp.org/u/silentlion-ux)\
**Post date:** [May 12, 2026, 8:44pm UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670/2 "2026-05-12T20:44:07Z")

</div>

There’s no “edit” feature I can see on the OP, so this:

> [@silentlion-ux](#):
>
> writing, say, blah into the HTML file

Was meant to be: writing, say, `<h1>blah</h1>` into the HTML file

Apologies!

---

<div class="post-metadata">

**Author:** ![dhess](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dhess/32/406235_2.png) [@dhess](https://forum.freecodecamp.org/u/dhess)\
**Post date:** [May 13, 2026, 12:40am UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670/3 "2026-05-13T00:40:38Z")

</div>

Welcome to the forum @silentlion-ux!

When I enter `# title 1` into the “Markdown Input” `textarea`, nothing happens until I click out of the `textarea`.

Please take a look at the example app to see how that should work.

Happy coding!

---

<div class="post-metadata">

**Author:** ![silentlion-ux](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/silentlion-ux/32/415294_2.png) [@silentlion-ux](https://forum.freecodecamp.org/u/silentlion-ux)\
**Post date:** [May 13, 2026, 8:18am UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670/4 "2026-05-13T08:18:02Z")

</div>

Thank you! I’ll continue working on it.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [June 10, 2026, 8:18am UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/788670/5 "2026-06-10T08:18:33Z")

</div>

Closed on June 10, 2026, 8:18am UTC

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