MarkFlow/index.html at main · vorojar/MarkFlow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MarkFlow - 优雅的 Markdown 编辑器 | 实时预览 | 一键导出图片</title>
    <meta name="description"
        content="MarkFlow 是一款专业的在线 Markdown 编辑器，支持实时预览、代码高亮、一键导出图片、快捷工具栏等功能。为开发者、技术写作者和内容创作者提供高效的写作体验。">
    <meta name="keywords" content="Markdown编辑器,在线Markdown,实时预览,代码高亮,图片导出,技术写作,内容创作,开发文档">
    <meta name="author" content="Vorojar.Wu">
    <meta property="og:title" content="MarkFlow - 专业的 Markdown 编辑器">
    <meta property="og:description" content="专业的在线 Markdown 编辑器，支持实时预览、代码高亮、一键导出图片等功能">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://github.com/vorojar/MarkFlow">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="MarkFlow - 专业的 Markdown 编辑器">
    <meta name="twitter:description" content="专业的在线 Markdown 编辑器，支持实时预览、代码高亮、一键导出图片等功能">
    <link rel="canonical" href="https://github.com/vorojar/MarkFlow">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" media="(prefers-color-scheme: dark)" id="hljs-dark">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="scripts/tailwind.config.js"></script>
    <link rel="stylesheet" href="styles/style.css">
</head>

