Fix the following bug:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dracula Markdown Editor</title>
    <style>
        /* Dracula Theme Colors */
        :root {
            --background: #282a36;
            --current-line: #44475a;
            --foreground: #f8f8f2;
            --selection: #44475a;
            --comment: #6272a4;
            --cyan: #8be9fd;
            --green: #50fa7b;
            --orange: #ffb86c;
            --pink: #ff79c6;
            --purple: #bd93f9;
            --red: #ff5555;
            --yellow: #f1fa8c;
            --bold-italic-color: #a8f5a1; /* New Color for Bold + Italic */
            --scrollbar-track: #44475a; /* Scrollbar track color */
            --scrollbar-thumb: #6272a4; /* Scrollbar thumb color */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            height: 100vh;
            background-color: var(--background);
            color: var(--foreground);
            display: flex;
            flex-direction: column;
        }

        header {
            padding: 1rem;
            background-color: var(--current-line);
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-bottom: 1px solid var(--foreground);
        }

        main {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .editor, .preview {
            width: 50%;
            padding: 1rem;
            height: 100%;
            overflow: auto;
        }

        .editor {
            background-color: var(--current-line);
            border-right: 1px solid var(--foreground);
            overflow: hidden;
        }

        .editor textarea {
            width: 100%;
            height: 100%;
            background-color: var(--current-line);
            color: var(--foreground);
            border: none;
            resize: none;
            font-size: 1rem;
            line-height: 1.5;
            font-family: 'Courier New', Courier, monospace;
            outline: none;
        }

        .preview {
            background-color: var(--background);
        }

        /* Markdown Styling */
        .preview h1 {
            color: var(--pink);
            border-bottom: 2px solid var(--foreground);
            padding-bottom: 0.3em;
            margin-bottom: 0.5em;
        }

        .preview h2 {
            color: var(--pink);
            border-bottom: 1px solid var(--foreground);
            padding-bottom: 0.3em;
            margin-bottom: 0.5em;
        }

        .preview h3 {
            color: var(--pink);
            margin-bottom: 0.5em;
        }

        .preview p {
            margin-bottom: 1em;
            line-height: 1.6;
        }

        .preview a {
            color: var(--cyan);
            text-decoration: none;
        }

        .preview a:hover {
            text-decoration: underline;
        }

        .preview strong {
            color: var(--yellow);
        }

        .preview em {
            color: var(--green);
        }

        /* New CSS for Bold + Italic Text */
        .preview strong em,
        .preview em strong {
            color: var(--bold-italic-color);
        }

        .preview code {
            background-color: var(--selection);
            color: var(--purple);
            padding: 0.2em 0.4em;
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace;
        }

        .preview pre {
            background-color: var(--selection);
            color: var(--purple);
            padding: 1em;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            margin-bottom: 1em;
        }

        .preview blockquote {
            border-left: 4px solid var(--comment);
            color: var(--comment);
            padding-left: 1em;
            margin-left: 0;
            margin-right: 0;
            font-style: italic;
        }

        .preview ul, .preview ol {
            margin-bottom: 1em;
            padding-left: 1.5em;
        }

        .preview li {
            margin-bottom: 0.5em;
        }

        /* Horizontal Rule Styling */
        .preview hr {
            border: none;
            border-top: 1px solid var(--foreground);
            margin: 1em 0;
        }

        /* Optional: Style images within the preview */
        .preview img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1em 0;
            border-radius: 4px;
        }

        /* Scrollbar Styling for WebKit Browsers */
        .editor::-webkit-scrollbar, .preview::-webkit-scrollbar {
            width: 12px;
        }

        .editor::-webkit-scrollbar-track, .preview::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 6px;
        }

        .editor::-webkit-scrollbar-thumb, .preview::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb);
            border-radius: 6px;
            border: 3px solid var(--scrollbar-track);
        }

        .editor::-webkit-scrollbar-thumb:hover, .preview::-webkit-scrollbar-thumb:hover {
            background-color: var(--cyan);
        }

        /* Scrollbar Styling for Firefox */
        .editor, .preview {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }

        /* Table Styling */
        .preview table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1em;
        }

        .preview th, .preview td {
            border: 1px solid var(--foreground);
            padding: 0.5em;
        }

        .preview th {
            background-color: var(--current-line);
            color: var(--cyan);
            text-align: left;
        }

        .preview tr:nth-child(even) {
            background-color: var(--selection);
        }

        .preview tr:hover {
            background-color: var(--comment);
        }

        /* Responsive Tables */
        @media (max-width: 600px) {
            .preview table, .preview thead, .preview tbody, .preview th, .preview td, .preview tr {
                display: block;
            }

            .preview th {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            .preview td {
                position: relative;
                padding-left: 50%;
                border: none;
                border-bottom: 1px solid var(--foreground);
            }

            .preview td::before {
                content: attr(data-header);
                position: absolute;
                left: 0;
                width: 45%;
                padding-left: 0.5em;
                font-weight: bold;
                white-space: nowrap;
                color: var(--cyan);
            }
        }
    </style>
</head>
<body>
    <header>Dracula Markdown Editor</header>
    <main>
        <div class="editor">
            <textarea id="markdown" placeholder="Type your markdown here...">
# Welcome to the Dracula Markdown Editor

Hello! 👋

This **Markdown editor** provides a smooth and efficient way to write and preview your Markdown content in real-time. Enjoy a visually appealing experience with the Dracula dark theme.

## Features

- **Real-time Preview:** See your formatted text as you type.
- **Syntax Highlighting:** Write code snippets with syntax highlighting support.
- **Nested Lists:** Create complex lists effortlessly.
- **Inline Styling:** Use *italic*, **bold**, and ***combined*** text styles.
- **Links and Images:** Easily add [links](https://www.example.com) and images.
- **Blockquotes:** Highlight important sections with blockquotes.
- **Horizontal Rules:** Separate content neatly with horizontal lines.
- **Tables:** Organize data in a structured table format.

## Getting Started

### Writing Text

You can write regular text, and apply formatting as needed:

- *Italic*
- **Bold**
- ***Bold and Italic***

### Creating Lists

#### Unordered List

- Item 1
  - Subitem 1.1
  - Subitem 1.2
    - Subsubitem 1.2.1
- Item 2

#### Ordered List

1. First item
2. Second item
   1. Subitem 2.1
   2. Subitem 2.2
      1. Subsubitem 2.2.1
3. Third item

### Adding Links and Images

You can add [links](https://www.example.com) or insert images:

![Sample Image](https://consequence.net/wp-content/uploads/2021/07/rick-astley.jpg?resize=278,156)

## Sample Table

Here's an example of a Markdown table:

| Feature             | Description                                           | Status        |
|---------------------|-------------------------------------------------------|---------------|
| Real-time Preview   | See your changes instantly as you type.               | **Enabled**   |
| Syntax Highlighting | Highlight your code snippets for better readability.  | *Enabled*     |
| Mobile Support      | Use the editor on your mobile devices seamlessly.     | *Coming Soon* |

            </textarea>
        </div>
        <div class="preview" id="preview">
            <!-- Rendered HTML will appear here -->
        </div>
    </main>

    <script>
        // Enhanced Markdown Parser with Table Support
        function parseMarkdown(markdown) {
            const lines = markdown.split('\n');
            let html = '';
            const listStack = []; // To handle nested lists
            let inCodeBlock = false;
            let inTable = false;
            let tableHeaders = [];
            let tableAlign = [];

            lines.forEach((line, index) => {
                // Handle Code Blocks
                if (line.trim().startsWith('```')) {
                    inCodeBlock = !inCodeBlock;
                    if (inCodeBlock) {
                        html += '<pre><code>';
                    } else {
                        html += '</code></pre>\n';
                    }
                    return;
                }

                if (inCodeBlock) {
                    html += escapeHTML(line) + '\n';
                    return;
                }

                // Handle Horizontal Rules
                if (/^\s*---\s*$/.test(line)) {
                    closeAllLists();
                    html += '<hr />\n';
                    return;
                }

                // Handle Headings
                const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
                if (headingMatch) {
                    if (inTable) {
                        closeTable();
                    }
                    closeAllLists();
                    const level = headingMatch[1].length;
                    const content = processInline(headingMatch[2]);
                    html += `<h${level}>${content}</h${level}>\n`;
                    return;
                }

                // Handle Blockquotes
                const blockquoteMatch = line.match(/^\s*>\s+(.*)$/);
                if (blockquoteMatch) {
                    if (inTable) {
                        closeTable();
                    }
                    closeAllLists();
                    const content = processInline(blockquoteMatch[1]);
                    html += `<blockquote>${content}</blockquote>\n`;
                    return;
                }

                // Handle Lists
                const listMatch = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
                if (listMatch) {
                    if (inTable) {
                        closeTable();
                    }
                    const indent = listMatch[1].length;
                    const marker = listMatch[2];
                    const content = processInline(listMatch[3]);

                    const listType = /^\d+\./.test(marker) ? 'ol' : 'ul';

                    if (listStack.length === 0 || indent > listStack[listStack.length - 1].indent) {
                        // New nested list
                        html += `<${listType}>\n`;
                        listStack.push({ type: listType, indent });
                    } else {
                        // Close lists if necessary
                        while (listStack.length > 0 && indent < listStack[listStack.length - 1].indent) {
                            const lastList = listStack.pop();
                            html += `</${lastList.type}>\n`;
                        }
                        // If changing list type at the same level
                        if (listStack.length > 0 && listType !== listStack[listStack.length - 1].type) {
                            const lastList = listStack.pop();
                            html += `</${lastList.type}>\n<${listType}>\n`;
                            listStack.push({ type: listType, indent });
                        }
                    }

                    html += `<li>${content}</li>\n`;
                    return;
                } else {
                    // Not a list item, close any open lists
                    closeAllLists();
                }

                // Handle Tables
                const tableMatch = line.match(/^\s*\|(.+)\|\s*$/);
                if (tableMatch) {
                    const cols = tableMatch[1].split('|').map(col => col.trim());
                    if (!inTable) {
                        // Check if next line is the header separator
                        const nextLine = lines[index + 1];
                        const separatorMatch = nextLine && nextLine.match(/^\s*\|?(\s*:?-+:?\s*\|){1,}\s*$/);
                        if (separatorMatch) {
                            inTable = true;
                            tableHeaders = cols;
                            // Extract alignment (optional)
                            tableAlign = nextLine.split('|').slice(1, -1).map(seg => {
                                seg = seg.trim();
                                if (seg.startsWith(':') && seg.endsWith(':')) return 'center';
                                if (seg.startsWith(':')) return 'left';
                                if (seg.endsWith(':')) return 'right';
                                return 'left';
                            });
                            // Start table
                            html += `<table>\n<thead>\n<tr>\n`;
                            tableHeaders.forEach((header, i) => {
                                html += `<th style="text-align: ${tableAlign[i] || 'left'};">${processInline(header)}</th>`;
                            });
                            html += `</tr>\n</thead>\n<tbody>\n`;
                            // Skip the separator line
                            return;
                        }
                    }

                    if (inTable) {
                        html += `<tr>`;
                        cols.forEach((col, i) => {
                            html += `<td style="text-align: ${tableAlign[i] || 'left'};" data-header="${tableHeaders[i]}">${processInline(col)}</td>`;
                        });
                        html += `</tr>\n`;
                        return;
                    }
                } else if (inTable && line.trim() === '') {
                    // Empty line signifies end of table
                    closeTable();
                    return;
                }

                if (inTable) {
                    closeTable();
                }

                // Handle Paragraphs
                if (line.trim() !== '') {
                    const content = processInline(line);
                    html += `<p>${content}</p>\n`;
                } else {
                    // Empty line; add a line break or skip
                    html += '';
                }
            });

            closeAllLists();
            if (inTable) {
                closeTable();
            }

            return html;

            // Helper Functions
            function escapeHTML(text) {
                return text.replace(/&/g, "&amp;")
                           .replace(/</g, "&lt;")
                           .replace(/>/g, "&gt;");
            }

            function processInline(text) {
                // Escape HTML
                let result = escapeHTML(text);

                // Images
                result = result.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, '<img src="$2" alt="$1" title="$3" />');

                // Inline Code
                result = result.replace(/`([^`]+)`/g, '<code>$1</code>');

                // Bold and Italic
                result = result.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
                result = result.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
                result = result.replace(/\*(.*?)\*/g, '<em>$1</em>');

                // Links
                result = result.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, '<a href="$2" target="_blank" title="$3">$1</a>');

                return result;
            }

            function closeAllLists() {
                while (listStack.length > 0) {
                    const lastList = listStack.pop();
                    html += `</${lastList.type}>\n`;
                }
            }

            function closeTable() {
                html += `</tbody>\n</table>\n`;
                inTable = false;
                tableHeaders = [];
                tableAlign = [];
            }
        }

        const textarea = document.getElementById('markdown');
        const preview = document.getElementById('preview');

        function updatePreview() {
            const markdownText = textarea.value;
            const html = parseMarkdown(markdownText);
            preview.innerHTML = html;
        }

        // Initial render
        updatePreview();

        // Event listener for real-time preview
        textarea.addEventListener('input', updatePreview);
    </script>
</body>
</html>

---

Bug:
The dashes have their own columns, while they are intended to separate the header from the body of the table, however, they're actually doing their job, but they are being set in the body as well, in the first row in the body