Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Markdown Parser</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#818CF8', | |
| dark: '#1E293B', | |
| light: '#F8FAFC' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .markdown-body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| } | |
| .markdown-body h1 { | |
| font-size: 2em; | |
| border-bottom: 1px solid #eaecef; | |
| padding-bottom: 0.3em; | |
| margin-top: 1em; | |
| margin-bottom: 0.8em; | |
| } | |
| .markdown-body h2 { | |
| font-size: 1.5em; | |
| border-bottom: 1px solid #eaecef; | |
| padding-bottom: 0.3em; | |
| margin-top: 1em; | |
| margin-bottom: 0.8em; | |
| } | |
| .markdown-body h3 { | |
| font-size: 1.25em; | |
| margin-top: 1em; | |
| margin-bottom: 0.6em; | |
| } | |
| .markdown-body p { | |
| margin-bottom: 1em; | |
| } | |
| .markdown-body ul, .markdown-body ol { | |
| padding-left: 2em; | |
| margin-bottom: 1em; | |
| } | |
| .markdown-body blockquote { | |
| border-left: 4px solid #dfe2e5; | |
| padding: 0 1em; | |
| color: #6a737d; | |
| margin-bottom: 1em; | |
| } | |
| .markdown-body pre { | |
| background-color: #f6f8fa; | |
| padding: 1em; | |
| border-radius: 6px; | |
| overflow: auto; | |
| margin-bottom: 1em; | |
| } | |
| .markdown-body code { | |
| background-color: rgba(175,184,193,0.2); | |
| padding: 0.2em 0.4em; | |
| border-radius: 6px; | |
| font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; | |
| } | |
| .markdown-body table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| margin-bottom: 1em; | |
| } | |
| .markdown-body th, .markdown-body td { | |
| border: 1px solid #dfe2e5; | |
| padding: 6px 13px; | |
| } | |
| .markdown-body th { | |
| background-color: #f6f8fa; | |
| font-weight: 600; | |
| } | |
| .markdown-body tr:nth-child(even) { | |
| background-color: #f6f8fa; | |
| } | |
| .editor, .preview { | |
| min-height: 500px; | |
| } | |
| .resize-handle { | |
| width: 4px; | |
| background-color: #c7d2fe; | |
| cursor: col-resize; | |
| transition: background-color 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background-color: #818CF8; | |
| } | |
| .tab-btn { | |
| border-bottom: 3px solid #4F46E5; | |
| color: #4F46E5; | |
| font-weight: 600; | |
| } | |
| .syntax-highlight { | |
| color: #d63384; | |
| } | |
| .hljs { | |
| display: block; | |
| overflow-x: auto; | |
| padding: 0.5em; | |
| background: #f8f8f8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <header class="bg-gradient-to-r from-primary to-secondary text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-code text-2xl"></i> | |
| <h1 class="text-2xl md:text-3xl font-bold">Markdown Parser</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white text-primary px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> | |
| <i class="fas fa-download mr-2"></i>Export | |
| </button> | |
| <button class="bg-white text-primary px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> | |
| <i class="fas fa-share-alt mr-2"></i>Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Tabs --> | |
| <div class="flex border-b"> | |
| <button id="editor-tab" class="tab-btn px-6 py-4 text-sm md:text-base">Editor</button> | |
| <button id="preview-tab" class="px-6 py-4 text-sm md:text-base text-gray-600 hover:text-primary">Preview</button> | |
| <button id="split-tab" class="px-6 py-4 text-sm md:text-base text-gray-600 hover:text-primary">Split View</button> | |
| </div> | |
| <!-- Editor and Preview Area --> | |
| <div class="flex flex-col md:flex-row" id="content-area"> | |
| <!-- Editor --> | |
| <div class="w-full md:w-1/2" id="editor-container"> | |
| <div class="p-4 bg-gray-50 border-b md:border-b-0 md:border-r border-gray-200"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium text-gray-700"> | |
| <i class="fas fa-edit mr-2 text-secondary"></i>Markdown Editor | |
| </h3> | |
| <div class="text-sm text-gray-500"> | |
| <span id="line-count">0</span> lines | |
| </div> | |
| </div> | |
| <textarea id="editor" class="editor w-full h-96 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent font-mono text-sm" placeholder="Start typing your Markdown here..."># Welcome to Markdown Parser | |
| ## This is a simple Markdown editor | |
| You can write **bold text**, *italic text*, and even ~~strikethrough~~. | |
| ### Lists | |
| - Item 1 | |
| - Item 2 | |
| - Item 3 | |
| ### Code Block | |
| ```javascript | |
| function helloWorld() { | |
| console.log("Hello, Markdown!"); | |
| } | |
| ``` | |
| ### Blockquote | |
| > This is a blockquote. It can span multiple lines. | |
| ### Table | |
| | Syntax | Description | | |
| | ----------- | ----------- | | |
| | Header | Title | | |
| | Paragraph | Text | | |
| ### Link | |
| [Visit GitHub](https://github.com) | |
| ### Image | |
| </textarea> | |
| </div> | |
| </div> | |
| <!-- Resize Handle --> | |
| <div class="resize-handle hidden md:block" id="resize-handle"></div> | |
| <!-- Preview --> | |
| <div class="w-full md:w-1/2" id="preview-container"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-medium text-gray-700"> | |
| <i class="fas fa-eye mr-2 text-secondary"></i>Preview | |
| </h3> | |
| <div class="text-sm text-gray-500"> | |
| <span id="word-count">0</span> words | |
| </div> | |
| </div> | |
| <div id="preview" class="preview markdown-body p-4 border border-gray-300 rounded-lg overflow-auto h-96 bg-white"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Markdown Cheatsheet --> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gray-50 px-4 py-3 border-b"> | |
| <h2 class="text-lg font-semibold text-gray-800"> | |
| <i class="fas fa-book mr-2 text-primary"></i>Markdown Cheatsheet | |
| </h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="p-3 border rounded-lg"> | |
| <h3 class="font-medium text-gray-800 mb-2">Text</h3> | |
| <p><code>**Bold**</code> → <strong>Bold</strong></p> | |
| <p><code>*Italic*</code> → <em>Italic</em></p> | |
| <p><code>~~Strikethrough~~</code> → <s>Strikethrough</s></p> | |
| </div> | |
| <div class="p-3 border rounded-lg"> | |
| <h3 class="font-medium text-gray-800 mb-2">Headers</h3> | |
| <p><code># H1</code></p> | |
| <p><code>## H2</code></p> | |
| <p><code>### H3</code></p> | |
| </div> | |
| <div class="p-3 border rounded-lg"> | |
| <h3 class="font-medium text-gray-800 mb-2">Lists</h3> | |
| <p><code>- Item 1</code></p> | |
| <p><code>- Item 2</code></p> | |
| <p><code>1. Ordered 1</code></p> | |
| <p><code>2. Ordered 2</code></p> | |
| </div> | |
| <div class="p-3 border rounded-lg"> | |
| <h3 class="font-medium text-gray-800 mb-2">Other</h3> | |
| <p><code>[Link](url)</code></p> | |
| <p><code></code></p> | |
| <p><code>> Blockquote</code></p> | |
| <p><code>``` Code block ```</code></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-dark text-gray-300 py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold text-white">Markdown Parser</h3> | |
| <p class="mt-2">A simple and powerful Markdown editor</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-white transition"><i class="fab fa-github text-xl"></i></a> | |
| <a href="#" class="hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-sm"> | |
| <p>© 2023 Markdown Parser. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Marked.js | |
| marked.setOptions({ | |
| breaks: true, | |
| highlight: function(code, lang) { | |
| return code; | |
| } | |
| }); | |
| // Get DOM elements | |
| const editor = document.getElementById('editor'); | |
| const preview = document.getElementById('preview'); | |
| const lineCount = document.getElementById('line-count'); | |
| const wordCount = document.getElementById('word-count'); | |
| const editorTab = document.getElementById('editor-tab'); | |
| const previewTab = document.getElementById('preview-tab'); | |
| const splitTab = document.getElementById('split-tab'); | |
| const editorContainer = document.getElementById('editor-container'); | |
| const previewContainer = document.getElementById('preview-container'); | |
| const resizeHandle = document.getElementById('resize-handle'); | |
| const contentArea = document.getElementById('content-area'); | |
| // Initial render | |
| updatePreview(); | |
| updateCounts(); | |
| // Event listeners | |
| editor.addEventListener('input', () => { | |
| updatePreview(); | |
| updateCounts(); | |
| }); | |
| // Tab switching | |
| editorTab.addEventListener('click', () => { | |
| setActiveTab('editor'); | |
| }); | |
| previewTab.addEventListener('click', () => { | |
| setActiveTab('preview'); | |
| }); | |
| splitTab.addEventListener('click', () => { | |
| setActiveTab('split'); | |
| }); | |
| // Resize functionality | |
| let isResizing = false; | |
| resizeHandle.addEventListener('mousedown', (e) => { | |
| isResizing = true; | |
| document.body.style.cursor = 'col-resize'; | |
| e.preventDefault(); | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isResizing) return; | |
| const containerRect = contentArea.getBoundingClientRect(); | |
| const containerWidth = containerRect.width; | |
| const mouseX = e.clientX - containerRect.left; | |
| const editorWidth = (mouseX / containerWidth) * 100; | |
| const previewWidth = 100 - editorWidth; | |
| editorContainer.style.width = `${editorWidth}%`; | |
| previewContainer.style.width = `${previewWidth}%`; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isResizing = false; | |
| document.body.style.cursor = 'default'; | |
| }); | |
| // Functions | |
| function updatePreview() { | |
| const markdownText = editor.value; | |
| preview.innerHTML = marked.parse(markdownText); | |
| } | |
| function updateCounts() { | |
| // Line count | |
| const lines = editor.value.split('\n').length; | |
| lineCount.textContent = lines; | |
| // Word count | |
| const words = editor.value.trim() === '' ? 0 : editor.value.trim().length; | |
| wordCount.textContent = words; | |
| } | |
| function setActiveTab(tab) { | |
| // Reset all tabs | |
| editorTab.classList.remove('tab-btn'); | |
| previewTab.classList.remove('tab-btn'); | |
| splitTab.classList.remove('tab-btn'); | |
| editorTab.classList.add('text-gray-600'); | |
| previewTab.classList.add('text-gray-600'); | |
| splitTab.classList.add('text-gray-600'); | |
| // Hide/show elements based on tab | |
| if (tab === 'editor') { | |
| editorTab.classList.add('tab-btn'); | |
| editorContainer.classList.remove('hidden'); | |
| previewContainer.classList.add('hidden'); | |
| resizeHandle.classList.add('hidden'); | |
| } else if (tab === 'preview') { | |
| previewTab.classList.add('tab-btn'); | |
| editorContainer.classList.add('hidden'); | |
| previewContainer.classList.remove('hidden'); | |
| resizeHandle.classList.add('hidden'); | |
| } else { | |
| splitTab.classList.add('tab-btn'); | |
| editorContainer.classList.remove('hidden'); | |
| previewContainer.classList.remove('hidden'); | |
| resizeHandle.classList.remove('hidden'); | |
| editorContainer.style.width = '50%'; | |
| previewContainer.style.width = '50%'; | |
| } | |
| } | |
| // Initialize with split view | |
| setActiveTab('split'); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tatht/markdown-parser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |