Markdown Editor – My Blog

My WordPress Blog

My WordPress Blog

By saqibkhanPosted on September 26, 2024Posted in React JS ProjectsNo Comments

HTML Structure

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Markdown Editor&lt;/title&gt;
&lt;link rel="stylesheet" href="styles.css"&gt;</head>
<body>
&lt;div class="container"&gt;
    &lt;h1&gt;Markdown Editor&lt;/h1&gt;
    &lt;textarea id="markdown" placeholder="Type your Markdown here..."&gt;&lt;/textarea&gt;
    &lt;div id="preview" class="preview"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;</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, '&lt;h1&gt;')
    .replace(/#\s/g, '&lt;/h1&gt;')
    .replace(/\*\*(.*?)\*\*/g, '&lt;strong&gt;$1&lt;/strong&gt;')
    .replace(/\*(.*?)\*/g, '&lt;em&gt;$1&lt;/em&gt;')
    .replace(/\n/g, '&lt;br&gt;');

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.

Markdown Editor

Leave a Reply Cancel reply