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

JavaScript
1

Tell us what’s happening:

I think it’s the image that is giving me the problem; however, I am failing 1 - 51. I see no output from any of the boxes (Raw HTML Output and HTML Preview);

Your code so far

<!-- 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>
</body>
<script src="script.js"></script>
</html>

/* 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;
    }
}

/* file: script.js */

//this is my markdown function
function convertMarkdown(){
  const input = document.getElementById("markdown-input").value

  let html = input;

  //these are the headings
  html = html.replace(/^###\s(.+)$/gm, "<h3>$1</h3>");
  html = html.replace(/^##\s(.+)$/gm, "<h2>$1</h2>");
  html = html.replace(/^#\s(.+)$/gm, "<h1>$1</h1>");

  //this is the bold text
  html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
  html = html.replace(/__(.*?)__/g, "<strong>$1</strong>");


//this is the italics
  html = html.replace(/\*(.*?)\*/g, "<em>$1</em>");
  html = html.replace(/_(.*?)_/g, "<em>$1</em>");

//this is for the image
  html = html.replace(/

  \[(.*)\]

  \((.*?)\)/g `<img alt="$1" src="$2">`);


//this links: [text](url)
  html = html.replace(/

  \[(.*?)\]

  \((.*?)\)/g, `a href=$2">$1</a>`;

//this is the blockquote:>quote
  html = html.replace(/^\s*>\s(.+)$/gm, "<blockquote>$1</blockquote>");


//display HTML
  document.getElementById("html-output").textContent = html;

//render HTML
  document.getElementById("preview").innerHTML = html;

  return html;
}

Your browser information:

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

Challenge Information:

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

2

Hi @BooBoo212

Checkout the HTML page. It will give you an idea of what you need to update.

Happy coding

3

don’t you get a syntax error in the console for these lines?

4

Yes! Not understand why?

5

SyntaxError: unknown: Unterminated regular expression. (24:23)

What is this telling you?

6

you are not following syntax rules for the regex, so you are getting that error

are the new lines and spaces part of the regex?

1 Like
7 
//image
  } else if (/!\[.*?\]\(.*?\)/.test(line)) {
  result +=line.replace(/!\[().*?)\]\((.*?)\)/g, `<img alt="$1" src="$2">`;
8

SyntaxError: unknown: Unexpected token, expected “,” (26:74)

9

can you share your updated code? what is line 26, character 74?

10 
result +=line.replace(/!\[().*?)\]\((.*?)\)/g, `<img alt="$1" src="$2">`;

Use the color coding to guide you finding the problem with this line.

What is the replace() method syntax?

1 Like
11

can you erase all my old codes please for "Build a Markdown to HTML converter? I start from scratch and make brand new codes when one doesn’t work. The one I have now actually works; I have text in all threes boxes in the console. Just still having problems with my regex block.

12

post your updated code here if you need more help.

If you want to edit your old posts you can do that, but I would advice against that, people have helped you so far, and others may benefit from the discussion