Markdown Editor

—

by

in React JS Projects

HTML Structure

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Markdown Editor</h1>
        <textarea id="markdown" placeholder="Type your Markdown here..."></textarea>
        <div id="preview" class="preview"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

cssCopy codebody {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.preview {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
}

JavaScript (script.js)

javascriptCopy code// Function to convert Markdown to HTML
function markdownToHtml(markdown) {
    // Using a simple regex for basic Markdown conversion
    let html = markdown
        .replace(/#/g, '<h1>')
        .replace(/#\s/g, '</h1>')
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        .replace(/\n/g, '<br>');
    
    return html;
}

// Event listener for textarea
document.getElementById('markdown').addEventListener('input', function() {
    const markdownText = this.value;
    const html = markdownToHtml(markdownText);
    document.getElementById('preview').innerHTML = html;
});

How to Use

Create three files: index.html, styles.css, and script.js.
Copy the respective code into each file.
Open index.html in a web browser.
Start typing Markdown in the textarea, and the HTML preview will update in real-time.

Comments

Leave a Reply Cancel reply