# 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/767050>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [November 10, 2025, 11:02pm UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/767050 "2025-11-10T23:02:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nnamdo](https://avatars.discourse-cdn.com/v4/letter/n/53a042/32.png) [@nnamdo](https://forum.freecodecamp.org/u/nnamdo)\
**Post date:** [November 10, 2025, 11:02pm UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/767050/1 "2025-11-10T23:02:06Z")

</div>

### Tell us what’s happening:

When #markdown-input is \> **this is a _quote_** , convertMarkdown() shld return

> **this is a _quote_**

.  
49When #markdown-input is \> **this is a _quote_** ,

> **this is a _quote_**

 shld be displayed inside #html-output. 50When #markdown-input is \> \*\*this is a \*quote\*\*\*, you should set the inner HTML of #preview to 

> **this is a _quote_** my #html-output seem to be missed up .ps help
> ### 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..."></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 */
> const markdownInput = document.getElementById("markdown-input");
> const htmlOutput = document.getElementById("html-output");
> const htmlPreview = document.getElementById("preview");
> 
> const convertMarkdown = () => {
> const input = markdownInput.value;
> const h1 = /^\s*?#\s(.*)/;
> const h2 = /^\s*?##\s(.*)/;
> const h3 = /^\s*?###\s(.*)/;
> 
> const bold = /(\*\*|__)(.*?)\1/g;
> const italics = /\s?(\*|_)(.*?)\1/g;
> const images = /\s?!\[(.*?)\]\((.*?)\)\s?/g;
> const links = /\s?\[(.*?)\]\((.*?)\)\s?/g;
> const quotes = /^\s?>\s?(.*)/;
> 
> const newLine = input.split("\n");
> let htmlLine = "";
> 
> for (let line of newLine) {
> if (h1.test(line)) {
> line = line.replace(h1, "<h1>$1</h1>");
> } else if (h2.test(line)) {
> line = line.replace(h2, "<h2>$1</h2>");
> } else if (h3.test(line)) {
> line = line.replace(h3, "<h3>$1</h3>");
> } else {
> line = `${line}`;
> }
> 
> if (bold.test(line)) {
> line = line.replace(bold, "<strong>$2</strong>");
> } 
> if (italics.test(line)) {
> line = line.replace(italics, "<em>$2</em>");
> } 
> if (images.test(line)) {
> line = line.replace(images, '<img alt ="$1" src ="$2"/>');
> } 
> if (links.test(line)) {
> line = line.replace(links, '<a href="$2">$1</a>');
> }
> if (quotes.test(line)) {
> line = line.replace(quotes, "<blockquote>$1</blockquote>");
> }
> 
> htmlLine += line;
> }
> 
> htmlOutput.textContent = htmlLine
>   
> htmlPreview.innerHTML = htmlLine;
> return htmlLine
> };
> 
> markdownInput.addEventListener("input", convertMarkdown);
> 
> ```
> 
> ### 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`
> 
> ### Challenge Information:
> 
> Build a Markdown to HTML Converter - Build a Markdown to HTML Converter  
> [https://www.freecodecamp.org/learn/full-stack-developer/lab-markdown-to-html-converter/build-a-markdown-to-html-converter](https://www.freecodecamp.org/learn/full-stack-developer/lab-markdown-to-html-converter/build-a-markdown-to-html-converter)

---

<div class="post-metadata">

**Author:** ![Naomi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/naomi/32/422181_2.png) [@Naomi](https://forum.freecodecamp.org/u/Naomi)\
**Post date:** [January 13, 2026, 6:37pm UTC](https://forum.freecodecamp.org/t/build-a-markdown-to-html-converter-build-a-markdown-to-html-converter/767050/2 "2026-01-13T18:37:14Z")

</div>

Closed on January 13, 2026, 6:37pm UTC