Initial commit of WeChat Markdown Editor

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,39 @@
+---
+title: WeChat Markdown Editor
+emoji: 📝
+colorFrom: green
+colorTo: blue
+sdk: docker
+pinned: false
+---
+
+# 微信公众号 Markdown 编辑器 (WeChat Markdown Editor)
+
+这是一个专为微信公众号写作设计的 Markdown 编辑器。它可以将 Markdown 实时转换为适合微信公众号粘贴的 HTML 格式，支持多种配色主题和代码高亮。
+
+## 功能特点
+
+- **实时预览**：左侧写作，右侧实时预览效果。
+- **一键复制**：点击按钮即可复制带有内联样式的 HTML，直接粘贴到微信公众号后台。
+- **多种主题**：内置多种配色方案（默认、极客黑、清新绿等）。
+- **代码高亮**：完美支持代码块高亮，解决公众号代码排版难题。
+- **链接转脚注**：自动将 Markdown 中的链接转换为文末脚注（因为公众号不支持外链）。
+- **本地优先**：纯前端渲染，保护隐私，无数据上传。
+
+## 技术栈
+
+- Backend: Flask
+- Frontend: Vue 3, Tailwind CSS
+- Markdown Engine: markdown-it
+- Syntax Highlighting: highlight.js
+
+## 如何使用
+
+1. 在左侧输入 Markdown 文本。
+2. 在右侧预览效果。
+3. 点击右上角的“复制到公众号”按钮。
+4. 在微信公众号后台编辑器中粘贴 (Ctrl+V / Cmd+V)。
+
+## 作者
+
+Designed by DuQing.

app.py

@@ -0,0 +1,10 @@
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+Flask==3.0.0
+gunicorn==21.2.0

static/css/style.css

