Repository navigation
Expand file tree
/
Copy pathmarkdown-preview.html
More file actions
1010 lines (895 loc) · 66.9 KB
/
Copy pathmarkdown-preview.html
File metadata and controls
1010 lines (895 loc) · 66.9 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
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Editor & Live Preview — GFM | FreeDevTool</title>
<meta name="description" content="Free Markdown editor with live preview — GFM tables, code blocks, task lists, strikethrough. Convert MD to HTML. Browser-only.">
<meta name="robots" content="index, follow">
<meta name="author" content="Anees Ur Rehman">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","datePublished":"2026-05-02","dateModified":"2026-05-19","inLanguage":"en-US","isPartOf":{"@type":"WebSite","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Anees Ur Rehman","url":"https://freedevtool.org/about","jobTitle":"Full-stack developer","worksFor":{"@type":"Organization","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to preview Markdown live and convert to HTML",
"description": "Edit Markdown with split-pane live preview, GitHub Flavored Markdown support, and one-click HTML export.",
"step": [
{"@type":"HowToStep","name":"Type or paste Markdown","text":"Write Markdown in the left pane. The right pane renders the HTML preview live as you type."},
{"@type":"HowToStep","name":"Use GFM features","text":"Tables (| col |), task lists (- [ ]), strikethrough (~~), fenced code blocks (```js), and autolinks all work out of the box."},
{"@type":"HowToStep","name":"Copy as HTML or Markdown","text":"Click Copy as HTML for paste into a CMS, or Copy as Markdown to save the source."},
{"@type":"HowToStep","name":"Download the file","text":"Download as .md (source) or .html (rendered) for use in static site generators (Hugo, Jekyll, Eleventy, Astro)."}
]
}
</script>
<link rel="canonical" href="https://freedevtool.org/markdown-preview">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap">
<link rel="preload" href="style.css?v=20260502-cards" as="style">
<link rel="stylesheet" href="style.css?v=20260502-cards">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon.svg">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="FreeDevTool — 50+ free, fast, privacy-first developer tools">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<meta name="twitter:title" content="Markdown Editor & Live Preview — Free | FreeDevTool">
<meta name="twitter:description" content="GFM editor with live preview. Tables, code blocks, task lists. Convert markdown to HTML. Runs in browser, no signup.">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3L0CMH3X36"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-3L0CMH3X36');</script>
<meta property="og:title" content="Markdown Editor & Preview Online — Free">
<meta property="og:description" content="Live markdown editor with split-screen preview. Convert to HTML. GitHub Flavored Markdown supported.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://freedevtool.org/markdown-preview">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"Markdown Editor & Preview","url":"https://freedevtool.org/markdown-preview","description":"Write and preview markdown with live rendering. Convert markdown to clean HTML.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
{"@type":"Question","name":"What is GitHub Flavored Markdown (GFM)?","acceptedAnswer":{"@type":"Answer","text":"GFM is GitHub's extension of standard Markdown. It adds support for tables, fenced code blocks with syntax highlighting, task lists (checkboxes), strikethrough text, autolinked URLs, and more. GFM is the most widely used Markdown flavor in developer tools."}},
{"@type":"Question","name":"How do I convert Markdown to HTML?","acceptedAnswer":{"@type":"Answer","text":"Use a Markdown parser like marked.js, markdown-it, or this online tool to convert Markdown syntax to HTML. Paste your Markdown in the editor, and the tool generates clean, semantic HTML in real time. Click 'Copy HTML' to get the converted output."}},
{"@type":"Question","name":"What is the difference between Markdown and HTML?","acceptedAnswer":{"@type":"Answer","text":"Markdown is a lightweight markup language designed for readability — it uses simple symbols like # for headings and ** for bold. HTML is the full markup language of the web with tags like <h1> and <strong>. Markdown is converted to HTML for web rendering. Markdown is easier to write; HTML offers more control."}},
{"@type":"Question","name":"What is the Markdown syntax for tables?","acceptedAnswer":{"@type":"Answer","text":"Use pipes | and dashes - to create tables: '| Header | Header |\\n| --- | --- |\\n| Cell | Cell |'. Align columns with colons: :--- (left), :---: (center), ---: (right). Tables are a GitHub Flavored Markdown extension, not part of the original Markdown spec."}},
{"@type":"Question","name":"Can I use Markdown for SEO-optimized content?","acceptedAnswer":{"@type":"Answer","text":"Markdown itself doesn't affect SEO — what matters is the HTML it produces. Use proper heading hierarchy (H1 → H2 → H3), add alt text to images, use semantic elements, and ensure the generated HTML is clean and valid. Many static site generators (Hugo, Jekyll, Gatsby) convert Markdown to SEO-friendly HTML."}},{"@type":"Question","name":"How do I add tables in Markdown?","acceptedAnswer":{"@type":"Answer","text":"GitHub-flavored Markdown supports pipe-separated tables with a separator row of dashes. Standard CommonMark does not support tables — this is a GFM extension. Optional alignment colons in the separator row: left-align with leading colon, center with both, right-align with trailing colon."}},{"@type":"Question","name":"What is the difference between CommonMark and GFM?","acceptedAnswer":{"@type":"Answer","text":"CommonMark is the strict standardized version. GFM extends CommonMark with tables, task lists, strikethrough, autolinks, fenced code blocks with syntax highlighting, and stricter whitespace rules. GitHub renders GFM; CommonMark renderers cover the common case but miss the extensions."}},{"@type":"Question","name":"How do I add task lists in Markdown?","acceptedAnswer":{"@type":"Answer","text":"GFM syntax: hyphen space bracket space bracket for unchecked, hyphen space bracket x bracket for checked. GitHub renders these as interactive checkboxes. Many static site generators support them. Standard CommonMark does not — they render as plain bullet text."}}
]}
</script>
<style>
.editor-split { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-height:400px; }
@media(max-width:700px) { .editor-split { grid-template-columns:1fr; } }
.editor-pane { display:flex; flex-direction:column; }
.editor-pane:first-child { border-right:1px solid var(--border); }
@media(max-width:700px) { .editor-pane:first-child { border-right:none; border-bottom:1px solid var(--border); } }
.pane-header {
display:flex; align-items:center; justify-content:space-between;
padding:8px 14px; background:var(--bg3); border-bottom:1px solid var(--border);
font-family:var(--mono); font-size:11px; color:var(--text3);
}
.editor-textarea {
flex:1; background:var(--bg); border:none; color:var(--text);
font-family:var(--mono); font-size:13px; padding:14px; resize:none; outline:none;
line-height:1.7; min-height:350px;
}
.preview-pane {
flex:1; padding:14px 18px; overflow:auto; background:var(--bg);
font-size:14px; line-height:1.7; color:var(--text); min-height:350px;
}
.preview-pane h1 { font-size:24px; margin:0 0 12px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.preview-pane h2 { font-size:20px; margin:20px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.preview-pane h3 { font-size:16px; margin:16px 0 6px; }
.preview-pane p { margin:8px 0; }
.preview-pane code { font-family:var(--mono); font-size:12px; background:var(--bg4); color:var(--accent); padding:1px 6px; border-radius:4px; }
.preview-pane pre { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; overflow:auto; margin:10px 0; }
.preview-pane pre code { background:none; padding:0; color:var(--text); }
.preview-pane blockquote { border-left:3px solid var(--accent); padding:4px 14px; margin:10px 0; color:var(--text2); background:var(--bg3); border-radius:0 var(--radius) var(--radius) 0; }
.preview-pane ul, .preview-pane ol { padding-left:24px; margin:8px 0; }
.preview-pane li { margin:4px 0; }
.preview-pane table { border-collapse:collapse; width:100%; margin:10px 0; }
.preview-pane th, .preview-pane td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
.preview-pane th { background:var(--bg3); font-weight:600; }
.preview-pane a { color:var(--accent); }
.preview-pane img { max-width:100%; border-radius:var(--radius); }
.preview-pane hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
.preview-pane strong { color:var(--text); }
.html-output { margin-top:14px; }
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://freedevtool.org/"
},
{
"@type": "ListItem",
"position": 2,
"name": "All Tools",
"item": "https://freedevtool.org/all-tools"
},
{
"@type": "ListItem",
"position": 3,
"name": "and . Markdown is converted to HTML for web rendering. Markdown is easier to write; HTML offers more control.\"}}, {\"@type\":\"Question\",\"name\":\"What is the Markdown syntax for tables?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use pipes | and dashes - to create tables: '| Header | Header |\\\\n| --- | --- |\\\\n| Cell | Cell |'. Align columns with colons: :--- (left), :---: (center), ---: (right). Tables are a GitHub Flavored Markdown extension, not part of the original Markdown spec.\"}}, {\"@type\":\"Question\",\"name\":\"Can I use Markdown for SEO-optimized content?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Markdown itself doesn't affect SEO — what matters is the HTML it produces. Use proper heading hierarchy (H1 → H2 → H3), add alt text to images, use semantic elements, and ensure the generated HTML is clean and valid. Many static site generators (Hugo, Jekyll, Gatsby) convert Markdown to SEO-friendly HTML.\"}} ]} .editor-split { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-height:400px; } @media(max-width:700px) { .editor-split { grid-template-columns:1fr; } } .editor-pane { display:flex; flex-direction:column; } .editor-pane:first-child { border-right:1px solid var(--border); } @media(max-width:700px) { .editor-pane:first-child { border-right:none; border-bottom:1px solid var(--border); } } .pane-header { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:var(--bg3); border-bottom:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--text3); } .editor-textarea { flex:1; background:var(--bg); border:none; color:var(--text); font-family:var(--mono); font-size:13px; padding:14px; resize:none; outline:none; line-height:1.7; min-height:350px; } .preview-pane { flex:1; padding:14px 18px; overflow:auto; background:var(--bg); font-size:14px; line-height:1.7; color:var(--text); min-height:350px; } .preview-pane h1 { font-size:24px; margin:0 0 12px; padding-bottom:6px; border-bottom:1px solid var(--border); } .preview-pane h2 { font-size:20px; margin:20px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border); } .preview-pane h3 { font-size:16px; margin:16px 0 6px; } .preview-pane p { margin:8px 0; } .preview-pane code { font-family:var(--mono); font-size:12px; background:var(--bg4); color:var(--accent); padding:1px 6px; border-radius:4px; } .preview-pane pre { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; overflow:auto; margin:10px 0; } .preview-pane pre code { background:none; padding:0; color:var(--text); } .preview-pane blockquote { border-left:3px solid var(--accent); padding:4px 14px; margin:10px 0; color:var(--text2); background:var(--bg3); border-radius:0 var(--radius) var(--radius) 0; } .preview-pane ul, .preview-pane ol { padding-left:24px; margin:8px 0; } .preview-pane li { margin:4px 0; } .preview-pane table { border-collapse:collapse; width:100%; margin:10px 0; } .preview-pane th, .preview-pane td { border:1px solid var(--border); padding:8px 12px; text-align:left; } .preview-pane th { background:var(--bg3); font-weight:600; } .preview-pane a { color:var(--accent); } .preview-pane img { max-width:100%; border-radius:var(--radius); } .preview-pane hr { border:none; border-top:1px solid var(--border); margin:16px 0; } .preview-pane strong { color:var(--text); } .html-output { margin-top:14px; } FreeDevTool Tools b64 Encoding & Conversion11 tools · Base64, YAML, px→rem { } Generation & Formatting16 tools · JSON, SQL, gradients # Security & Hashing3 tools · JWT, MD5, SHA .* Code & Text Tools9 tools · Regex, diff, tokens JS Optimization & DevOps7 tools · Minifiers, cURL, git IP Network & Time4 tools · IP, DNS, timestamps SEO SEO & Meta Tools3 tools · OG, meta, slug All Browse all 50 toolsSearchable catalog & categories About Privacy Copied! Content Tool Markdown Editor & Live Preview",
"item": "https://freedevtool.org/markdown-preview"
}
]
}
</script>
<script src="/ga4-events.js" defer></script>
</head>
<body>
<nav>
<a class="nav-logo" href="/" aria-label="FreeDevTool home"><svg class="logo-mark" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" fill="none"><rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" opacity=".12"/><path d="M9.5 8.5L6 12l3.5 3.5M14.5 8.5L18 12l-3.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>FreeDevTool</a>
<div class="nav-links">
<div class="nav-dropdown" id="tools-dropdown">
<a href="all-tools" onclick="event.preventDefault();this.parentElement.classList.toggle('open')" aria-haspopup="true">Tools <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></a>
<div class="nav-dropdown-menu">
<a href="encoding-tools">
<div class="dd-icon">b64</div>
<div class="dd-info"><div class="dd-name">Encoding & Conversion</div><div class="dd-count">11 tools · Base64, YAML, px→rem</div></div>
</a>
<a href="generation-tools">
<div class="dd-icon">{ }</div>
<div class="dd-info"><div class="dd-name">Generation & Formatting</div><div class="dd-count">16 tools · JSON, SQL, gradients</div></div>
</a>
<a href="security-tools">
<div class="dd-icon">#</div>
<div class="dd-info"><div class="dd-name">Security & Hashing</div><div class="dd-count">3 tools · JWT, MD5, SHA</div></div>
</a>
<a href="text-tools">
<div class="dd-icon">.*</div>
<div class="dd-info"><div class="dd-name">Code & Text Tools</div><div class="dd-count">9 tools · Regex, diff, tokens</div></div>
</a>
<a href="devops-tools">
<div class="dd-icon">JS</div>
<div class="dd-info"><div class="dd-name">Optimization & DevOps</div><div class="dd-count">7 tools · Minifiers, cURL, git</div></div>
</a>
<a href="network-tools">
<div class="dd-icon">IP</div>
<div class="dd-info"><div class="dd-name">Network & Time</div><div class="dd-count">4 tools · IP, DNS, timestamps</div></div>
</a>
<a href="seo-tools">
<div class="dd-icon">SEO</div>
<div class="dd-info"><div class="dd-name">SEO & Meta Tools</div><div class="dd-count">3 tools · OG, meta, slug</div></div>
</a>
<div class="nav-dropdown-divider"></div>
<a class="dd-all" href="all-tools">
<div class="dd-icon">All</div>
<div class="dd-info"><div class="dd-name">Browse all 50 tools</div><div class="dd-count">Searchable catalog & categories</div></div>
</a>
</div>
</div>
<a href="/guides">Guides</a>
<a href="about">About</a>
<a href="privacy">Privacy</a>
</div>
</nav>
<div id="copy-toast">Copied!</div>
<div class="wrapper">
<a class="tool-back" href="/" aria-label="Back to home">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
Back
</a>
<div class="tool-header">
<div class="tool-badge">Content Tool</div>
<h1>Markdown Editor & Live Preview Online</h1>
<p class="tool-description">
Write markdown and see a live rendered preview side by side. This free markdown editor supports <a href="https://github.github.com/gfm/" rel="noopener" style="color:var(--accent)">GitHub Flavored Markdown (GFM)</a>: tables, fenced code blocks with language syntax highlighting, task lists, strikethrough, autolinks. Convert markdown to clean, semantic HTML with one click. Perfect for writing README files, documentation, blog posts, and PR descriptions. All rendering happens in your browser — nothing is uploaded.
</p>
<div class="last-updated">Last updated: May 2026 · Written by <a href="/about">Anees Ur Rehman</a>, full-stack developer</div>
</div>
<div class="tool-card">
<div class="tool-card-header">
<div class="dot dot-red"></div><div class="dot dot-yellow"></div><div class="dot dot-green"></div>
<span class="tool-card-title">markdown-preview.tool</span>
</div>
<div class="tool-body" style="padding:0">
<div class="editor-split">
<div class="editor-pane">
<div class="pane-header"><span>Markdown</span><span id="md-count">0 words</span></div>
<textarea class="editor-textarea" id="md-input" oninput="renderMd()" placeholder="# Hello World
Write your **markdown** here...
- Item 1
- Item 2
```js
console.log('Hello!');
```
">
# Welcome to FreeDevTool Markdown Editor
Write **bold**, *italic*, and ~~strikethrough~~ text easily.
## Features
- Live preview as you type
- GitHub Flavored Markdown
- Code blocks with syntax hints
- Tables, task lists, blockquotes
## Code Example
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```
## Table Example
| Feature | Supported |
| --- | --- |
| Bold / Italic | ✓ |
| Code Blocks | ✓ |
| Tables | ✓ |
| Task Lists | ✓ |
> "Markdown is intended to be as easy-to-read and easy-to-write as is feasible." — John Gruber
---
Made with ♥ by [FreeDevTool](https://freedevtool.org)
</textarea>
</div>
<div class="editor-pane">
<div class="pane-header"><span>Preview</span><button class="btn btn-ghost" style="padding:3px 8px;font-size:10px" onclick="copyHtml()">Copy HTML</button></div>
<div class="preview-pane" id="md-preview"></div>
</div>
</div>
</div>
</div>
<div class="html-output">
<div class="output-label">
<label style="margin:0">Generated HTML</label>
<button class="btn btn-ghost" onclick="copyHtml()">Copy</button>
</div>
<div class="output-block" id="html-output" style="font-size:12px; max-height:200px; overflow:auto"></div>
</div>
<!-- =============================================================
LONG-FORM ARTICLE — comprehensive guide for E-E-A-T + ranking.
============================================================= -->
<article>
<p class="aeo-lead" style="font-size:16px;line-height:1.7;color:var(--text);max-width:760px;margin:24px auto 18px;padding:0 4px">
<strong>Markdown</strong> is a lightweight plain-text formatting syntax that converts to HTML — the lingua franca of READMEs, technical docs, and Dev.to articles. GitHub-flavored Markdown (GFM) adds tables, task lists, strikethrough, and fenced code blocks. This <strong>free Markdown preview</strong> renders GFM exactly as GitHub does — no surprises when you push your README.
</p>
<section id="examples" style="max-width:760px;margin:24px auto 32px">
<h2 style="font-size:18px;margin-bottom:14px">Examples</h2>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">GFM task lists§§- [x] Buy milk§§- [ ] Walk the dog§§Renders as checkboxes that match GitHub exactly. Standard CommonMark does NOT support task lists.</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">GFM tables§§</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px"> Name </strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px"> Score </strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">§§</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">------</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">------</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">§§</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px"> Alice </strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px"> 95 </strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">§§Pipe-separated tables with optional alignment colons (:--, :--:, --:). Always preview in actual GitHub before publishing.</strong>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Fenced code block with language§§Triple backticks plus language hint gets syntax highlighting on GitHub: javascript, python, sql, html, etc. The highlighting engine is Linguist.</strong>
</div>
</section>
<aside class="founder-note" style="max-width:760px;margin:24px auto 32px;padding:20px 24px;background:rgba(0,208,132,0.05);border-left:3px solid var(--accent);border-radius:6px;font-size:14px;line-height:1.7;color:var(--text2)"><div style="font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-weight:600">💡 Why I built this</div><p style="margin:0 0 12px">I built this after pushing a README to GitHub and watching the bullet points render as flat text — because my local markdown preview accepted bullets without trailing spaces, but GitHub’s stricter parser required them. This preview matches GitHub-flavored Markdown exactly: same task list rendering, same table parsing, same fenced code block behavior. What you see here is what GitHub will show — no surprises.</p><p style="margin:0;font-size:13px;color:var(--text3)">— <a href="/about" style="color:var(--accent);text-decoration:none">Anees Ur Rehman</a>, full-stack developer</p></aside>
<section class="article-section">
<h2>What is Markdown and why has it conquered the developer world?</h2>
<p><strong>Markdown</strong> is a lightweight markup language created by John Gruber and Aaron Swartz in 2004. The design goal was deceptively simple: a plain-text format that reads naturally as-is, and converts cleanly to HTML when needed. Two decades later, Markdown is the universal write-once-render-everywhere format for technical content — README files on every GitHub repo, posts on Reddit and Stack Overflow, documentation on Notion and Obsidian, blog posts on Substack, slides in Marp, papers in Pandoc, even chat messages in Slack and Discord.</p>
<p>Why did Markdown win where heavier alternatives (HTML, AsciiDoc, RST, BBCode) didn't?</p>
<ul>
<li><strong>Readable in raw form.</strong> A markdown file is meaningful as plain text — you don't need to mentally render it.</li>
<li><strong>Tiny syntax surface.</strong> Headings (<code>#</code>), bold (<code>**</code>), italic (<code>*</code>), links (<code>[text](url)</code>), lists (<code>-</code>), code blocks (<code>```</code>) — that's 90% of what you'll ever use. Five minutes to learn.</li>
<li><strong>Plays well with version control.</strong> Plain-text diffs are clean. Code review on Markdown is sane in a way that Word docs or Notion exports aren't.</li>
<li><strong>Render targets are everywhere.</strong> Every static site generator (Hugo, Jekyll, Eleventy, Astro, Next.js MDX), every developer platform (GitHub, GitLab, Bitbucket, Codeberg), every documentation system (Docusaurus, MkDocs, GitBook, ReadTheDocs).</li>
</ul>
<p>The trade-off: <strong>fragmentation.</strong> The original 2004 spec was incomplete and ambiguous. Different parsers produced different output for the same input. CommonMark (2014) standardized 80% of the syntax; GitHub Flavored Markdown extends it with practical features. This editor renders <strong>GFM</strong>, the dominant variant in 2026.</p>
</section>
<section class="article-section">
<h2>The Markdown family — CommonMark vs GFM vs MultiMarkdown</h2>
<p>"Markdown" today is an umbrella term. Knowing which dialect your platform uses prevents formatting surprises.</p>
<table class="ref-table">
<thead><tr><th>Variant</th><th>Year</th><th>What it adds</th><th>Used by</th></tr></thead>
<tbody>
<tr>
<td><strong>Original Markdown</strong></td>
<td>2004</td>
<td>Headings, emphasis, lists, links, code blocks, blockquotes</td>
<td>Historical artifact — most parsers extend it</td>
</tr>
<tr>
<td><strong>CommonMark</strong></td>
<td>2014</td>
<td>Strict, unambiguous spec. Edge cases formally defined.</td>
<td>Reddit, Discourse, Discord, Stack Overflow (basis)</td>
</tr>
<tr>
<td><strong>GitHub Flavored Markdown (GFM)</strong></td>
<td>2017</td>
<td>Tables, task lists, strikethrough, autolinks, fenced code with language tags</td>
<td>GitHub, GitLab, Codeberg, Discord, Slack (subset), most blog platforms</td>
</tr>
<tr>
<td><strong>MultiMarkdown</strong></td>
<td>2005</td>
<td>Footnotes, citations, definition lists, math (MathJax), metadata</td>
<td>Academic writing, Pandoc</td>
</tr>
<tr>
<td><strong>MDX</strong></td>
<td>2018</td>
<td>Embed JSX/React components in markdown</td>
<td>Next.js, Docusaurus, Storybook docs</td>
</tr>
<tr>
<td><strong>Obsidian / Notion / Roam Markdown</strong></td>
<td>2018+</td>
<td>Wikilinks (<code>[[Page]]</code>), block references, embeds</td>
<td>Personal knowledge management apps</td>
</tr>
</tbody>
</table>
<p><strong>For 95% of writing in 2026:</strong> use GFM. It's understood by every platform, supports the practical features you need, and degrades gracefully when something doesn't render in CommonMark-only parsers.</p>
</section>
<section class="article-section">
<h2>Markdown syntax cheatsheet</h2>
<h3>Headings</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code># H1 — page title (use only once)
## H2 — main section
### H3 — sub-section
#### H4 — sub-sub-section
# Alternative for H1 / H2:
H1 with underline
=================
H2 with underline
-----------------</code></pre>
</div>
<h3>Emphasis</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>*italic* or _italic_
**bold** or __bold__
***bold italic***
~~strikethrough~~
`inline code`
==highlighted== (some parsers, e.g. Obsidian)</code></pre>
</div>
<h3>Lists</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>- Unordered list (also: * or +)
- Item 2
- Nested (indent 2 spaces)
- Another nested
1. Ordered list
2. Item 2
1. Nested ordered
- [ ] Unchecked task (GFM)
- [x] Checked task</code></pre>
</div>
<h3>Links and images</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>[link text](https://example.com)
[link with title](https://example.com "Hover title")
[reference style][1]
<https://autolink.com> (GFM auto-detects URLs without angle brackets)
[1]: https://example.com (defined anywhere in the document)</code></pre>
</div>
<h3>Code</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>Inline `code` uses single backticks.
```js
// fenced block with language hint for syntax highlighting
function add(a, b) {
return a + b;
}
```
Indented 4 spaces is also a code block (legacy)</code></pre>
</div>
<h3>Tables (GFM only)</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>| Column 1 | Column 2 | Column 3 |
|----------|:--------:|---------:|
| left | center | right |
| aligned | aligned | aligned |</code></pre>
</div>
<h3>Blockquotes</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>> This is a quote.
> Multiple lines stay quoted.
>
> > Nested quote.
> **Bold inside quote** still works.</code></pre>
</div>
<h3>Horizontal rules & line breaks</h3>
<div class="lang-block">
<div class="lang-block-header">markdown</div>
<pre><code>--- (or *** or ___)
End a line with two spaces
to get a soft line break.
Empty line above creates a new paragraph.</code></pre>
</div>
</section>
<section class="article-section">
<h2>GFM-specific features you need to know</h2>
<h3>Task lists with checkboxes</h3>
<p>GitHub renders <code>- [ ]</code> and <code>- [x]</code> as actual interactive checkboxes in issues and PRs. Used everywhere for to-do tracking.</p>
<h3>Tables with alignment</h3>
<p>The colon position in the separator row controls alignment: <code>|---|</code> = default, <code>|:---|</code> = left, <code>|:---:|</code> = center, <code>|---:|</code> = right.</p>
<h3>Autolinks</h3>
<p>Bare URLs (<code>https://example.com</code>) and email addresses become clickable automatically — no need for <code><...></code> brackets.</p>
<h3>Strikethrough</h3>
<p><code>~~struck through~~</code> renders with a line through it. Originally a Slack/GFM extension; now widely supported.</p>
<h3>Fenced code blocks with language tags</h3>
<p>Triple-backtick code blocks accept a language hint (<code>```js</code>, <code>```python</code>, <code>```yaml</code>) which most renderers use for syntax highlighting via Prism.js, highlight.js, or Shiki.</p>
<h3>GitHub-specific extras (rendered only on github.com)</h3>
<ul>
<li><strong>Mermaid diagrams</strong> — <code>```mermaid</code> blocks render flowcharts, sequence diagrams, ER diagrams.</li>
<li><strong>Math expressions</strong> — <code>$E = mc^2$</code> for inline; <code>$$...$$</code> for blocks (since 2022).</li>
<li><strong>Alerts</strong> — <code>> [!NOTE]</code>, <code>> [!WARNING]</code>, <code>> [!IMPORTANT]</code> render as styled callouts.</li>
<li><strong>Issue and PR mentions</strong> — <code>#123</code> linkifies to the issue/PR.</li>
<li><strong>User mentions</strong> — <code>@username</code> notifies the user.</li>
<li><strong>Emoji shortcodes</strong> — <code>:rocket:</code> renders as 🚀.</li>
</ul>
</section>
<section class="article-section">
<h2>Markdown processors in 8 languages</h2>
<h3>JavaScript (marked, markdown-it, remark)</h3>
<div class="lang-block">
<div class="lang-block-header">javascript</div>
<pre><code>// marked — the simplest, fastest
import { marked } from 'marked';
const html = marked.parse(mdString);
// markdown-it — most extensible (used by VS Code)
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt({ html: true, linkify: true, typographer: true });
md.use(require('markdown-it-task-lists'));
const html = md.render(mdString);
// remark — AST-based, used by MDX, Astro, Docusaurus
import { remark } from 'remark';
import remarkHtml from 'remark-html';
const html = String(await remark().use(remarkHtml).process(mdString));
</code></pre>
</div>
<h3>Python (markdown / markdown-it-py)</h3>
<div class="lang-block">
<div class="lang-block-header">python</div>
<pre><code>import markdown
html = markdown.markdown(md_string, extensions=['fenced_code', 'tables', 'extra'])
# markdown-it-py — port of JS markdown-it, more features
from markdown_it import MarkdownIt
md = MarkdownIt('gfm-like').enable('table').enable('strikethrough')
html = md.render(md_string)
</code></pre>
</div>
<h3>Go (Goldmark)</h3>
<div class="lang-block">
<div class="lang-block-header">go</div>
<pre><code>import (
"bytes"
"github.com/yuin/goldmark"
"github.com/yuin/goldmark/extension"
)
md := goldmark.New(goldmark.WithExtensions(extension.GFM))
var buf bytes.Buffer
md.Convert([]byte(source), &buf)
fmt.Println(buf.String())
</code></pre>
</div>
<h3>Rust (pulldown-cmark)</h3>
<div class="lang-block">
<div class="lang-block-header">rust</div>
<pre><code>use pulldown_cmark::{Parser, Options, html};
let mut opts = Options::empty();
opts.insert(Options::ENABLE_TABLES);
opts.insert(Options::ENABLE_TASKLISTS);
opts.insert(Options::ENABLE_STRIKETHROUGH);
let parser = Parser::new_ext(md, opts);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
</code></pre>
</div>
<h3>PHP (Parsedown)</h3>
<div class="lang-block">
<div class="lang-block-header">php</div>
<pre><code>// composer require erusev/parsedown
$parsedown = new Parsedown();
$parsedown->setSafeMode(true); // sanitize HTML
echo $parsedown->text($mdString);
</code></pre>
</div>
<h3>Ruby (Redcarpet / kramdown)</h3>
<div class="lang-block">
<div class="lang-block-header">ruby</div>
<pre><code>require 'redcarpet'
renderer = Redcarpet::Render::HTML.new(filter_html: true, safe_links_only: true)
md = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true, tables: true)
html = md.render(md_string)
# Or kramdown — more features, slightly slower
require 'kramdown'
html = Kramdown::Document.new(md_string, input: 'GFM').to_html
</code></pre>
</div>
<h3>Java (CommonMark-Java + extensions)</h3>
<div class="lang-block">
<div class="lang-block-header">java</div>
<pre><code>import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.HtmlRenderer;
import org.commonmark.ext.gfm.tables.TablesExtension;
List<Extension> extensions = Arrays.asList(TablesExtension.create());
Parser parser = Parser.builder().extensions(extensions).build();
HtmlRenderer renderer = HtmlRenderer.builder().extensions(extensions).build();
String html = renderer.render(parser.parse(mdString));
</code></pre>
</div>
<h3>Pandoc (the Swiss Army knife)</h3>
<div class="lang-block">
<div class="lang-block-header">pandoc</div>
<pre><code># Convert markdown to HTML
pandoc input.md -o output.html
# Markdown to PDF (via LaTeX)
pandoc input.md -o output.pdf --pdf-engine=xelatex
# Markdown to Word
pandoc input.md -o output.docx
# Specific markdown variant
pandoc input.md --from=gfm --to=html --standalone -o output.html
</code></pre>
</div>
</section>
<section class="article-section">
<h2>Real-world Markdown use cases</h2>
<h3>README files (~80% of all markdown)</h3>
<p>Every GitHub repo expects <code>README.md</code> at the root. It's the project's landing page — for both humans and the GitHub algorithm. Standard structure: project name + tagline, badges, install, quick start, usage, license. <strong>Tip:</strong> add an <code><img></code> tag with an <code>alt</code> attribute at the top to render a hero image without breaking text-mode <code>cat README.md</code>.</p>
<h3>Documentation sites (Docusaurus, MkDocs, Astro)</h3>
<p>Modern docs systems take markdown source, run it through plugins (link rewriting, ToC generation, syntax highlighting, mermaid diagrams), and produce static HTML. The result: docs are version-controlled with the code, contributors edit them like any other file, and review happens via PR.</p>
<h3>Static blog posts</h3>
<p>Hugo, Jekyll, Eleventy, Astro, Next.js MDX — all read markdown files with frontmatter (YAML metadata block at the top) and render to HTML. The author writes in markdown; the build pipeline produces SEO-optimized HTML with structured data.</p>
<h3>Pull request descriptions and issue templates</h3>
<p>GitHub renders the body of every issue, PR, and comment as GFM. Use checklists for PR todos, code blocks for stack traces, links to other issues with <code>#123</code>, mentions with <code>@username</code>.</p>
<h3>Slack & Discord messages</h3>
<p>Both apps support a subset of markdown. <code>**bold**</code>, <code>*italic*</code>, <code>~~strike~~</code>, code blocks, and links work in both. Discord additionally supports headings, block quotes, and lists; Slack stops at inline formatting.</p>
<h3>Note-taking apps (Obsidian, Joplin, Logseq)</h3>
<p>Plain-text markdown files in a folder = your knowledge base. Vendor lock-in is gone — your notes work in any markdown editor.</p>
</section>
<section class="article-section">
<h2>Common Markdown mistakes</h2>
<ul>
<li><strong>Forgetting blank lines around blocks.</strong> Markdown often merges blocks if there's no blank line between a paragraph and a list/heading/code block. Insert a blank line before and after every block-level element.</li>
<li><strong>Mixing tabs and spaces in nested lists.</strong> Some parsers handle either, but the offside rule for nested lists is space-sensitive. Pick one style site-wide.</li>
<li><strong>Hard-wrapping prose at 80 chars manually.</strong> GFM treats single newlines as soft breaks (rendered as spaces); double newlines as paragraphs. Many editors render hard wraps as ugly mid-sentence breaks. Let prose flow.</li>
<li><strong>Using <code>**bold**</code> and <code>__bold__</code> inconsistently.</strong> They're equivalent in GFM, but Reddit's old parser only supported <code>**</code>. Pick one for portability.</li>
<li><strong>Forgetting language tags on code blocks.</strong> A bare <code>```</code> block won't get syntax highlighting. Always add the language: <code>```js</code>, <code>```python</code>, <code>```yaml</code>.</li>
<li><strong>HTML inside markdown.</strong> Most renderers allow it (<code><sup></code>, <code><br></code>, <code><img></code>), but linters and platforms (npm, PyPI) often strip it. Use markdown syntax where possible.</li>
<li><strong>Relative paths in a README that gets reposted.</strong> If your README is shown on PyPI, npm, GitHub, and your blog, relative links break in 3 of 4 places. Use absolute URLs.</li>
<li><strong>Inline images without dimensions.</strong> Markdown's <code></code> doesn't support dimensions. For width/height, fall back to <code><img src="..." width="400"></code> HTML.</li>
<li><strong>Long tables.</strong> GFM tables are great for short reference tables, terrible for long data — they don't scroll. Convert to CSV with our <a href="json-to-csv">JSON to CSV tool</a> and link to it.</li>
</ul>
</section>
<section class="article-section">
<h2>Best Markdown editor for 2026 — what to compare</h2>
<p>Search results for "markdown editor online", "markdown preview", and "md to html" return many tools but most fail on real-world use: they don't support GFM tables (the most-used GFM feature), they break on fenced code blocks with curly braces, they don't sanitize HTML in the rendered output (XSS risk), or they upload your draft content to a server. Here's how the most-used Markdown editors compare in 2026:</p>
<table class="ref-table">
<thead><tr><th>Tool</th><th>GFM (tables, tasks, strikethrough)</th><th>Live split preview</th><th>Browser-only</th><th>HTML export</th><th>Cost</th></tr></thead>
<tbody>
<tr><td>FreeDevTool Markdown Preview</td><td>Yes (CommonMark + GFM)</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Free</td></tr>
<tr><td>dillinger.io</td><td>Yes</td><td>Yes</td><td>Mostly browser, cloud-save server-side</td><td>Yes</td><td>Free, ad-funded</td></tr>
<tr><td>stackedit.io</td><td>Yes</td><td>Yes</td><td>Browser + cloud sync</td><td>Yes</td><td>Free + paid</td></tr>
<tr><td>markdownlivepreview.com</td><td>Limited</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Free</td></tr>
<tr><td>VS Code "Open Preview" (Ctrl+K V)</td><td>Yes</td><td>Yes</td><td>Local IDE</td><td>Via export extensions</td><td>Free</td></tr>
<tr><td>Obsidian / Typora (apps)</td><td>Yes</td><td>WYSIWYG</td><td>Local</td><td>Yes</td><td>Free / Paid</td></tr>
</tbody>
</table>
<h3>What's the difference between CommonMark, GFM, and MultiMarkdown?</h3>
<table class="ref-table">
<thead><tr><th>Feature</th><th>CommonMark</th><th>GitHub Flavored Markdown (GFM)</th><th>MultiMarkdown</th></tr></thead>
<tbody>
<tr><td>Standardized</td><td>Yes (2014, current 0.31)</td><td>Yes (superset of CommonMark)</td><td>de-facto only</td></tr>
<tr><td>Tables</td><td>No</td><td>Yes (pipe syntax)</td><td>Yes</td></tr>
<tr><td>Task lists</td><td>No</td><td>Yes (- [ ] / - [x])</td><td>Yes</td></tr>
<tr><td>Strikethrough</td><td>No</td><td>Yes (~~text~~)</td><td>Yes</td></tr>
<tr><td>Autolinks</td><td>Limited</td><td>Yes (URLs auto-detected)</td><td>Yes</td></tr>
<tr><td>Footnotes</td><td>No</td><td>No (rendered as text)</td><td>Yes</td></tr>
<tr><td>Math (LaTeX)</td><td>No</td><td>No (GitHub adds via MathJax)</td><td>Yes</td></tr>
<tr><td>Used by</td><td>Spec baseline</td><td>GitHub, GitLab, Discourse</td><td>Pandoc, academic writing</td></tr>
</tbody>
</table>
<p>Decision rule: writing for GitHub/GitLab/blog → use GFM. Writing for a tool that says "CommonMark" → stick to CommonMark. Writing academic papers with footnotes/math → MultiMarkdown via Pandoc. This editor renders GFM (and thus CommonMark) — the most widely-supported variant in 2026.</p>
<h3>How do I preview Markdown locally without uploading my draft?</h3>
<p>Three options. <strong>1) This page</strong>: paste Markdown in the left pane; the right pane renders live via a CommonMark+GFM JavaScript parser running in your browser. Source never leaves the page. <strong>2) VS Code</strong>: <code>Ctrl+K V</code> opens a side preview of the active .md file — works offline. <strong>3) CLI</strong>: <code>pandoc input.md -o output.html</code> or <code>npx markdown-to-html input.md</code>. For drafts containing internal product names, customer references, or unannounced features, browser-only / local-only is the only safe choice. Avoid online editors with cloud-sync (StackEdit, Dillinger save-to-cloud) for sensitive drafts.</p>
<h3>Markdown editor alternative to dillinger.io — 4 reasons writers switched</h3>
<ol>
<li><strong>No cloud-save risk.</strong> Dillinger and StackEdit offer Dropbox/Google Drive sync — convenient, but uploads your draft. This page is browser-only with no save service.</li>
<li><strong>Sanitized HTML output.</strong> Default rendering strips inline <code><script></code>, <code><iframe></code>, and dangerous attributes — safe to paste rendered output into a CMS without re-sanitization.</li>
<li><strong>GFM-correct rendering.</strong> Tables, task lists, fenced code blocks, autolinks, strikethrough all match GitHub's rendering exactly. Useful when previewing READMEs before commit.</li>
<li><strong>Both .md and .html download.</strong> One-click export for either source or rendered output, ready to drop into Hugo/Jekyll/Astro/Eleventy content directories.</li>
</ol>
<p>Pair the Markdown editor with the <a href="/word-to-markdown">Word to Markdown Converter</a> for migrating Word documents, the <a href="/html-entity">HTML Entity Encoder</a> for special characters in MD, the <a href="/char-counter">Character Counter</a> for hitting blog-platform limits, and the <a href="/text-tools">Code & Text Tools hub</a> for the broader writing toolkit.</p>
<h2>Markdown best practices</h2>
<ul>
<li><strong>Stick to GFM.</strong> It's understood by every platform you'll publish on.</li>
<li><strong>Use the most semantic syntax available.</strong> <code>### Heading</code> not <code>**heading**</code>; <code>1. Item</code> not <code>1) Item</code>; lists for lists, blockquotes for quotes.</li>
<li><strong>Lint your markdown.</strong> <code>markdownlint-cli</code> catches missing blank lines, wrong list indentation, and other portability issues. Add it to CI.</li>
<li><strong>Preview before pushing.</strong> Use this tool, your IDE's preview, or <code>grip</code> (locally renders GFM as GitHub would) to catch broken layouts.</li>
<li><strong>Keep README focused.</strong> Top of the file is the most-read part. Hero (badge, name, tagline) → install → quick start → link to full docs. The wiki is for everything else.</li>
<li><strong>Use frontmatter for metadata.</strong> Static-site generators read YAML at the top of MD files for title, slug, date, tags. Keeps prose clean.</li>
<li><strong>Don't paste from Word/Google Docs.</strong> Hidden formatting characters break rendering. Use our <a href="word-to-markdown">Word to Markdown converter</a> first.</li>
<li><strong>Add alt text to images.</strong> Accessibility, SEO, and graceful degradation when images fail to load.</li>
</ul>
</section>
</article>
<!-- How to use + mistakes -->
<section class="use-cases">
<h2>How to use the markdown editor</h2>
<p>Live-preview GitHub-flavored markdown as you type — same renderer used in GitHub, GitLab, and most static-site generators. Useful for drafting README files, blog posts, PR descriptions, and documentation. Edits stay in the browser; nothing uploads.</p>
<ul class="use-case-list">
<li><strong>1.</strong> Type or paste markdown into the left pane. The right pane updates live, character-by-character.</li>
<li><strong>2.</strong> Use GFM extras: tables (<code>|--|--|</code>), task lists (<code>- [x]</code>), strikethrough (<code>~~text~~</code>), fenced code blocks with language hints (<code>```js</code>), autolinking of bare URLs.</li>
<li><strong>3.</strong> Toggle "math mode" for LaTeX-style equations rendered with KaTeX (<code>$E = mc^2$</code>) — useful for tech blog posts.</li>
<li><strong>4.</strong> Insert images by dragging onto the editor — they're Base64-encoded into the markdown source, viewable in any preview without external hosting.</li>
<li><strong>5.</strong> Export options: download as <code>.md</code>, copy raw markdown, copy rendered HTML, or print to PDF.</li>
</ul>
<h3>Common mistakes to avoid</h3>
<ul class="mistakes-list">
<li><strong>Mixing tabs and spaces in code blocks.</strong> Most renderers handle either, but the offside rule for nested lists is space-sensitive. Pick one and stick to it.</li>
<li><strong>Forgetting blank lines around code blocks and lists.</strong> Without them, markdown often merges blocks. Insert a blank line before and after every fenced block, list, and heading.</li>
<li><strong>Using <code>**bold**</code> and <code>__bold__</code> inconsistently.</strong> They're equivalent in GFM but some older renderers (Reddit) only support one. Pick one for portability.</li>
<li><strong>Hard-wrapping text at 80 chars manually.</strong> GFM treats single newlines as soft breaks; double newlines as paragraphs. Many editors render hard wraps as ugly mid-sentence breaks. Let it flow.</li>
<li><strong>Inline HTML in markdown.</strong> Most renderers allow it, but linters and platforms (npm, PyPI) often strip it. Use markdown syntax where possible; HTML only for tables that need spans/styling.</li>
<li><strong>Linking with relative paths in a README that gets reposted.</strong> If your README is shown on PyPI, npm, GitHub, and your blog, relative links break in 3 of 4 places. Use absolute URLs.</li>
</ul>
</section>
<section class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-item open">
<div class="faq-q" onclick="toggleFaq(this)">What is GitHub Flavored Markdown (GFM)?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a">GFM is GitHub's extension of John Gruber's original Markdown spec. It adds support for <strong>tables</strong> (using pipe syntax), <strong>fenced code blocks</strong> (triple backticks with language hints), <strong>task lists</strong> (<code>- [x]</code> checkboxes), <strong>strikethrough</strong> (<code>~~text~~</code>), <strong>autolinked URLs</strong>, and emoji shortcodes. GFM is the most widely used Markdown flavor across developer tools, documentation platforms, and content management systems.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">How do I convert Markdown to clean HTML?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a">Type or paste your Markdown in the editor above and the HTML is generated in real time. Click "Copy HTML" to get the converted output. The generated HTML uses semantic elements (<code><h1></code>–<code><h6></code>, <code><p></code>, <code><ul></code>, <code><table></code>, <code><blockquote></code>) that are SEO-friendly and accessible. For production use, popular libraries include <strong>marked.js</strong>, <strong>markdown-it</strong>, and <strong>remark</strong>.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">What is the difference between Markdown and HTML?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a"><strong>Markdown</strong> is a lightweight markup language designed for human readability — it uses symbols like <code>#</code> for headings and <code>**</code> for bold. <strong>HTML</strong> is the full markup language of the web with tags like <code><h1></code> and <code><strong></code>. Markdown compiles to HTML for browser rendering. Markdown is faster to write and read; HTML offers granular control over structure and styling.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">What is the Markdown syntax for tables?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a">Use pipes <code>|</code> and dashes <code>-</code>: <code>| Header | Header |</code> on the first line, <code>| --- | --- |</code> for the separator, then <code>| Cell | Cell |</code> for data rows. Align columns with colons: <code>:---</code> (left), <code>:---:</code> (center), <code>---:</code> (right). Tables are a GFM extension — they're not in the original Markdown specification by John Gruber.</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">Can I use Markdown for SEO-optimized content?<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
<div class="faq-a">Markdown itself doesn't affect SEO — what matters is the <strong>HTML it produces</strong>. Use proper heading hierarchy (H1 → H2 → H3), add alt text to images (<code></code>), structure content with semantic elements, and ensure the generated HTML is clean. Many static site generators like <strong>Hugo</strong>, <strong>Jekyll</strong>, <strong>Next.js</strong>, and <strong>Astro</strong> convert Markdown to SEO-optimized HTML with metadata support.</div>
</div>
</section>
<section class="related-section">
<h2>Related Tools</h2>
<div class="related-grid">
<a class="related-card" href="json-formatter"><div class="related-icon">{ }</div><div class="related-card-info"><div class="related-card-name">JSON Formatter</div><div class="related-card-desc">Pretty print and validate JSON</div></div></a>
<a class="related-card" href="html-entity"><div class="related-icon">&</div><div class="related-card-info"><div class="related-card-name">HTML Entity Encoder</div><div class="related-card-desc">Encode and decode HTML entities</div></div></a>
<a class="related-card" href="text-diff"><div class="related-icon">±</div><div class="related-card-info"><div class="related-card-name">Text Diff Checker</div><div class="related-card-desc">Compare two texts side by side</div></div></a>
</div>
</section>
<section class="all-tools-section" aria-label="Browse all FreeDevTool developer tools">
<h2>Browse all 50 free developer tools</h2>
<p class="atc-sub">All tools run in your browser, no signup required, nothing sent to a server.</p>
<div class="all-tools-grid">
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">b64</div>
<div class="atc-cat-title"><h3>Encoding & Conversion</h3><span class="atc-cat-count">11 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/base64-encoder">Base64 Encoder / Decoder</a></li>
<li><a href="/base64-image">Image to Base64</a></li>
<li><a href="/byte-converter">Byte Converter (KB / MB / GB)</a></li>
<li><a href="/case-converter">Case Converter</a></li>
<li><a href="/hex-to-rgb">Hex to RGB / HSL</a></li>
<li><a href="/html-entity">HTML Entity Encoder</a></li>
<li><a href="/json-to-csv">JSON to CSV Converter</a></li>
<li><a href="/px-to-rem">PX to REM Converter</a></li>
<li><a href="/string-escape">String Escape / Unescape</a></li>
<li><a href="/url-encoder">URL Encoder / Decoder</a></li>
<li><a href="/yaml-to-json">YAML to JSON Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">{ }</div>
<div class="atc-cat-title"><h3>Formatting & Generators</h3><span class="atc-cat-count">13 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/color-name">Color Name from Hex</a></li>
<li><a href="/color-picker">Color Palette Picker</a></li>
<li><a href="/css-box-shadow">CSS Box Shadow</a></li>
<li><a href="/css-gradient">CSS Gradient Generator</a></li>
<li><a href="/json-formatter">JSON Formatter / Validator</a></li>
<li><a href="/lorem-ipsum">Lorem Ipsum Generator</a></li>
<li><a href="/markdown-preview">Markdown Preview</a></li>
<li><a href="/password-generator">Password Generator</a></li>
<li><a href="/qr-generator">QR Code Generator</a></li>
<li><a href="/sql-formatter">SQL Formatter</a></li>
<li><a href="/uuid-generator">UUID Generator</a></li>
<li><a href="/word-to-markdown">Word to Markdown</a></li>
<li><a href="/xml-formatter">XML Formatter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">JS</div>
<div class="atc-cat-title"><h3>Minifiers & DevOps</h3><span class="atc-cat-count">6 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/chmod-calculator">chmod Calculator</a></li>
<li><a href="/cron-parser">Cron Expression Parser</a></li>
<li><a href="/css-minifier">CSS Minifier</a></li>
<li><a href="/html-minifier">HTML Minifier</a></li>
<li><a href="/js-minifier">JavaScript Minifier</a></li>
<li><a href="/http-status">HTTP Status Codes</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">#</div>
<div class="atc-cat-title"><h3>Security & Hashing</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/hash-generator">Hash Generator (MD5, SHA)</a></li>
<li><a href="/jwt-decoder">JWT Decoder</a></li>
<li><a href="/jwt-generator">JWT Generator</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">.*</div>
<div class="atc-cat-title"><h3>Code & Text</h3><span class="atc-cat-count">8 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/ai-token-counter">AI Token Counter</a></li>
<li><a href="/char-counter">Character & Word Counter</a></li>
<li><a href="/git-cheatsheet">Git Commands Cheatsheet</a></li>
<li><a href="/number-base">Number Base Converter</a></li>
<li><a href="/regex-explainer">Regex Explainer</a></li>
<li><a href="/regex-tester">Regex Tester</a></li>
<li><a href="/text-diff">Text Diff Checker</a></li>
<li><a href="/wcag-contrast">WCAG Contrast Checker</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">IP</div>
<div class="atc-cat-title"><h3>Network & APIs</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/dns-lookup">DNS Lookup</a></li>
<li><a href="/http-request-builder">HTTP Request Builder</a></li>
<li><a href="/ip-lookup">IP Address Lookup</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">⏱</div>
<div class="atc-cat-title"><h3>Time & Dates</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/relative-time">Relative Time Calculator</a></li>
<li><a href="/timestamp-diff">Timestamp Diff</a></li>
<li><a href="/unix-timestamp-converter">Unix Timestamp Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">SEO</div>
<div class="atc-cat-title"><h3>SEO & Meta</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/meta-tag-generator">Meta Tag Generator</a></li>
<li><a href="/og-preview">Open Graph Preview</a></li>
<li><a href="/slug-generator">URL Slug Generator</a></li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<div>© 2026 FreeDevTool — Markdown Editor & Preview</div>
<div class="footer-links"><a href="/all-tools">All Tools</a><a href="/about">About</a><a href="/privacy">Privacy Policy</a><a href="/terms">Terms of Use</a></div>
</footer>
<script>
// Simple Markdown parser (no dependencies)
function parseMd(md) {
let html = md;
// Code blocks
html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (m, lang, code) => '<pre><code>' + esc(code.trim()) + '</code></pre>');
// Inline code
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
// Headings
html = html.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
html = html.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
html = html.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
html = html.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
html = html.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
html = html.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
// HR
html = html.replace(/^---+$/gm, '<hr>');
// Blockquote
html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
// Bold & Italic
html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
// Links & Images
html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
// Tables
html = html.replace(/^(\|.+\|)\n(\|[-:\s|]+\|)\n((?:\|.+\|\n?)*)/gm, (m, header, sep, body) => {
const ths = header.split('|').filter(Boolean).map(c => '<th>' + c.trim() + '</th>').join('');
const rows = body.trim().split('\n').map(r => {
const tds = r.split('|').filter(Boolean).map(c => '<td>' + c.trim() + '</td>').join('');
return '<tr>' + tds + '</tr>';
}).join('');
return '<table><thead><tr>' + ths + '</tr></thead><tbody>' + rows + '</tbody></table>';
});
// Unordered lists
html = html.replace(/^[-*]\s+(.+)$/gm, '<li>$1</li>');
html = html.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
// Task lists
html = html.replace(/<li>\[x\]\s*/gi, '<li>☑ ');
html = html.replace(/<li>\[\s?\]\s*/gi, '<li>☐ ');
// Paragraphs
html = html.split('\n\n').map(block => {
block = block.trim();
if (!block) return '';
if (/^<(h[1-6]|ul|ol|li|pre|blockquote|table|hr|div)/.test(block)) return block;
return '<p>' + block.replace(/\n/g, '<br>') + '</p>';
}).join('\n');
return html;
}
function esc(s) { return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
function renderMd() {
const md = document.getElementById('md-input').value;
const html = parseMd(md);
document.getElementById('md-preview').innerHTML = html;
document.getElementById('html-output').textContent = html;
const words = md.trim().split(/\s+/).filter(Boolean).length;
document.getElementById('md-count').textContent = words + ' words';
}
function copyHtml() {
const html = document.getElementById('html-output').textContent;
if (html) { navigator.clipboard.writeText(html); showToast(); }