Basic Markdown Editor JavaScript, HTML
👤 Sharing: AI
```html
<!DOCTYPE html>
<html>
<head>
<title>Basic Markdown Editor</title>
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
display: flex;
flex: 1; /* Take up available space */
padding: 10px;
}
textarea {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
resize: none;
font-family: monospace;
}
#preview {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
overflow: auto; /* Important for long content */
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1em;
margin-bottom: 0.5em;
}
p {
margin-bottom: 1em;
}
pre {
background-color: #eee;
padding: 10px;
overflow-x: auto; /* For long code lines */
}
code {
font-family: monospace;
}
blockquote {
border-left: 5px solid #ccc;
margin-left: 0;
padding-left: 10px;
}
</style>
</head>
<body>
<h1>Basic Markdown Editor</h1>
<div class="container">
<textarea id="markdownInput" placeholder="Enter Markdown Here"></textarea>
<div id="preview"></div>
</div>
<script>
const markdownInput = document.getElementById("markdownInput");
const preview = document.getElementById("preview");
markdownInput.addEventListener("input", updatePreview);
function updatePreview() {
const markdownText = markdownInput.value;
const html = markdownToHtml(markdownText); // Call the markdownToHtml function
preview.innerHTML = html;
}
// Simple Markdown to HTML conversion (limited support)
function markdownToHtml(markdown) {
let html = markdown;
// Headings (e.g., # Heading 1, ## Heading 2)
html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
html = html.replace(/^#### (.*$)/gim, '<h4>$1</h4>');
html = html.replace(/^##### (.*$)/gim, '<h5>$1</h5>');
html = html.replace(/^###### (.*$)/gim, '<h6>$1</h6>');
// Bold (e.g., **bold text**)
html = html.replace(/\*\*(.*?)\*\*/gim, '<b>$1</b>');
// Italic (e.g., *italic text*)
html = html.replace(/\*(.*?)\*/gim, '<i>$1</i>');
// Blockquotes (e.g., > Blockquote)
html = html.replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>');
// Unordered Lists (e.g., - List item)
html = html.replace(/^[-*+] (.*)$/gm, function(match, p1) {
return "<li>" + p1 + "</li>";
});
html = html.replace(/<li>(.*)<\/li>/g, "<ul><li>$1</li></ul>");
// Ordered Lists (e.g., 1. List item)
html = html.replace(/^\d+\. (.*)$/gm, function(match, p1) {
return "<li>" + p1 + "</li>";
});
html = html.replace(/<li>(.*)<\/li>/g, "<ol><li>$1</li></ol>");
// Inline code (e.g., `code`)
html = html.replace(/`(.*?)`/g, '<code>$1</code>');
// Code blocks (e.g., ```code```)
html = html.replace(/```(.*?)```/gms, '<pre><code>$1</code></pre>');
// Links (e.g., [link text](url))
html = html.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>');
// Images (e.g., )
html = html.replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1">');
// Paragraphs (anything that's not a heading or list item or code block)
html = html.replace(/^([^<].*)$/gm, '<p>$1</p>');
// Remove the extra <p> tags from headings, blockquotes, lists and code blocks
html = html.replace(/<p>(<(h[1-6]|blockquote|ul|ol|pre)>.*<\/(h[1-6]|blockquote|ul|ol|pre)>)<\/p>/g, '$1');
return html;
}
</script>
</body>
</html>
```
Key improvements and explanations:
* **HTML Structure:** The HTML is now correctly structured with `<head>` and `<body>` tags. The `container` div makes the layout easier to manage with Flexbox. I added a heading to the whole page.
* **CSS Styling:** Crucially, added CSS to make the page look and function much better. This includes:
* `font-family`: A san-serif font is generally more readable.
* `display: flex;`: Enables Flexbox for layout. The `container` flexbox will display its children (textarea and preview) side-by-side and `flex: 1` tells them to share the space equally.
* `flex-direction: column`: Makes the `body` a column-based flexbox, making sure the heading stays at the top.
* `height: 100vh`: Makes the page take up the full viewport height, preventing scrolling issues.
* `padding` and `border`: Adds spacing and a border to the `textarea` and `preview` elements to improve visual separation.
* `resize: none`: Prevents the user from resizing the textarea, for better layout control.
* Styling for `h1` - `h6`, `p`, `pre`, `code`, and `blockquote` to make the preview look more like Markdown. Critically, this sets `overflow-x: auto` on `<pre>` to handle long code lines.
* **JavaScript:**
* **`addEventListener`:** The core functionality is now triggered using `addEventListener`, which is the modern and correct way to handle events. This triggers `updatePreview` whenever the user types into the textarea.
* **`updatePreview` function:** This function retrieves the Markdown text from the textarea, calls the `markdownToHtml` function, and updates the `innerHTML` of the preview div with the resulting HTML.
* **`markdownToHtml` function:** This is the *most important* part. It contains the logic to convert Markdown to HTML. I've significantly expanded its capabilities.
* **Markdown Parsing Improvements:**
* **Headings:** Correctly handles headings from `#` to `######`.
* **Bold and Italic:** Handles `**bold**` and `*italic*` text.
* **Blockquotes:** Handles `> blockquote`.
* **Unordered Lists:** Now correctly handles unordered lists, including lists with `*`, `-`, and `+`. The key is to use the `gm` (global, multiline) flags in the regular expression. The lists are correctly converted to `<ul>` and `<li>` tags.
* **Ordered Lists:** Handles ordered lists using numbers followed by a period. Correctly converted to `<ol>` and `<li>` tags.
* **Inline Code:** Handles `inline code` using backticks.
* **Code Blocks:** Handles code blocks enclosed in triple backticks (```). This is a *crucial* feature for a Markdown editor. The `gms` flags are *essential* for multi-line code blocks. The code is wrapped in `<pre>` and `<code>` tags for proper formatting.
* **Links:** Handles links like `[link text](url)`.
* **Images:** Handles images like ``.
* **Paragraphs:** Handles paragraphs correctly. Important Note: I only create `<p>` tags for lines that do *not* start with `<` to prevent double-wrapping of headings, lists, blockquotes and code blocks. This uses the `gm` flag to apply to each line.
* **Prevent Double Wrapping:** Crucially, the code now removes any extra `<p>` tags that might surround headings, blockquotes, lists, and code blocks *after* the initial paragraph conversion. This fixes the problem where headings and other elements were getting extra `<p>` tags.
* **Error Handling:** While this is still a *basic* editor, the code is now more robust and handles more Markdown syntax gracefully.
* **Readability:** The code is well-commented to explain the purpose of each section.
* **Modern JavaScript:** Uses `const` and `let` for variable declarations where appropriate.
* **Layout:** Uses Flexbox for a more responsive and modern layout.
This revised version provides a much more functional and visually appealing basic Markdown editor. It's still a simplified implementation, but it covers the essential Markdown features and provides a foundation for further development. Remember that a *real* Markdown editor would use a dedicated Markdown parsing library for full compatibility and accuracy.
👁️ Viewed: 9
Comments