Spaces:

tatht
/

markdown-parser-1

Running

App Files Files Community

tatht commited on Jun 9, 2025

Commit

d96bd6b

verified ·

1 Parent(s): 448677d

Tạo ra trang web parse markdown - Initial Deployment

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: markdown-parser-1
+emoji: 🐳
+colorFrom: green
+colorTo: green
 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,358 @@
-<!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>Responsdown - Markdown Parser</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4F46E5',
+                        secondary: '#818CF8',
+                        dark: '#1E293B',
+                        light: '#F8FAFC'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .markdown-body {
+            background-color: #0F172A;
+            color: #E2E8F0;
+            border-radius: 0.5rem;
+            padding: 1.5rem;
+            overflow: auto;
+        }
+        .markdown-body h1,
+        .markdown-body h2,
+        .markdown-body h3,
+        .markdown-body h4,
+        .markdown-body h5,
+        .markdown-body h6 {
+            color: #E2E8F0;
+            border-bottom: 1px solid #334155;
+            padding-bottom: 0.3em;
+            margin-top: 1.5em;
+            margin-bottom: 0.5em;
+        }
+        .markdown-body p {
+            margin-bottom: 1em;
+            line-height: 1.6;
+        }
+        .markdown-body a {
+            color: #60AFA;
+            text-decoration: none;
+        }
+        .markdown-body a:hover {
+            text-decoration: underline;
+        }
+        .markdown-body code {
+            background-color: #1E293B;
+            color: #F8FAFC;
+            padding: 0.2em 0.4em;
+            border-radius: 0.3em;
+            font-family: monospace;
+        }
+        .markdown-body pre {
+            background-color: #1E293B;
+            padding: 1em;
+            border-radius: 0.5em;
+            overflow: auto;
+            margin-bottom: 1.5em;
+        }
+        .markdown-body pre code {
+            background: none;
+            padding: 0;
+        }
+        .markdown-body blockquote {
+            border-left: 4px solid #4F46E5;
+            padding-left: 1em;
+            margin-left: 0;
+            color: #94A3B8;
+        }
+        .markdown-body ul,
+        .markdown-body ol {
+            padding-left: 2em;
+            margin-bottom: 1em;
+        }
+        .markdown-body li {
+            margin-bottom: 0.5em;
+        }
+        .markdown-container {
+            height: calc(100vh - 10rem);
+        }
+        .editor, .preview {
+            height: 100%;
+        }
+        .editor textarea {
+            height: 100%;
+            resize: none;
+            background-color: #0F172A;
+            color: #E2E8F0;
+            border: none;
+            padding: 1.5rem;
+            font-family: monospace;
+        }
+        .editor textarea:focus {
+            outline: none;
+        }
+        .tab {
+            transition: all 0.3s ease;
+        }
+        .tab.active {
+            background-color: #4F46E5;
+            color: white;
+        }
+        .tab:not(.active):hover {
+            background-color: #334155;
+        }
+        .grow-wrap {
+            display: grid;
+        }
+        .grow-wrap::after {
+            content: attr(data-replicated-value) " ";
+            white-space: pre-wrap;
+            visibility: hidden;
+        }
+        .grow-wrap > textarea {
+            resize: none;
+            overflow: hidden;
+        }
+        .grow-wrap > textarea,
+        .grow-wrap::after {
+            grid-area: 1 / 1 / 2 / 2;
+        }
+        .floating-button {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+    </style>
+</head>
+<body class="bg-dark text-light min-h-screen">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-primary to-secondary py-6 px-2">
+        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center mb-4 md:mb-0">
+                <i class="fas fa-code text-3xl mr-3 text-white"></i>
+                <h1 class="text-3xl font-bold text-white">Responsdown</h1>
+            </div>
+            <div class="flex space-x-2">
+                <button class="bg-white text-primary px-4 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition">
+                    <i class="fas fa-download mr-2"></i>Export
+                </button>
+                <button class="bg-white text-primary px-4 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition">
+                    <i class="fas fa-share-alt mr-2"></i>Share
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Editor Panel -->
+            <div class="w-full lg:w-1/2">
+                <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden">
+                    <div class="bg-slate-900 px-6 py-4 flex justify-between">
+                        <h2 class="text-xl font-bold text-white flex items-center">
+                            <i class="fas fa-edit mr-2 text-secondary"></i>Markdown Editor
+                        </h2>
+                        <div class="flex space-x-1">
+                            <button class="tab active px-3 py-1 rounded-lg text-sm font-medium">Edit</button>
+                            <button class="tab px-3 py-1 rounded-lg text-sm font-medium">Guide</button>
+                        </div>
+                    </div>
+                    <div class="grow-wrap editor">
+                        <textarea id="markdown-input" class="w-full rounded-b-xl" placeholder="Start typing your Markdown here..."># Welcome to Responsdown!
+## A modern Markdown parser
+**Responsdown** is a responsive Markdown parser that renders your content in real-time.
+### Features
+- Real-time preview
+- Clean, modern UI
+- Responsive design
+- Syntax highlighting
+- Export options
+### Try it out!
+```javascript
+function helloWorld() {
+  console.log("Hello, Markdown!");
+}
+```
+> "Markdown is a lightweight markup language for creating formatted text using a plain-text editor." - John Gruber
+### Get Started
+1. Type Markdown in the left pane
+2. See the rendered result on the right
+3. Use the toolbar for quick formatting
+[Learn more about Markdown](https://www.markdownguide.org/)
+![Markdown Logo](https://markdown-here.com/img/icon256.png)</textarea>
+                    </div>
+                </div>
+            </div>
+            <!-- Preview Panel -->
+            <div class="w-full lg:w-1/2">
+                <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden h-full">
+                    <div class="bg-slate-900 px-6 py-4 flex justify-between">
+                        <h2 class="text-xl font-bold text-white flex items-center">
+                            <i class="fas fa-eye mr-2 text-secondary"></i>Preview
+                        </h2>
+                        <div class="flex space-x-2">
+                            <button class="text-slate-300 hover:text-white">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                            <button class="text-slate-300 hover:text-white">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="markdown-preview" class="markdown-body preview"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Quick Format Toolbar -->
+        <div class="mt-8 bg-slate-800 rounded-xl p-4">
+            <h3 class="text-lg font-semibold mb-3 text-center">Quick Formatting</h3>
+            <div class="flex flex-wrap justify-center gap-2">
+                <button class="format-btn" data-insert="# "><i class="fas fa-heading mr-1"></i> H1</button>
+                <button class="format-btn" data-insert="## "><i class="fas fa-heading mr-1"></i> H2</button>
+                <button class="format-btn" data-insert="### "><i class="fas fa-heading mr-1"></i> H3</button>
+                <button class="format-btn" data-insert="**text**"><i class="fas fa-bold mr-1"></i> Bold</button>
+                <button class="format-btn" data-insert="_text_"><i class="fas fa-italic mr-1"></i> Italic</button>
+                <button class="format-btn" data-insert="[text](url)"><i class="fas fa-link mr-1"></i> Link</button>
+                <button class="format-btn" data-insert="![alt](src)"><i class="fas fa-image mr-1"></i> Image</button>
+                <button class="format-btn" data-insert="- "><i class="fas fa-list-ul mr-1"></i> List</button>
+                <button class="format-btn" data-insert="1. "><i class="fas fa-list-ol mr-1"></i> Ordered</button>
+                <button class="format-btn" data-insert="> "><i class="fas fa-quote-right mr-1"></i> Quote</button>
+                <button class="format-btn" data-insert="```\ncode\n```"><i class="fas fa-code mr-1"></i> Code</button>
+            </div>
+        </div>
+    </main>
+    <!-- Floating Action Button -->
+    <button class="floating-button fixed bottom-6 right-6 bg-primary text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center text-2xl hover:bg-secondary transition">
+        <i class="fas fa-magic"></i>
+    </button>
+    <!-- Footer -->
+    <footer class="bg-slate-900 py-6 mt-8">
+        <div class="container mx-auto px-4 text-center text-slate-400">
+            <p>Made with <i class="fas fa-heart text-red-500"></i> using HTML, CSS, and JavaScript</p>
+            <p class="mt-2">Powered by Marked.js and Tailwind CSS</p>
+            <div class="mt-4 flex justify-center space-x-4">
+                <a href="#" class="text-slate-300 hover:text-white"><i class="fab fa-github"></i></a>
+                <a href="#" class="text-slate-300 hover:text-white"><i class="fab fa-twitter"></i></a>
+                <a href="#" class="text-slate-300 hover:text-white"><i class="fab fa-linkedin"></i></a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Marked.js
+        marked.setOptions({
+            breaks: true,
+            gfm: true,
+            highlight: function(code, lang) {
+                return code;
+            }
+        });
+        // Get DOM elements
+        const markdownInput = document.getElementById('markdown-input');
+        const markdownPreview = document.getElementById('markdown-preview');
+        const formatButtons = document.querySelectorAll('.format-btn');
+        // Initial render
+        markdownPreview.innerHTML = marked.parse(markdownInput.value);
+        // Update preview on input changes
+        markdownInput.addEventListener('input', function() {
+            markdownPreview.innerHTML = marked.parse(this.value);
+        });
+        // Formatting buttons
+        formatButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                const insert = this.getAttribute('data-insert');
+                const start = markdownInput.selectionStart;
+                const end = markdownInput.selectionEnd;
+                const selectedText = markdownInput.value.substring(start, end);
+                const newText = insert.replace('text', selectedText);
+                markdownInput.value = markdownInput.value.substring(0, start) +
+                                      newText +
+                                      markdownInput.value.substring(end);
+                // Trigger input event to update preview
+                const event = new Event('input');
+                markdownInput.dispatchEvent(event);
+                // Set cursor position
+                markdownInput.focus();
+                markdownInput.setSelectionRange(start + newText.length, start + newText.length);
+            });
+        });
+        // Auto-resize textarea
+        const textarea = document.querySelector('textarea');
+        const growWrap = document.querySelector('.grow-wrap');
+        textarea.addEventListener('input', function() {
+            growWrap.dataset.replicatedValue = this.value;
+        });
+        // Initialize with current value
+        growWrap.dataset.replicatedValue = textarea.value;
+        // Tab switching
+        const tabs = document.querySelectorAll('.tab');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', function() {
+                tabs.forEach(t => t.classList.remove('active'));
+                this.classList.add('active');
+            });
+        });
+    </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-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Tạo ra trang web parse markdown