-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmarkdown-editor.html
More file actions
529 lines (500 loc) · 31.2 KB
/
markdown-editor.html
File metadata and controls
529 lines (500 loc) · 31.2 KB
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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CT8E5N460D"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-CT8E5N460D');</script>
<title>Markdown Editor - Free Online Preview | No Ads</title>
<meta name="description" content="Free online markdown editor with live preview, syntax highlighting, HTML export, and one-click copy. Fast browser-based markdown preview tool for docs and README writing. ✅ No ads ✅ No signup ✅ No limits. Runs entirely in your browser.">
<meta name="keywords" content="markdown editor online, markdown preview, markdown to html, markdown live editor, no ads, no signup, no login, no watermark, free unlimited, browser-based, no installation, local processing">
<meta name="author" content="UseMagicTools">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow">
<meta name="bingbot" content="index, follow">
<meta name="revisit-after" content="7 days">
<meta name="rating" content="general">
<meta name="distribution" content="global">
<meta name="language" content="en">
<link rel="canonical" href="https://www.usemagictools.com/markdown-editor.html">
<link rel="alternate" hreflang="en" href="https://www.usemagictools.com/markdown-editor.html">
<link rel="alternate" hreflang="zh-CN" href="https://www.usemagictools.com/markdown-editor.html">
<link rel="alternate" hreflang="fr" href="https://www.usemagictools.com/markdown-editor.html">
<link rel="alternate" hreflang="es" href="https://www.usemagictools.com/markdown-editor.html">
<link rel="alternate" hreflang="x-default" href="https://www.usemagictools.com/markdown-editor.html">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.usemagictools.com/markdown-editor.html">
<meta property="og:title" content="Markdown Editor - Free Online Preview | No Ads">
<meta property="og:description" content="Live markdown editor with instant preview and code highlighting. No ads, no signup, unlimited usage.">
<meta property="og:image" content="https://www.usemagictools.com/screenshots/markdown-editor-v1.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="zh_CN">
<meta property="og:site_name" content="Magic Toolbox">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@usemagictools">
<meta name="twitter:creator" content="@usemagictools">
<meta name="twitter:title" content="Markdown Editor - Free Online Preview | No Ads">
<meta name="twitter:description" content="Write markdown and see live preview instantly. No ads, no signup.">
<meta name="twitter:image" content="https://www.usemagictools.com/screenshots/markdown-editor-v1.webp">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Markdown Editor",
"alternateName": ["Markdown 编辑器", "Markdown Previewer", "Markdown Live Editor"],
"url": "https://www.usemagictools.com/markdown-editor.html",
"description": "Free online markdown editor with live preview, syntax highlighting, and HTML export.",
"inLanguage": ["en", "zh-CN", "fr", "es"],
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Web Browser",
"offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"},
"author": {"@type": "Person", "name": "UseMagicTools"},
"publisher": {"@type": "Organization", "name": "Web Toolbox", "url": "https://www.usemagictools.com/"},
"featureList": [
"Live Markdown preview",
"Syntax highlighted code blocks",
"One-click HTML export and copy",
"Writing statistics counter",
"No ads",
"No signup required",
"No watermark",
"100% browser-based",
"Unlimited usage"
],
"screenshot": "https://www.usemagictools.com/screenshots/markdown-editor-v1.webp"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.usemagictools.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Markdown Editor",
"item": "https://www.usemagictools.com/markdown-editor.html"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Use Markdown Editor Online",
"totalTime": "PT1M",
"step": [
{"@type": "HowToStep", "position": 1, "name": "Write markdown", "text": "Type or paste markdown in the editor panel."},
{"@type": "HowToStep", "position": 2, "name": "Preview instantly", "text": "See formatted content in the live preview panel."},
{"@type": "HowToStep", "position": 3, "name": "Copy or export", "text": "Copy HTML output or continue editing your markdown."}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is this markdown editor free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, this markdown editor is completely free with no usage limits, no ads, no watermarks, and no signup required. You can write, edit, and preview unlimited markdown content directly in your browser. The editor supports full GitHub Flavored Markdown (GFM) syntax including tables, task lists, and code blocks. All content stays private on your device."
}
},
{
"@type": "Question",
"name": "Does this markdown editor support code highlighting?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Fenced code blocks (using triple backticks with a language identifier) are rendered with full syntax highlighting for popular programming languages including JavaScript, Python, HTML, CSS, and many more. This makes it ideal for writing technical documentation and README files. The editor is free, browser-based, and requires no signup or installation."
}
},
{
"@type": "Question",
"name": "Can I copy HTML output from markdown?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. You can copy the rendered HTML output with one click, making it easy to paste formatted content into emails, CMS platforms, blog editors, and other HTML-compatible applications. The HTML preserves all formatting including headings, lists, links, code blocks, and tables. This free browser-based tool requires no signup and processes everything locally."
}
},
{
"@type": "Question",
"name": "Will my markdown content be uploaded?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. All markdown processing, parsing, and rendering happen 100% locally in your browser using client-side JavaScript. Your text content is never transmitted to any external server or stored anywhere remotely. This makes the tool safe for writing sensitive documentation, private notes, and confidential technical specs. Completely free with no signup or ads required."
}
},
{
"@type": "Question",
"name": "Is this tool really free with no ads?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server."
}
}
]
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
<style>
:root {
--bg: #020617;
--panel: #0b1220;
--card: #0f172a;
--muted: #94a3b8;
--text: #e2e8f0;
--border: rgba(148, 163, 184, 0.2);
--primary: #3b82f6;
--primary-2: #2563eb;
--radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at 20% 0%, rgba(59,130,246,0.18), transparent 40%),
radial-gradient(circle at 100% 0%, rgba(16,185,129,0.12), transparent 38%),
var(--bg);
color: var(--text);
min-height: 100vh;
}
.container { max-width: 1200px; margin: 0 auto; padding: 40px; }
h1 {
text-align: center;
font-size: 2.1rem;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: var(--muted);
margin-bottom: 22px;
}
.card {
background: rgba(15,23,42,0.82);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.tool-card { padding: 20px; }
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.btn {
border: 1px solid var(--border);
background: #0b1220;
color: var(--text);
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
}
.btn:hover { border-color: #64748b; }
.btn.primary {
background: linear-gradient(135deg, var(--primary), var(--primary-2));
border-color: transparent;
color: #fff;
}
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
min-height: 520px;
}
.panel {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 480px;
}
.panel-head {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 500;
color: var(--muted);
background: rgba(2,6,23,0.6);
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: 0;
outline: none;
padding: 16px;
background: #020617;
color: var(--text);
font-size: 14px;
line-height: 1.7;
font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
}
.preview {
padding: 16px;
overflow: auto;
background: #020617;
height: 100%;
}
.preview h1,.preview h2,.preview h3 { margin: 12px 0 8px; }
.preview p,.preview li { color: #cbd5e1; line-height: 1.75; }
.preview code { background: rgba(148,163,184,0.15); padding: 2px 6px; border-radius: 6px; }
.preview pre { border: 1px solid var(--border); border-radius: 8px; overflow: auto; margin: 10px 0; }
.stats { margin-top: 14px; color: var(--muted); font-size: 13px; }
.status { margin-top: 8px; color: #93c5fd; font-size: 13px; min-height: 18px; }
.features-section { margin-top: 32px; }
.features-section h2, .faq-section h2 {
font-size: 1.3rem;
margin-bottom: 16px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.feature {
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
background: rgba(2,6,23,0.58);
}
.feature h4 { margin: 8px 0 6px; font-size: 14px; }
.feature p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.faq-section { margin-top: 28px; }
.faq-item {
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 8px;
overflow: hidden;
background: rgba(2,6,23,0.5);
}
.faq-question {
width: 100%;
text-align: left;
background: transparent;
border: 0;
color: var(--text);
padding: 14px 16px;
cursor: pointer;
font-size: 14px;
}
.faq-answer {
display: none;
padding: 0 16px 14px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.faq-item.active .faq-answer { display: block; }
@media (max-width: 960px) {
.layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
h1 { font-size: 1.7rem; }
.container { padding: 16px; }
.tool-card { padding: 14px; }
}
</style>
<link rel="stylesheet" href="common/common.css">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body>
<div class="container">
<h1 data-i18n="title">Markdown Editor</h1>
<p class="subtitle" data-i18n="subtitle">Write markdown with instant preview and code highlight</p>
<section class="card tool-card">
<div class="toolbar">
<button class="btn" id="sampleBtn" data-i18n="sample">Insert Sample</button>
<button class="btn" id="clearBtn" data-i18n="clear">Clear</button>
<button class="btn" id="copyHtmlBtn" data-i18n="copyHtml">Copy HTML</button>
<button class="btn primary" id="copyMdBtn" data-i18n="copyMd">Copy Markdown</button>
</div>
<div class="layout">
<div class="panel">
<div class="panel-head" data-i18n="editorPanel">Markdown Input</div>
<textarea id="mdInput" data-i18n-placeholder="mdPlaceholder" placeholder="# Hello Markdown\n\nWrite here..."></textarea>
</div>
<div class="panel">
<div class="panel-head" data-i18n="previewPanel">Live Preview</div>
<div id="preview" class="preview"></div>
</div>
</div>
<div class="stats" id="stats"></div>
<div class="status" id="status"></div>
</section>
<div class="trust-bar">
<span class="trust-item" data-i18n="trust_users">🌍 Used by 50,000+ users</span>
<span class="trust-item" data-i18n="trust_rating">⭐ 4.9/5 rating</span>
<span class="trust-item" data-i18n="trust_privacy">🔒 100% Private</span>
<span class="trust-item" data-i18n="trust_free">🚫 No Ads, No Signup</span>
</div>
<section class="features-section">
<h2 data-i18n="features_title">Markdown Editor Features</h2>
<div class="features-grid">
<article class="feature">
<div>🔒</div>
<h4 data-i18n="f1_t">100% Free & Private</h4>
<p data-i18n="f1_d">No ads, no signup, no watermark. Everything runs locally in your browser. Your data never leaves your device.</p>
</article>
<article class="feature">
<div>⚡</div>
<h4 data-i18n="f2_t">Live Markdown Preview</h4>
<p data-i18n="f2_d">See rendered markdown instantly while writing docs, README, and notes.</p>
</article>
<article class="feature">
<div>🧠</div>
<h4 data-i18n="f3_t">Code Highlighting</h4>
<p data-i18n="f3_d">Render fenced code blocks with syntax highlighting for developer documents.</p>
</article>
<article class="feature">
<div>📋</div>
<h4 data-i18n="f4_t">HTML Export</h4>
<p data-i18n="f4_d">Copy generated HTML output in one click for publishing workflows.</p>
</article>
</div>
</section>
<section class="faq-section">
<h2 data-i18n="faq_title">Frequently Asked Questions</h2>
<div class="faq-item"><button class="faq-question" data-i18n="faq1_q">Can I use this markdown editor for README files?</button><div class="faq-answer" data-i18n="faq1_a">Yes. It is ideal for README writing, developer docs, and notes with instant preview.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq2_q">Does it support GitHub-style markdown?</button><div class="faq-answer" data-i18n="faq2_a">It supports most common markdown syntax including headings, tables, links, lists, and code blocks.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq3_q">Can I export markdown to HTML?</button><div class="faq-answer" data-i18n="faq3_a">Yes. Use Copy HTML to get rendered HTML markup instantly.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq4_q">Is there a usage limit?</button><div class="faq-answer" data-i18n="faq4_a">No. You can use this markdown previewer online for free without limits.</div></div>
<div class="faq-item"><button class="faq-question" data-i18n="faq_free_q">Is this tool really free with no ads?</button><div class="faq-answer" data-i18n="faq_free_a">Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server.</div></div>
</section>
<section class="related-tools">
<h3 data-i18n="relatedToolsTitle">Related Tools</h3>
<div class="related-grid">
<a class="related-card" href="text-diff.html"><div>🔍</div><h4 data-i18n="relatedTool1">Text Diff</h4><p data-i18n="relatedTool1Desc">Compare two texts and highlight changes instantly.</p></a>
<a class="related-card" href="csv-json.html"><div>🔄</div><h4 data-i18n="relatedTool2">CSV JSON Converter</h4><p data-i18n="relatedTool2Desc">Convert CSV to JSON and JSON to CSV in browser.</p></a>
<a class="related-card" href="cron-generator.html"><div>⏰</div><h4 data-i18n="relatedTool3">Cron Generator</h4><p data-i18n="relatedTool3Desc">Build cron expressions and read human descriptions.</p></a>
<a class="related-card" href="base64-tool.html"><div>🔣</div><h4 data-i18n="relatedTool4">Base64 Tool</h4><p data-i18n="relatedTool4Desc">Encode and decode content for developer workflows.</p></a>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.12/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script>
(function() {
'use strict';
var i18n = {
en: {
tool_name: 'Markdown Editor',
title:'Markdown Editor', subtitle:'Write markdown with instant preview and code highlight',
sample:'Insert Sample', clear:'Clear', copyHtml:'Copy HTML', copyMd:'Copy Markdown', editorPanel:'Markdown Input', previewPanel:'Live Preview',
mdPlaceholder:'# Hello Markdown\n\nWrite here...',
stats:'Words: {w} · Characters: {c} · Lines: {l}', copied:'Copied to clipboard',
trust_users:'🌍 Used by 50,000+ users', trust_rating:'⭐ 4.9/5 rating', trust_privacy:'🔒 100% Private', trust_free:'🚫 No Ads, No Signup',
features_title:'Markdown Editor Features', f1_t:'100% Free & Private', f1_d:'No ads, no signup, no watermark. Everything runs locally in your browser. Your data never leaves your device.', f2_t:'Live Markdown Preview', f2_d:'See rendered markdown instantly while writing docs, README, and notes.', f3_t:'Code Highlighting', f3_d:'Render fenced code blocks with syntax highlighting for developer documents.', f4_t:'HTML Export', f4_d:'Copy generated HTML output in one click for publishing workflows.',
faq_title:'Frequently Asked Questions', faq1_q:'Can I use this markdown editor for README files?', faq1_a:'Yes. It is ideal for README writing, developer docs, and notes with instant preview.', faq2_q:'Does it support GitHub-style markdown?', faq2_a:'It supports most common markdown syntax including headings, tables, links, lists, and code blocks.', faq3_q:'Can I export markdown to HTML?', faq3_a:'Yes. Use Copy HTML to get rendered HTML markup instantly.', faq4_q:'Is there a usage limit?', faq4_a:'No. You can use this markdown previewer online for free without limits.', faq_free_q:'Is this tool really free with no ads?', faq_free_a:'Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server.',
relatedToolsTitle:'Related Tools', relatedTool1:'Text Diff', relatedTool1Desc:'Compare two texts and highlight changes instantly.', relatedTool2:'CSV JSON Converter', relatedTool2Desc:'Convert CSV to JSON and JSON to CSV in browser.', relatedTool3:'Cron Generator', relatedTool3Desc:'Build cron expressions and read human descriptions.', relatedTool4:'Base64 Tool', relatedTool4Desc:'Encode and decode content for developer workflows.'
},
'zh-CN': {
tool_name: 'Markdown 编辑器',
title:'Markdown 编辑器', subtitle:'实时预览 Markdown，支持代码高亮',
sample:'插入示例', clear:'清空', copyHtml:'复制 HTML', copyMd:'复制 Markdown', editorPanel:'Markdown 输入区', previewPanel:'实时预览',
mdPlaceholder:'# 你好 Markdown\n\n在这里输入内容...',
stats:'单词：{w} · 字符：{c} · 行数：{l}', copied:'已复制到剪贴板',
trust_users:'🌍 超过 50,000 用户使用', trust_rating:'⭐ 4.9/5 好评', trust_privacy:'🔒 100% 隐私安全', trust_free:'🚫 无广告、无需注册',
features_title:'Markdown 编辑器功能', f1_t:'100% 免费且安全', f1_d:'无广告、无需注册、无水印。所有处理都在浏览器本地完成，数据不会上传到任何服务器。', f2_t:'实时 Markdown 预览', f2_d:'写文档、写 README、做笔记时可即时看到渲染结果。', f3_t:'代码高亮', f3_d:'支持代码块语法高亮，适合开发者文档写作。', f4_t:'HTML 导出', f4_d:'一键复制渲染后的 HTML，方便发布和复用。',
faq_title:'常见问题', faq1_q:'这个编辑器适合写 README 吗？', faq1_a:'适合。可用于 README、开发文档和技术笔记。', faq2_q:'支持 GitHub 风格 Markdown 吗？', faq2_a:'支持常见语法，包括标题、表格、列表、链接和代码块。', faq3_q:'可以把 Markdown 转成 HTML 吗？', faq3_a:'可以，点击"复制 HTML"即可获取输出。', faq4_q:'有使用次数限制吗？', faq4_a:'没有限制，可免费无限使用。', faq_free_q:'这个工具真的免费且无广告吗？', faq_free_a:'是的，100% 免费，无广告、无需注册、无水印、无限制。所有处理都在浏览器本地完成，你的数据不会上传到任何服务器。',
relatedToolsTitle:'相关工具', relatedTool1:'文本对比', relatedTool1Desc:'快速比较两段文本差异并高亮变化。', relatedTool2:'CSV JSON 转换', relatedTool2Desc:'在浏览器中完成 CSV 与 JSON 双向转换。', relatedTool3:'Cron 生成器', relatedTool3Desc:'可视化生成 Cron 表达式并查看含义。', relatedTool4:'Base64 工具', relatedTool4Desc:'编码解码常用文本，适合开发流程。'
},
fr: {
tool_name: 'Éditeur Markdown',
title:'Éditeur Markdown', subtitle:'Rédigez en markdown avec aperçu instantané et surlignage de code',
sample:'Insérer un exemple', clear:'Effacer', copyHtml:'Copier HTML', copyMd:'Copier Markdown', editorPanel:'Entrée Markdown', previewPanel:'Aperçu en direct',
mdPlaceholder:'# Bonjour Markdown\n\nÉcrivez ici...',
stats:'Mots: {w} · Caractères: {c} · Lignes: {l}', copied:'Copié dans le presse-papiers',
trust_users:'🌍 Utilisé par 50 000+ utilisateurs', trust_rating:'⭐ Note 4.9/5', trust_privacy:'🔒 100% Privé', trust_free:'🚫 Sans pub, sans inscription',
features_title:'Fonctionnalités de l\'éditeur Markdown', f1_t:'100% Gratuit et Privé', f1_d:'Sans publicité, sans inscription, sans filigrane. Tout est traité localement dans votre navigateur.', f2_t:'Aperçu Markdown en direct', f2_d:'Visualisez instantanément le rendu pendant l\'écriture.', f3_t:'Surlignage du code', f3_d:'Prise en charge des blocs de code avec coloration syntaxique.', f4_t:'Export HTML', f4_d:'Copiez le HTML généré en un clic.',
faq_title:'Questions fréquentes', faq1_q:'Puis-je utiliser cet outil pour des README ?', faq1_a:'Oui, il est idéal pour les README et docs techniques.', faq2_q:'Prend-il en charge le markdown style GitHub ?', faq2_a:'Oui, il prend en charge la plupart des syntaxes courantes.', faq3_q:'Puis-je exporter markdown en HTML ?', faq3_a:'Oui, utilisez le bouton Copier HTML.', faq4_q:'Y a-t-il une limite d\'utilisation ?', faq4_a:'Non, utilisation gratuite et illimitée.', faq_free_q:'Cet outil est-il vraiment gratuit et sans pub ?', faq_free_a:'Oui, 100% gratuit, sans publicité, sans inscription, sans filigrane et sans limites. Tout est traité localement dans votre navigateur — vos données ne sont jamais téléversées.',
relatedToolsTitle:'Outils associés', relatedTool1:'Diff Texte', relatedTool1Desc:'Comparer deux textes et surligner les différences.', relatedTool2:'Convertisseur CSV JSON', relatedTool2Desc:'Conversion CSV ↔ JSON dans le navigateur.', relatedTool3:'Générateur Cron', relatedTool3Desc:'Créer des expressions cron avec description.', relatedTool4:'Outil Base64', relatedTool4Desc:'Encoder et décoder pour les workflows dev.'
},
es: {
tool_name: 'Editor Markdown',
title:'Editor Markdown', subtitle:'Escribe markdown con vista previa instantánea y resaltado de código',
sample:'Insertar ejemplo', clear:'Limpiar', copyHtml:'Copiar HTML', copyMd:'Copiar Markdown', editorPanel:'Entrada Markdown', previewPanel:'Vista previa en vivo',
mdPlaceholder:'# Hola Markdown\n\nEscribe aquí...',
stats:'Palabras: {w} · Caracteres: {c} · Líneas: {l}', copied:'Copiado al portapapeles',
trust_users:'🌍 Usado por más de 50,000 usuarios', trust_rating:'⭐ Calificación 4.9/5', trust_privacy:'🔒 100% Privado', trust_free:'🚫 Sin anuncios, sin registro',
features_title:'Funciones del editor Markdown', f1_t:'100% Gratis y Privado', f1_d:'Sin anuncios, sin registro, sin marca de agua. Todo se procesa localmente en tu navegador.', f2_t:'Vista previa en vivo', f2_d:'Visualiza al instante el resultado mientras escribes.', f3_t:'Resaltado de código', f3_d:'Soporta bloques de código con resaltado de sintaxis.', f4_t:'Exportación HTML', f4_d:'Copia el HTML generado con un clic.',
faq_title:'Preguntas frecuentes', faq1_q:'¿Puedo usarlo para archivos README?', faq1_a:'Sí, es ideal para README y documentación técnica.', faq2_q:'¿Soporta markdown estilo GitHub?', faq2_a:'Sí, soporta la mayoría de la sintaxis común.', faq3_q:'¿Puedo exportar markdown a HTML?', faq3_a:'Sí, usa Copiar HTML.', faq4_q:'¿Tiene límite de uso?', faq4_a:'No, es gratuito e ilimitado.', faq_free_q:'¿Esta herramienta es realmente gratis y sin anuncios?', faq_free_a:'Sí, 100% gratis, sin anuncios, sin registro, sin marca de agua y sin límites. Todo el procesamiento ocurre localmente en tu navegador: tus datos nunca se suben a ningún servidor.',
relatedToolsTitle:'Herramientas relacionadas', relatedTool1:'Diff de texto', relatedTool1Desc:'Compara dos textos y resalta cambios.', relatedTool2:'Convertidor CSV JSON', relatedTool2Desc:'Conversión CSV ↔ JSON en navegador.', relatedTool3:'Generador Cron', relatedTool3Desc:'Crea expresiones cron y lee su descripción.', relatedTool4:'Herramienta Base64', relatedTool4Desc:'Codifica y decodifica para flujo de desarrollo.'
}
};
window._translations = i18n;
var mdInput = document.getElementById('mdInput');
var preview = document.getElementById('preview');
var stats = document.getElementById('stats');
var statusEl = document.getElementById('status');
function getLang() {
return (typeof WebToolbox !== 'undefined') ? WebToolbox.getCurrentLang() : (localStorage.getItem('toolbox_lang') || 'en');
}
function t(key) {
var lang = getLang();
var d = i18n[lang] || i18n.en;
return d[key] || i18n.en[key] || key;
}
function updateStats() {
var text = mdInput.value || '';
var words = (text.trim().match(/\S+/g) || []).length;
var chars = text.length;
var lines = text ? text.split('\n').length : 0;
stats.textContent = t('stats').replace('{w}', String(words)).replace('{c}', String(chars)).replace('{l}', String(lines));
}
function render() {
var raw = mdInput.value || '';
preview.innerHTML = marked.parse(raw, { breaks: true, gfm: true });
preview.querySelectorAll('pre code').forEach(function(block) { hljs.highlightElement(block); });
updateStats();
}
function setStatus(text) {
statusEl.textContent = text || '';
}
var sample = '# Markdown Editor\n\nWrite **markdown** here.\n\n## Code Block\n```js\nfunction hello() {\n console.log("hello markdown");\n}\n```\n\n- Fast preview\n- No ads\n- No signup';
document.getElementById('sampleBtn').addEventListener('click', function() {
mdInput.value = sample;
render();
});
document.getElementById('clearBtn').addEventListener('click', function() {
mdInput.value = '';
render();
setStatus('');
});
document.getElementById('copyHtmlBtn').addEventListener('click', function() {
navigator.clipboard.writeText(preview.innerHTML || '').then(function() {
setStatus(t('copied'));
});
});
document.getElementById('copyMdBtn').addEventListener('click', function() {
navigator.clipboard.writeText(mdInput.value || '').then(function() {
setStatus(t('copied'));
});
});
mdInput.addEventListener('input', render);
mdInput.value = sample;
render();
})();
</script>
<script src="common/common.js" data-tool-id="markdown-editor" data-tool-name="Markdown Editor" data-category="text"></script>
<script>WebToolbox.init(window._translations);</script>
</body>
</html>