@@ -0,0 +1,155 @@
+:root {
+    --primary-color: #07c160;
+    --text-color: #333;
+    --bg-color: #fff;
+    --border-color: #eee;
+    --code-bg: #f6f8fa;
+    --quote-border: #07c160;
+    --quote-bg: #f9f9f9;
+}
+
+/* Theme: Geek Black */
+[data-theme="geek"] {
+    --primary-color: #333;
+    --text-color: #2c3e50;
+    --code-bg: #282c34;
+    --quote-border: #000;
+}
+
+/* Theme: Pastel */
+[data-theme="pastel"] {
+    --primary-color: #ff9a9e;
+    --text-color: #555;
+    --code-bg: #fff0f5;
+    --quote-border: #fad0c4;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: #f3f4f6;
+}
+
+/* WeChat Preview Styles - This is what gets copied */
+#preview-content {
+    font-size: 16px;
+    line-height: 1.75;
+    color: var(--text-color);
+    word-break: break-all;
+    text-align: justify;
+}
+
+#preview-content h1, 
+#preview-content h2, 
+#preview-content h3 {
+    margin-top: 1.5em;
+    margin-bottom: 1em;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+#preview-content h1 {
+    font-size: 1.4em;
+    border-bottom: 2px solid var(--primary-color);
+    padding-bottom: 0.3em;
+}
+
+#preview-content h2 {
+    font-size: 1.2em;
+    display: inline-block;
+    border-bottom: 2px solid var(--primary-color);
+    padding-bottom: 5px;
+}
+
+#preview-content h3 {
+    font-size: 1.1em;
+    padding-left: 10px;
+    border-left: 4px solid var(--primary-color);
+}
+
+#preview-content p {
+    margin-bottom: 1.5em;
+    text-align: justify;
+}
+
+#preview-content ul, 
+#preview-content ol {
+    margin-bottom: 1.5em;
+    padding-left: 20px;
+}
+
+#preview-content li {
+    margin-bottom: 0.5em;
+}
+
+#preview-content blockquote {
+    margin: 1.5em 0;
+    padding: 1em;
+    background-color: var(--quote-bg);
+    border-left: 4px solid var(--quote-border);
+    color: #666;
+    font-size: 0.95em;
+    border-radius: 4px;
+}
+
+#preview-content code {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: 0.9em;
+    padding: 2px 4px;
+    background-color: rgba(27, 31, 35, 0.05);
+    color: #d63384;
+    border-radius: 4px;
+}
+
+#preview-content pre {
+    background-color: #282c34; /* Dark theme for code blocks mostly looks better */
+    padding: 1em;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.5em 0;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    -webkit-overflow-scrolling: touch;
+}
+
+#preview-content pre code {
+    background-color: transparent;
+    color: #abb2bf;
+    padding: 0;
+    font-size: 14px;
+    border-radius: 0;
+}
+
+/* Footnotes */
+.footnote-ref {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-size: 0.8em;
+    vertical-align: super;
+}
+
+.footnotes-sep {
+    border-top: 1px solid #ddd;
+    margin-top: 2em;
+    margin-bottom: 1em;
+}
+
+.footnotes-list {
+    font-size: 0.9em;
+    color: #666;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}

static/js/app.js

@@ -0,0 +1,152 @@
+const { createApp, ref, computed, onMounted, watch } = Vue;
+
+createApp({
+    setup() {
+        const markdown = ref(`# 欢迎使用微信 Markdown 编辑器
+
+这是一个专为微信公众号设计的 **Markdown** 编辑器。
+
+## 主要功能
+
+1. **实时预览**：左侧输入，右侧实时预览。
+2. **代码高亮**：
+   \`\`\`python
+   def hello():
+       print("Hello, WeChat!")
+   \`\`\`
+3. **一键复制**：点击右上角按钮，直接粘贴到公众号后台。
+4. **多主题**：支持极客黑、粉彩等主题。
+
+## 关于链接
+
+微信公众号不支持外部链接，本编辑器会自动将链接转换为脚注。
+例如：[GitHub](https://github.com) 和 [Google](https://google.com)。
+
+> 引用样式也很漂亮哦。
+
+---
+
+开始你的创作吧！
+`);
+        
+        const currentTheme = ref('default');
+        const copied = ref(false);
+        const editorRef = ref(null);
+        const previewRef = ref(null);
+        let isScrolling = false;
+
+        // Markdown-it setup
+        const md = window.markdownit({
+            html: true,
+            breaks: true,
+            linkify: true,
+            typographer: true,
+            highlight: function (str, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    try {
+                        return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+                    } catch (__) {}
+                }
+                return ''; // use external default escaping
+            }
+        });
+
+        // Custom Link Renderer for Footnotes
+        const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+            return self.renderToken(tokens, idx, options);
+        };
+
+        // We need a way to store footnotes per render. 
+        // Since markdown-it is sync, we can reset a global list before render.
+        let footnotes = [];
+
+        md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+            const href = tokens[idx].attrGet('href');
+            // Ignore internal links or empty
+            if (!href || href.startsWith('#')) {
+                return defaultRender(tokens, idx, options, env, self);
+            }
+            
+            footnotes.push(href);
+            const n = footnotes.length;
+            
+            // Render the link text but add a superscript
+            return `<span class="link-text">`; 
+        };
+
+        md.renderer.rules.link_close = function (tokens, idx, options, env, self) {
+             const n = footnotes.length;
+             return `<sup>[${n}]</sup></span>`;
+        };
+
+        const htmlContent = computed(() => {
+            footnotes = []; // Reset footnotes
+            let rendered = md.render(markdown.value);
+            
+            // Append footnotes if any
+            if (footnotes.length > 0) {
+                rendered += `<div class="footnotes-sep"></div><div class="footnotes-list">`;
+                rendered += `<h3>引用链接</h3><ol>`;
+                footnotes.forEach((url, index) => {
+                    rendered += `<li>${url}</li>`;
+                });
+                rendered += `</ol></div>`;
+            }
+            return rendered;
+        });
+
+        const updateTheme = () => {
+            document.body.setAttribute('data-theme', currentTheme.value);
+        };
+
+        const copyToWeChat = () => {
+            const range = document.createRange();
+            range.selectNode(document.getElementById('preview-content'));
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            document.execCommand('copy');
+            window.getSelection().removeAllRanges();
+            
+            copied.value = true;
+            setTimeout(() => {
+                copied.value = false;
+            }, 2000);
+        };
+
+        const handleScroll = (source) => {
+            if (isScrolling) return;
+            isScrolling = true;
+
+            const editor = editorRef.value;
+            const preview = previewRef.value;
+
+            if (source === 'editor') {
+                const percent = editor.scrollTop / (editor.scrollHeight - editor.clientHeight);
+                preview.scrollTop = percent * (preview.scrollHeight - preview.clientHeight);
+            } else {
+                const percent = preview.scrollTop / (preview.scrollHeight - preview.clientHeight);
+                editor.scrollTop = percent * (editor.scrollHeight - editor.clientHeight);
+            }
+
+            setTimeout(() => {
+                isScrolling = false;
+            }, 50);
+        };
+
+        onMounted(() => {
+            updateTheme();
+        });
+
+        return {
+            markdown,
+            htmlContent,
+            currentTheme,
+            copied,
+            editorRef,
+            previewRef,
+            updateTheme,
+            copyToWeChat,
+            handleScroll
+        };
+    }
+}).mount('#app');