<body class="flex flex-col h-screen bg-gray-100">
    <!-- 固定的顶部导航栏 -->
    <nav class="bg-white shadow-lg fixed top-0 left-0 right-0 z-10">
        <div class="px-4 py-2">
            <div class="flex justify-between items-center">
                <div class="text-lg font-bold text-gray-800 truncate max-w-[70%]">MarkFlow - 优雅的Markdown 编辑器</div>
                <div class="flex items-center gap-2">
                    <button id="darkModeBtn" class="px-2.5 py-1 bg-gray-100 text-gray-600 text-xs rounded hover:bg-gray-200 transition-colors flex items-center gap-1" title="切换深色模式">
                        <i class="fas fa-moon text-base"></i>
                    </button>
                    <a href="https://github.com/vorojar/MarkFlow" target="_blank"
                        class="px-2.5 py-1 bg-gray-100 text-gray-600 text-xs rounded hover:bg-gray-200 transition-colors flex items-center gap-1">
                        <i class="fab fa-github text-base"></i>
                        GitHub
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 设置面板 -->
    <div id="settingsPanel" class="hidden fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-20">
        <div class="flex flex-col h-full">
            <!-- 设置面板头部 -->
            <div class="flex justify-between items-center px-4 py-3 border-b">
                <h3 class="text-lg font-semibold text-gray-800">图片导出设置</h3>
                <button id="closeSettingsBtn" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>

            <!-- 设置选项 -->
            <div class="flex-1 overflow-auto p-4 space-y-6">
                <!-- 背景颜色 -->
                <div class="space-y-2">
                    <label class="text-sm font-medium text-gray-700">背景颜色</label>
                    <div class="flex flex-wrap gap-2" id="bgColorOptions">
                        <div class="color-option selected" style="background-color: #ffffff;" data-color="#ffffff">
                        </div>
                        <div class="color-option" style="background-color: #f8fafc;" data-color="#f8fafc"></div>
                        <div class="color-option" style="background-color: #f1f5f9;" data-color="#f1f5f9"></div>
                        <div class="color-option" style="background-color: #fef2f2;" data-color="#fef2f2"></div>
                        <div class="color-option" style="background-color: #fff7ed;" data-color="#fff7ed"></div>
                        <div class="color-option" style="background-color: #525252;" data-color="#525252"></div>
                        <div class="color-option" style="background-color: #AC6A6A;" data-color="#AC6A6A"></div>
                        <div class="color-option" style="background-color: #1c1917;" data-color="#1c1917"></div>
                    </div>
                </div>

                <!-- 边框样式 -->
                <div class="space-y-2">
                    <label class="text-sm font-medium text-gray-700">边框样式</label>
                    <div class="grid grid-cols-2 gap-2">
                        <button class="style-button border rounded px-3 py-2 text-sm hover:bg-gray-50 selected"
                            data-border-style="simple">简约边框</button>
                        <button class="style-button border rounded px-3 py-2 text-sm hover:bg-gray-50"
                            data-border-style="shadow">阴影边框</button>
                    </div>
                </div>

                <!-- 水印文字 -->
                <div class="space-y-2">
                    <label class="text-sm font-medium text-gray-700">水印文字</label>
                    <input type="text" id="watermarkText"
                        class="w-full px-3 py-2 border rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value="由 MarkFlow 生成" placeholder="输入水印文字">
                </div>

            </div>

            <!-- 底部按钮 -->
            <div class="border-t p-4">
                <button id="resetSettings"
                    class="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">恢复默认设置</button>
            </div>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div id="overlay" class="hidden fixed inset-0 bg-black bg-opacity-25 z-10"></div>

    <!-- 主要内容区域 -->
    <div class="flex-1 container mx-auto px-2 py-1 mt-[44px]">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 h-[calc(100vh-60px)]">
            <!-- 编辑器 -->
            <div class="bg-white rounded shadow-lg p-2 flex flex-col min-h-[50vh] md:min-h-0 overflow-hidden">
                <!-- Markdown 工具栏 -->
                <div class="md-toolbar">
                    <div class="toolbar-group">
                        <button onclick="insertMarkdown('heading')" class="toolbar-btn" title="标题 (Ctrl+H)">
                            <i class="fas fa-heading"></i>
                        </button>
                        <button onclick="insertMarkdown('bold')" class="toolbar-btn" title="加粗 (Ctrl+B)">
                            <i class="fas fa-bold"></i>
                        </button>
                        <button onclick="insertMarkdown('italic')" class="toolbar-btn" title="斜体 (Ctrl+I)">
                            <i class="fas fa-italic"></i>
                        </button>
                        <button onclick="insertMarkdown('highlight')" class="toolbar-btn" title="高亮">
                            <i class="fas fa-highlighter"></i>
                        </button>
                        <button onclick="insertMarkdown('link')" class="toolbar-btn" title="链接 (Ctrl+K)">
                            <i class="fas fa-link"></i>
                        </button>
                        <button onclick="insertMarkdown('image')" class="toolbar-btn" title="图片">
                            <i class="fas fa-image"></i>
                        </button>
                        <button onclick="insertMarkdown('code')" class="toolbar-btn" title="代码块">
                            <i class="fas fa-code"></i>
                        </button>
                        <button onclick="insertMarkdown('quote')" class="toolbar-btn" title="引用">
                            <i class="fas fa-quote-right"></i>
                        </button>
                        <button onclick="insertMarkdown('list-ul')" class="toolbar-btn" title="无序列表">
                            <i class="fas fa-list-ul"></i>
                        </button>
                        <button onclick="insertMarkdown('list-ol')" class="toolbar-btn" title="有序列表">
                            <i class="fas fa-list-ol"></i>
                        </button>
                        <button onclick="insertMarkdown('tasks')" class="toolbar-btn" title="任务列表">
                            <i class="fas fa-tasks"></i>
                        </button>
                        <button onclick="insertMarkdown('table')" class="toolbar-btn" title="表格">
                            <i class="fas fa-table"></i>
                        </button>
                        <button onclick="insertMarkdown('hr')" class="toolbar-btn" title="分隔线">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                    <div class="toolbar-group">
                        <button id="saveMdBtn" class="toolbar-btn" title="保存为MD文件">
                            <i class="fas fa-download"></i>
                        </button>
                        <button id="copyBtn" class="toolbar-btn" title="复制Markdown">
                            <i class="fas fa-copy"></i>
                        </button>
                        <button id="clearBtn" class="toolbar-btn" title="清空内容">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="editor-container">
                    <div class="line-numbers" id="lineNumbers"></div>
                    <textarea id="editor" class="focus:outline-none focus:ring-1 focus:ring-blue-500 custom-scrollbar"
                        placeholder="在这里输入 Markdown 内容..."></textarea>
                </div>
                <div id="statusBar" class="status-bar">
                    <span id="wordCount">0 字</span>
                    <span class="status-divider">|</span>
                    <span id="charCount">0 字符</span>
                    <span class="status-divider">|</span>
                    <span id="readTime">约 0 分钟</span>
                </div>
            </div>

            <!-- 预览区 -->
            <div class="bg-white rounded shadow-lg p-2 flex flex-col min-h-[50vh] md:min-h-0">
                <div class="md-toolbar">
                    <h2 class="text-base font-semibold text-gray-700">预览区</h2>
                    <div class="toolbar-group ml-auto">
                        <button id="copyHtmlBtn"
                            class="px-2.5 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors flex items-center">
                            <i class="fas fa-copy mr-1"></i>复制
                        </button>
                        <button id="generatePdfBtn"
                            class="px-2.5 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600 transition-colors flex items-center ml-2">
                            <i class="fas fa-file-pdf mr-1"></i>生成PDF
                        </button>
                        <button id="generateImageBtn"
                            class="px-2.5 py-1 bg-purple-500 text-white text-xs rounded hover:bg-purple-600 transition-colors flex items-center ml-2">
                            <i class="fas fa-image mr-2"></i>生成图片
                        </button>
                        <button onclick="showSettings()"
                            class="px-2.5 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors flex items-center ml-2">
                            <i class="fas fa-cog mr-1"></i>
                            设置
                        </button>
                    </div>
                </div>
                <div id="preview" class="markdown-preview flex-1 overflow-auto p-2 border rounded custom-scrollbar">
                </div>
            </div>
        </div>
    </div>
    <script src="scripts/main.js?v=1.1"></script>
</body>

</html>