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

JavaScript
1

Tell us what’s happening:

Hi FCC staff,
My solution passes all the tests and looks ok. But my concern is whether my solution is performant when the markdown file for example gets bigger.
My solution seems to covert everything again at every addition of a new character which to me looks unnecessary.
I believe there are other ways to do this but then the tests might not pass.
Are there any improvements that can done so that text that has already been converted can be ignored for conversion?

Thanks!!

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

</body>

</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 */
const mdInput = document.getElementById("markdown-input");
const htmlOutput = document.getElementById("html-output");
const preview = document.getElementById("preview");

mdInput.addEventListener("input", () => {
  htmlOutput.innerText = convertMarkdown();
  preview.innerHTML = convertMarkdown();
});

function convertMarkdown() {
  const markdown = mdInput.value;
  const headingRegex = /^(#{1,3})\s+(.*)/gm;
  let html = markdown.replace(headingRegex, (_, level, content) => {
    level = level.length;
    return `<h${level}>${content}</h${level}>`;
  });

  const boldRegex = /\*\*(.+)\*\*/gm;
  html = html.replace(boldRegex, (_, content) => {
    return `<strong>${content}</strong>`;
  });

  const boldRegex2 = /__(.+)__/gm;
  html = html.replace(boldRegex2, (_, content) => {
    return `<strong>${content}</strong>`;
  });

  const italicsRegex1 = /\*(.+)\*/gm;
  html = html.replace(italicsRegex1, (_, content) => {
    return `<em>${content}</em>`;
  });

  const italicsRegex2 = /_(.+)_/gm;
  html = html.replace(italicsRegex2, (_, content) => {
    return `<em>${content}</em>`;
  });

  const imgRegex = /!\[(.+)\]\((.+)\)/gm;
  html = html.replace(imgRegex, (_, alt, src) => {
    return `<img alt=${`"${alt}"`} src=${`"${src}"`}>`;
  });

  const linkRegex = /\[(.+)\]\((.+)\)/gm;
  html = html.replace(linkRegex, (_, text, href) => {
    return `<a href=${`"${href}"`}>${text}</a>`;
  });

  const blockquoteRegex = /^>\s+(.+)/gm;
  html = html.replace(blockquoteRegex, (_, content) => {
    return `<blockquote>${content}</blockquote>`;
  });
  return html;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

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

2

this is an exercise for you, if you want a more performant way and also complete way to parse markdown you would use a library that already does that, like marked.js, not implement it by hand

1 Like