-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmarkdown-preview.html
More file actions
161 lines (150 loc) · 9.6 KB
/
Copy pathmarkdown-preview.html
File metadata and controls
161 lines (150 loc) · 9.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Web Dev Toolkit", "item": "https://pyfile-toolkit.github.io/web-toolkit/"}, {"@type": "ListItem", "position": 2, "name": "Markdown Previewer", "item": "https://pyfile-toolkit.github.io/web-toolkit/markdown-preview.html"}]}
</script>
<meta property="og:title" content="Markdown Previewer">
<meta property="og:description" content="Live markdown preview as you type. Export to HTML or MD. Free, instant, 100% browser-based.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pyfile-toolkit.github.io/web-toolkit/markdown-preview.html">
<meta property="og:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Markdown Previewer">
<meta name="twitter:description" content="Live markdown preview as you type. Export to HTML or MD. Free, instant, 100% browser-based.">
<meta name="twitter:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png"><link rel="icon" href="favicon.ico" sizes="any">
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Previewer</title>
<link rel="canonical" href="https://pyfile-toolkit.github.io/web-toolkit/markdown-preview.html">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Markdown Previewer",
"operatingSystem": "ANY",
"applicationCategory": "UtilitiesApplication",
"description": "Live markdown preview as you type. Export to HTML or MD.",
"offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
}
</script>
<meta name="description" content="Live markdown preview as you type. Export to HTML or MD. Free, instant, 100% browser-based.">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RDDV2FW9HY"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-RDDV2FW9HY");</script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;padding:20px}
.card{max-width:900px;margin:0 auto;background:#1e293b;border-radius:16px;padding:32px}
h1{text-align:center;color:#f8fafc;margin-bottom:4px}
.sub{text-align:center;color:#94a3b8;margin-bottom:20px;font-size:.9rem}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel h3{color:#f8fafc;margin-bottom:8px;font-size:.9rem}
textarea{width:100%;padding:12px;border-radius:8px;background:#334155;color:#e2e8f0;border:1px solid #475569;font-family:monospace;font-size:.85rem;resize:vertical;min-height:300px}
.preview{background:#1e1e3a;border:1px solid #334155;border-radius:8px;padding:16px;min-height:300px;overflow-y:auto}
.preview h1{color:#f8fafc;font-size:1.4rem;margin:16px 0 8px;text-align:left}
.preview h2{color:#f8fafc;font-size:1.2rem;margin:12px 0 6px}
.preview p{color:#cbd5e1;margin:8px 0}
.preview code{background:#334155;padding:2px 6px;border-radius:4px;font-size:.85rem}
.preview pre{background:#0f172a;padding:12px;border-radius:8px;overflow-x:auto}
.preview a{color:#818cf8}
.kofi{text-align:center;margin:16px 0 8px;padding:10px;background:#1e1e3a;border-radius:8px}
.kofi a{color:#ff5e5b;font-weight:600;text-decoration:none}
.btns{display:flex;gap:8px;justify-content:center;margin:12px 0;flex-wrap:wrap}
button{padding:8px 16px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:.85rem}
.btn-exp{background:#22c55e;color:#fff}
.btn-copy{background:#64748b;color:#fff}
.ads{margin-top:16px;padding:12px;background:#1e1e3a;border-radius:8px;text-align:center;font-size:.85rem}
.ads a{color:#818cf8}
.content{margin-top:28px;max-width:720px;margin-left:auto;margin-right:auto;padding:0 6px}
.content h2{color:#f8fafc;font-size:1.25rem;margin:24px 0 10px}
.content p{color:#cbd5e1;line-height:1.6;margin-bottom:12px;font-size:.95rem}
.content strong{color:#e2e8f0}
@media(max-width:520px){
.container{padding:20px 14px}
.tool-card{padding:16px}
body{padding:12px!important}
.card{padding:18px!important;max-width:100%!important}
.content h2{font-size:1.05rem}
.item{padding:16% 0}
.item .shape{font-size:2.2rem}
}
@media(max-width:380px){
.item{padding:13% 0}
.item .shape{font-size:1.9rem}
.hud{flex-wrap:wrap;gap:4px}
}
</style>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Markdown hard to learn?","acceptedAnswer":{"@type":"Answer","text":"No, most syntax is intuitive."}},{"@type":"Question","name":"Can I use it in apps?","acceptedAnswer":{"@type":"Answer","text":"Yes, widely supported."}},{"@type":"Question","name":"Is my text uploaded?","acceptedAnswer":{"@type":"Answer","text":"No, local only."}}]}</script>
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/site.js" defer></script>
</head>
<body>
<div class="card">
<h1>📝 Markdown Previewer</h1>
<p class="sub">Type markdown on the left — see rendered HTML on the right</p>
<div class="panels">
<div class="panel">
<h3>Markdown</h3>
<textarea id="input" placeholder="# Hello World This is **bold** and *italic* - List item 1 - List item 2 [Link](https://example.com) `inline code`"># Hello World
This is **bold** and *italic*
- List item 1
- List item 2
[Link](https://example.com)
`inline code`</textarea>
</div>
<div class="panel">
<h3>Preview</h3>
<div class="preview" id="preview"></div>
</div>
</div>
<div class="btns">
<button class="btn-exp" onclick="exportHTML()">📥 Export HTML</button>
<button class="btn-copy" onclick="copyPreview()">📋 Copy HTML</button>
</div>
<div class="kofi"><a href="https://ko-fi.com/pyfiletoolkit" target="_blank">☕ Support this tool on Ko-fi</a></div>
<div class="ads">
<a href="https://pyfile-toolkit.github.io/web-toolkit/">← Toolkit</a> |
<a href="https://pyfiletoolkit.gumroad.com/">Premium</a>
<a href="https://pyfile-toolkit.github.io/web-toolkit/youtube-tag-generator.html">YouTube Tags</a>
· <a href="privacy.html">Privacy</a> · <a href="about.html">About</a></div>
</div>
<script>
const inp=document.getElementById('input'),prev=document.getElementById('preview');
function render(){
let md=inp.value;
// Headers
md=md.replace(/^### (.+)$/gm,'<h3>$1</h3>');
md=md.replace(/^## (.+)$/gm,'<h2>$1</h2>');
md=md.replace(/^# (.+)$/gm,'<h1>$1</h1>');
// Bold, italic
md=md.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');
md=md.replace(/\*(.+?)\*/g,'<em>$1</em>');
// Links
md=md.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2">$1</a>');
// Inline code
md=md.replace(/`([^`]+)`/g,'<code>$1</code>');
// Lists
md=md.replace(/^- (.+)$/gm,'<li>$1</li>');
md=md.replace(/(<li>.*<\/li>\n?)+/g,'<ul>$&</ul>');
// Paragraphs
md=md.replace(/^(?!<[hul/])(.+)$/gm,'<p>$1</p>');
prev.innerHTML=md;
}
inp.addEventListener('input',render);
render();
function exportHTML(){
const blob=new Blob(['<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Preview</title></head><body>'+prev.innerHTML+'
<div class="related" style="font-family:system-ui;font-size:.85rem;color:#64748b;text-align:center;margin-top:14px">More tools: <a href="json-formatter.html">Json Formatter</a> · <a href="html-encoder.html">Html Encoder</a> · <a href="case-converter.html">Case Converter</a> · <a href="color-converter.html">Color Converter</a></div>
<div class="content"><h2>What is Markdown?</h2><p>Markdown is a lightweight markup language that formats text using simple symbols — #, *, and >. It is widely used for README files, docs, forums, and notes because it is readable both raw and rendered.</p><h2>How to use the Markdown previewer</h2><p>Type Markdown on the left; the formatted preview updates live on the right. Export to HTML or MD when done. Writing in Markdown keeps your content structured and portable.</p><h2>Why use Markdown</h2><p>Markdown is fast, version-control friendly, and converts easily to HTML, PDF, and more. It is the standard for developer documentation.</p><h2>Markdown FAQ</h2><p><strong>Is Markdown hard to learn?</strong> No, most syntax is intuitive. <strong>Can I use it in apps?</strong> Yes, widely supported. <strong>Is my text uploaded?</strong> No, local only.</p></div>
<div id="crypto-donate"></div>
<script src="donate.js"></script>
</body></html>'],{type:'text/html'});
const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='preview.html';a.click();
}
function copyPreview(){navigator.clipboard.writeText(prev.innerHTML)}
</script>
<div class="content"><h2>What is Markdown?</h2><p>Markdown is a lightweight markup language that formats text using simple symbols — #, *, and >. It is widely used for README files, docs, forums, and notes because it is readable both raw and rendered.</p><h2>How to use the Markdown previewer</h2><p>Type Markdown on the left; the formatted preview updates live on the right. Export to HTML or MD when done. Writing in Markdown keeps your content structured and portable.</p><h2>Why use Markdown</h2><p>Markdown is fast, version-control friendly, and converts easily to HTML, PDF, and more. It is the standard for developer documentation.</p><h2>Markdown FAQ</h2><p><strong>Is Markdown hard to learn?</strong> No, most syntax is intuitive. <strong>Can I use it in apps?</strong> Yes, widely supported. <strong>Is my text uploaded?</strong> No, local only.</p></div>
<div id="crypto-donate"></div>
<script src="donate.js"></script>
</body>
</html>