Spaces:

tatht
/

markdown-parser

Running

App Files Files Community

tatht commited on Jun 7, 2025

Commit

2bd0113

verified ·

1 Parent(s): f87bf4e

Trang web parse markdown - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +404 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Markdown Parser
-emoji: 👁
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: markdown-parser
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,404 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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
+![Markdown Logo](https://markdown-here.com/img/icon256.png)</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>![Image](src)</code></p>
+                        <p><code>&gt; 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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Trang web parse markdown