Spaces:

duqing2026
/

markdown-slides-pro

Sleeping

App Files Files Community

duqing2026 commited on Jan 29

Commit

2a9883f

0 Parent(s):

Initial commit

Browse files

Files changed (5) hide show

Dockerfile +18 -0
README.md +79 -0
app.py +61 -0
requirements.txt +2 -0
templates/index.html +287 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,18 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Set up a non-root user for Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,79 @@

+---
+title: Markdown Slides Pro
+emoji: 📽️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+short_description: Markdown 演示文稿大师
+---
+# Markdown 演示文稿大师 (Markdown Slides Pro)
+这是一个简单而强大的在线工具，可以帮助你将 Markdown 文本实时转换为精美的幻灯片演示文稿。基于 Reveal.js 构建。
+## ✨ 主要功能
+- **实时预览**：左侧编辑，右侧实时查看幻灯片效果。
+- **多主题支持**：内置 10+ 种精美主题（黑色、白色、夜间、天空等）。
+- **一键导出**：支持将演示文稿导出为独立的 HTML 文件，离线也能播放。
+- **语法丰富**：支持代码高亮、表格、列表、引用等标准 Markdown 语法。
+- **隐私安全**：所有渲染在浏览器端完成，服务器不保存你的内容。
+## 🚀 快速开始
+1. 在左侧编辑区输入 Markdown 内容。
+2. 使用 `---` 分隔不同的幻灯片页面。
+3. 使用 `--` 创建垂直滚动的子页面。
+4. 点击右上角“导出 HTML”下载演示文稿。
+## 🛠️ 技术栈
+- **后端**: Flask (Python)
+- **前端**: Vue 3 + Tailwind CSS
+- **渲染引擎**: Reveal.js (via CDN)
+- **部署**: Docker
+## 📦 本地运行
+```bash
+# 克隆项目
+git clone https://github.com/your-username/markdown-slides-pro.git
+# 进入目录
+cd markdown-slides-pro
+# 安装依赖
+pip install -r requirements.txt
+# 运行
+python app.py
+```
+打开浏览器访问 `http://localhost:7860` 即可。
+## 📝 语法示例
+```markdown
+# 这是一个标题
+---
+## 第二页
+- 列表项 1
+- 列表项 2
+---
+## 代码示例
+\`\`\`python
+print("Hello World")
+\`\`\`
+```
+## 📄 License
+MIT

app.py ADDED Viewed

	@@ -0,0 +1,61 @@

+from flask import Flask, render_template, request, Response, send_file
+import os
+import io
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/download', methods=['POST'])
+def download():
+    markdown_content = request.form.get('markdown', '')
+    theme = request.form.get('theme', 'black')
+    # Generate standalone HTML
+    html = f"""<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<title>Presentation</title>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reset.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/{theme}.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
+	</head>
+	<body>
+		<div class="reveal">
+			<div class="slides">
+                <section data-markdown>
+                    <textarea data-template>
+{markdown_content}
+                    </textarea>
+                </section>
+			</div>
+		</div>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/notes/notes.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/highlight/highlight.min.js"></script>
+		<script>
+			Reveal.initialize({{
+				hash: true,
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+			}});
+		</script>
+	</body>
+</html>"""
+    return Response(
+        html,
+        mimetype="text/html",
+        headers={"Content-disposition": "attachment; filename=presentation.html"}
+    )
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Flask==3.0.0
2	+ gunicorn==21.2.0

templates/index.html ADDED Viewed

	@@ -0,0 +1,287 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Markdown 演示文稿大师</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body, html { height: 100%; overflow: hidden; }
