Tell us what’s happening:
i have three challenges
No 48. When the value of #markdown-input is > **this is a *quote***
but #html-output is displaying a missed up <blockquote><strong>this is a <em>quote</strong></em></blockquote> instead of
<blockquote><strong>this is a <em>quote</em></strong></blockquote>.
i have tried to handle the quote and its content first before bold, italics etc, yet the cold is failing
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 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\s?/g;
const italics = /\s?(\*|_)(.*?)\1/g;
const images = /\s?!\[(.*?)\]\((.*?)\)\s?/g;
const links = /\s?\[(.*?)\]\((.*?)\)\s?/g;
const quotes = /^\s?>\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 if (quotes.test(line)) {
let quoteContent = line.match(quotes)[1];
quoteContent = quoteContent
.replace(bold, "<strong>$2</strong>")
.replace(italics, "<em>$2</em>")
.replace(images, '<img alt="$1" src="$2"/>')
.replace(links, '<a href="$2">$1</a>');
line = `<blockquote>${quoteContent}</blockquote>`;
}
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