templates/index.html

@@ -0,0 +1,69 @@
+<!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>
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body class="bg-gray-100 h-screen flex flex-col overflow-hidden">
+    <div id="app" class="h-full flex flex-col">
+        <!-- Header -->
+        <header class="bg-white border-b border-gray-200 px-6 py-3 flex justify-between items-center shadow-sm z-10">
+            <div class="flex items-center gap-3">
+                <div class="text-2xl">📝</div>
+                <h1 class="font-bold text-gray-800 text-lg">WeChat Markdown Editor</h1>
+            </div>
+            
+            <div class="flex items-center gap-4">
+                <select v-model="currentTheme" @change="updateTheme" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
+                    <option value="default">默认主题 (WeChat Green)</option>
+                    <option value="geek">极客黑 (Geek Black)</option>
+                    <option value="pastel">粉彩 (Pastel)</option>
+                </select>
+                
+                <button @click="copyToWeChat" class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors flex items-center gap-2">
+                    <span>📋</span> 复制到公众号
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 flex overflow-hidden">
+            <!-- Editor -->
+            <div class="w-1/2 h-full flex flex-col border-r border-gray-200 bg-gray-50">
+                <div class="bg-gray-100 px-4 py-2 text-xs text-gray-500 font-mono border-b border-gray-200">MARKDOWN</div>
+                <textarea 
+                    v-model="markdown" 
+                    class="flex-1 w-full p-6 resize-none focus:outline-none font-mono text-sm leading-relaxed bg-gray-50 text-gray-800"
+                    placeholder="在此输入 Markdown 内容..."
+                    @scroll="handleScroll('editor')"
+                    ref="editorRef"
+                ></textarea>
+            </div>
+
+            <!-- Preview -->
+            <div class="w-1/2 h-full flex flex-col bg-white">
+                <div class="bg-gray-100 px-4 py-2 text-xs text-gray-500 font-mono border-b border-gray-200 flex justify-between">
+                    <span>PREVIEW</span>
+                    <span v-if="copied" class="text-green-600 font-bold animate-pulse">已复制!</span>
+                </div>
+                <div 
+                    id="preview-content" 
+                    class="flex-1 w-full p-8 overflow-y-auto"
+                    v-html="htmlContent"
+                    @scroll="handleScroll('preview')"
+                    ref="previewRef"
+                ></div>
+            </div>
+        </main>
+    </div>
+
+    <script src="/static/js/app.js"></script>
+</body>
+</html>