+        .editor-container { height: calc(100vh - 64px); }
+        textarea { resize: none; outline: none; }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+    <div id="app" class="flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white shadow-sm z-10 px-6 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-bold text-xl">
+                    <i class="fas fa-presentation-screen"></i>
+                </div>
+                <h1 class="text-xl font-bold text-gray-800">Markdown 演示文稿大师</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-2">
+                    <label class="text-sm font-medium text-gray-600">主题:</label>
+                    <select v-model="currentTheme" @change="updatePreview" class="border rounded px-2 py-1 text-sm bg-gray-50 focus:ring-2 focus:ring-indigo-500">
+                        <option value="black">黑色 (Black)</option>
+                        <option value="white">白色 (White)</option>
+                        <option value="league">联盟 (League)</option>
+                        <option value="beige">米色 (Beige)</option>
+                        <option value="sky">天空 (Sky)</option>
+                        <option value="night">夜间 (Night)</option>
+                        <option value="serif">衬线 (Serif)</option>
+                        <option value="simple">简约 (Simple)</option>
+                        <option value="solarized">曝光 (Solarized)</option>
+                        <option value="moon">月球 (Moon)</option>
+                        <option value="dracula">吸血鬼 (Dracula)</option>
+                    </select>
+                </div>
+                <button @click="updatePreview" class="text-indigo-600 hover:text-indigo-800 px-3 py-1 rounded hover:bg-indigo-50 transition">
+                    <i class="fas fa-sync-alt mr-1"></i> 刷新预览
+                </button>
+                <form action="/download" method="POST" target="_blank" class="inline">
+                    <input type="hidden" name="markdown" :value="markdown">
+                    <input type="hidden" name="theme" :value="currentTheme">
+                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center shadow-sm">
+                        <i class="fas fa-download mr-2"></i> 导出 HTML
+                    </button>
+                </form>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Editor (Left) -->
+            <div class="w-1/2 flex flex-col border-r border-gray-200 bg-white">
+                <div class="bg-gray-50 px-4 py-2 border-b border-gray-200 text-xs text-gray-500 flex justify-between">
+                    <span>Markdown 编辑器</span>
+                    <span class="text-indigo-500 cursor-pointer hover:underline" @click="showHelp = !showHelp">
+                        <i class="far fa-question-circle mr-1"></i>语法帮助
+                    </span>
+                </div>
+                <textarea
+                    v-model="markdown"
+                    @input="debouncedUpdate"
+                    class="flex-1 p-6 font-mono text-sm leading-relaxed text-gray-700 focus:bg-white bg-gray-50 transition duration-200"
+                    placeholder="在此输入 Markdown..."
+                    spellcheck="false"
+                ></textarea>
+            </div>
+            <!-- Preview (Right) -->
+            <div class="w-1/2 flex flex-col bg-gray-100 relative">
+                <div class="bg-gray-200 px-4 py-2 border-b border-gray-300 text-xs text-gray-500 flex justify-between items-center">
+                    <span>实时预览</span>
+                    <span class="text-xs bg-gray-300 px-2 py-0.5 rounded text-gray-600">Reveal.js Powered</span>
+                </div>
+                <iframe ref="previewFrame" class="w-full h-full border-none bg-white"></iframe>
+                <!-- Loading Overlay -->
+                <div v-if="loading" class="absolute inset-0 bg-white/50 flex items-center justify-center z-20 backdrop-blur-sm">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Help Modal -->
+        <div v-if="showHelp" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" @click.self="showHelp = false">
+            <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-lg font-bold text-gray-800">Markdown 幻灯片语法指南</h3>
+                        <button @click="showHelp = false" class="text-gray-400 hover:text-gray-600">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="prose prose-sm prose-indigo text-gray-600">
+                        <p>Markdown 演示文稿大师使用 Reveal.js 将 Markdown 转换为幻灯片。</p>
+                        <h4 class="font-bold text-gray-800 mt-4 mb-2">1. 分页符</h4>
+                        <ul class="list-disc pl-5 space-y-1">
+                            <li>使用 <code class="bg-gray-100 px-1 rounded">---</code> (三个横杠) 进行<b>水平</b>分页（新幻灯片）。</li>
+                            <li>使用 <code class="bg-gray-100 px-1 rounded">--</code> (两个横杠) 进行<b>垂直</b>分页（向下滚动）。</li>
+                        </ul>
+                        <h4 class="font-bold text-gray-800 mt-4 mb-2">2. 基础语法</h4>
+                        <pre class="bg-gray-800 text-white p-3 rounded text-xs overflow-x-auto">
+# 标题 1 (大标题)
+## 标题 2 (副标题)
+- 列表项 1
+- 列表项 2
+**粗体文字** 和 *斜体文字*
+> 这是一个引用块
+</pre>
+                        <h4 class="font-bold text-gray-800 mt-4 mb-2">3. 代码块</h4>
+                        <pre class="bg-gray-800 text-white p-3 rounded text-xs overflow-x-auto">
+```python
+def hello():
+    print("Hello World")
+```
+</pre>
+                        <h4 class="font-bold text-gray-800 mt-4 mb-2">4. 演讲者备注</h4>
+                        <p>使用 <code class="bg-gray-100 px-1 rounded">Note:</code> 开头的行添加备注（仅在演讲者模式可见，按 'S' 键）。</p>
+                    </div>
+                    <div class="mt-6 text-right">
+                        <button @click="showHelp = false" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition">知道了</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, onMounted, watch } = Vue;
+        createApp({
+            setup() {
+                const markdown = ref(`# 欢迎使用 Markdown 演示文稿大师
+制作精美的幻灯片，从未如此简单。
+---
+## 为什么选择我们？
+- ⚡ **极速创作**：专注于内容，而非排版
+- 🎨 **多款主题**：一键切换风格
+- 📱 **移动适配**：随时随地展示
+- 💾 **本地隐私**：数据完全在本地处理
+--
+### 垂直幻灯片示例
+这是一个垂直滚动的子幻灯片。
+使用 \`--\` 分隔。
+---
+## 代码高亮支持
+\`\`\`javascript
+function createMagic() {
+  console.log("Hello, Presentation!");
+  return true;
+}
+\`\`\`
+---
+## 表格示例
+| 功能 | 状态 | 优先级 |
+| :--- | :---: | ---: |
+| 导出 HTML | ✅ | 高 |
+| PDF 打印 | ✅ | 中 |
+| 在线分享 | 🚧 | 低 |
+---
+## 演讲者备注
+按 **S** 键打开演讲者视图。
+Note:
+这里是演讲者备注。
+只有你能看到。
+`);
+                const currentTheme = ref('black');
+                const previewFrame = ref(null);
+                const loading = ref(false);
+                const showHelp = ref(false);
+                let debounceTimer = null;
+                const generateHTML = (md, theme) => {
+                    return `<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reset.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/${theme}.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">
+        <style>
+            .reveal .slides { text-align: left; }
+            .reveal h1, .reveal h2, .reveal h3 { text-transform: none; }
+        </style>
+	</head>
+	<body>
+		<div class="reveal">
+			<div class="slides">
+                <section data-markdown>
+                    <textarea data-template>
+${md}
+                    </textarea>
+                </section>
+			</div>
+		</div>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"><\/script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.min.js"><\/script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/highlight/highlight.min.js"><\/script>
+		<script>
+			Reveal.initialize({
+				hash: true,
+                center: true,
+                slideNumber: true,
+				plugins: [ RevealMarkdown, RevealHighlight ]
+			});
+		<\/script>
+	</body>
+</html>`;
+                };
+                const updatePreview = () => {
+                    if (!previewFrame.value) return;
+                    loading.value = true;
+                    const doc = previewFrame.value.contentWindow.document;
+                    doc.open();
+                    doc.write(generateHTML(markdown.value, currentTheme.value));
+                    doc.close();
+                    setTimeout(() => {
+                        loading.value = false;
+                    }, 500);
+                };
+                const debouncedUpdate = () => {
+                    if (debounceTimer) clearTimeout(debounceTimer);
+                    debounceTimer = setTimeout(updatePreview, 1000);
+                };
+                onMounted(() => {
+                    updatePreview();
+                });
+                return {
+                    markdown,
+                    currentTheme,
+                    previewFrame,
+                    updatePreview,
+                    debouncedUpdate,
+                    loading,
+                    showHelp
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>