markdown/index.html at main · salivity/markdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Markdown Editor</title>

    <!-- 1. Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 2. Load marked.js (Markdown parser) -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <!-- 3. Load DOMPurify (Security sanitizer to prevent XSS) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>

    <!-- 4. Configure Tailwind to use the Inter font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        /* Simple scrollbar styling for a cleaner look */
        textarea::-webkit-scrollbar,
        div::-webkit-scrollbar {
            width: 8px;
        }
        textarea::-webkit-scrollbar-track,
        div::-webkit-scrollbar-track {
            background: #f1f5f9; /* gray-100 */
            border-radius: 10px;
        }
        textarea::-webkit-scrollbar-thumb,
        div::-webkit-scrollbar-thumb {
            background: #94a3b8; /* gray-400 */
            border-radius: 10px;
        }
        textarea::-webkit-scrollbar-thumb:hover,
        div::-webkit-scrollbar-thumb:hover {
            background: #64748b; /* gray-500 */
        }
    </style>
</head>
<body class="bg-gray-100 font-sans text-gray-900 min-h-screen">

    <div class="flex flex-col h-screen">
        <!-- Header -->
        <header class="bg-gray-800 text-white p-4 shadow-md z-10">
            <h1 class="text-2xl font-bold text-center">Real-Time Markdown to HTML Converter</h1>
        </header>

        <!-- Main Content: 2-column layout -->
        <main class="flex-1 grid md:grid-cols-2 gap-4 p-4 overflow-hidden">

            <!-- Left Panel: Markdown Input -->
            <div class="flex flex-col bg-white rounded-lg shadow-lg overflow-hidden">
                <h2 class="text-xl font-semibold p-4 bg-gray-50 border-b border-gray-200">
                    Markdown Input
                </h2>
                <textarea
                    id="markdownInput"
                    class="flex-1 w-full p-4 font-mono text-sm outline-none resize-none overflow-y-auto"
                    aria-label="Markdown Input"
                ><!-- Default Markdown text to show on load -->
# Welcome to the Markdown Editor!

This is a **real-time** preview. Start typing on the left, and see the magic happen on the right.

## Features
-   Uses `marked.js` for parsing.
-   Uses `DOMPurify` for security.
-   Styled with `Tailwind CSS`.

### Lists
Here's an unordered list:
* Item 1
* Item 2
    * Sub-item 2.1
    * Sub-item 2.2

And an ordered list:
1.  First
2.  Second
3.  Third

### Code
You can write inline code like `const greeting = "Hello";`

Or code blocks:
```javascript
function greet(name) {
    // A simple greeting function
    console.log(`Hello, ${name}!`);
}

greet('World');
```

### Quotes
> "The best way to predict the future is to invent it."
> &mdash; Alan Kay

Try editing this text to see it update!
                </textarea>
            </div>

            <!-- Right Panel: HTML Output -->
            <div class="flex flex-col bg-white rounded-lg shadow-lg overflow-hidden">
                <h2 class="text-xl font-semibold p-4 bg-gray-50 border-b border-gray-200">
                    HTML Preview
                </h2>
                <!--
                    The 'prose' class from Tailwind's typography plugin
                    nicely styles the raw HTML output.
                -->
                <div
                    id="htmlOutput"
                    class="flex-1 w-full p-6 overflow-y-auto prose prose-indigo max-w-none"
                    aria-live="polite"
                >
                    <!-- Rendered HTML will appear here -->
                </div>
            </div>

        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const markdownInput = document.getElementById('markdownInput');
            const htmlOutput = document.getElementById('htmlOutput');

            // Function to update the preview
            function updatePreview() {
                try {
                    const markdownText = markdownInput.value;

                    // 1. Parse the Markdown
                    const rawHtml = marked.parse(markdownText);

                    // 2. Sanitize the HTML to prevent XSS attacks
                    const cleanHtml = DOMPurify.sanitize(rawHtml);

                    // 3. Render the clean HTML
                    htmlOutput.innerHTML = cleanHtml;
                } catch (error) {
                    console.error("Error parsing Markdown:", error);
                    htmlOutput.innerHTML = "<p class='text-red-500'>Error parsing Markdown. Check console for details.</p>";
                }
            }

            // Listen for input events on the textarea
            markdownInput.addEventListener('input', updatePreview);

            // Initial render on page load
            updatePreview();
        });
    </script>

</body>
</html>