-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathindex.html
More file actions
207 lines (181 loc) · 10.7 KB
/
index.html
File metadata and controls
207 lines (181 loc) · 10.7 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
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 基础 SEO 标签 -->
<title>MD2HTML - Markdown 和 HTML 在线转换工具</title>
<meta name="description" content="免费的 Markdown 和 HTML 双向转换工具，支持实时预览、一键复制、深色模式。特别适用于 WordPress 内容发布和 HTML 网页生成。">
<meta name="keywords" content="Markdown转换器,HTML转换器,Markdown编辑器,在线工具,WordPress工具,HTML生成器">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://md2html.com/">
<meta property="og:title" content="MD2HTML - Markdown 和 HTML 在线转换工具">
<meta property="og:description" content="免费的 Markdown 和 HTML 双向转换工具，支持实时预览、一键复制、深色模式。特别适用于 WordPress 内容发布和 HTML 网页生成。">
<meta property="og:image" content="images/og-image.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://md2html.com/">
<meta name="twitter:title" content="MD2HTML - Markdown 和 HTML 在线转换工具">
<meta name="twitter:description" content="免费的 Markdown 和 HTML 双向转换工具，支持实时预览、一键复制、深色模式。特别适用于 WordPress 内容发布和 HTML 网页生成。">
<meta name="twitter:image" content="images/og-image.png">
<!-- 网站图标 -->
<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="images/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<!-- PWA 支持 -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#020817" media="(prefers-color-scheme: dark)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- 其他重要 meta 标签 -->
<meta name="author" content="MD2HTML">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<link rel="canonical" href="https://md2html.com/">
<!-- 预连接优化 -->
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://unpkg.com">
<!-- 资源引入 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0029CS4Q54"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0029CS4Q54');
</script>
<!-- Plausible 统计 -->
<script defer data-domain="md2html.com" src="https://data.tuocibao.com/js/script.js"></script>
<body>
<nav class="navbar">
<div class="navbar-container">
<div class="brand">
<img src="images/logo.png" alt="MD2HTML Logo" class="logo-image" width="24" height="24">
<a href="/" class="logo">MD2HTML</a>
</div>
<div class="navbar-controls">
<button class="theme-switch" onclick="toggleTheme()" aria-label="切换主题">
<span class="theme-icon">🌙</span>
</button>
<button class="lang-switch" onclick="toggleLanguage()">English</button>
</div>
</div>
</nav>
<div class="main-content">
<div class="header">
<h1 data-i18n="title">Markdown 和 HTML 双向转换</h1>
<p class="subtitle" data-i18n="subtitle">特别用于 Wordpress 内容发表、HTML 网页生成等场景；适合将 ChatGPT、Claude、Perplexity 等 AI 工具的输出转换为 HTML 格式。</p>
</div>
<div class="controls">
<div class="mode-switch">
<select id="convert-mode" onchange="switchMode()" aria-label="转换模式">
<option value="md2html" data-i18n="md2html">Markdown 转 HTML</option>
<option value="html2md" data-i18n="html2md">HTML 转 Markdown</option>
</select>
</div>
<div class="citation-control" id="citation-control">
<input type="checkbox" id="remove-citations" checked>
<label for="remove-citations" data-i18n="removeCitations">去除引文(来自 <a href="https://perplexity.ai/pro?referral_code=6AU5QB68" class="perplexity-link" target="_blank" rel="noopener">Perplexity.ai</a>)</label>
</div>
</div>
<div class="container">
<div>
<div class="input-label">
<h2 id="input-title" data-i18n="inputTitle">Markdown 输入</h2>
<button onclick="clearInput()" data-i18n="clearInput">清空输入</button>
</div>
<textarea id="input-area" data-i18n-placeholder="inputPlaceholder" placeholder="在这里输入内容...">
# Sample Markdown
This is some basic, sample markdown.
## Second Heading
* Unordered lists, and:
1. One
1. Two
1. Three
* More
> Blockquote
And **bold**, *italics*, and even *italics and later **bold***. Even ~~strikethrough~~. [A link](https://md2html.com) to somewhere.
And code highlighting:
```js
var foo = 'bar';
function baz(s) {
return foo + ':' + s;
}
```
Or inline code like `var foo = 'bar';`.
Or an image of logo
The end ...</textarea>
<div class="input-buttons">
<button onclick="convert()" data-i18n="convert">立即转换</button>
<button onclick="clearInput()" data-i18n="clearInput">清空输入</button>
</div>
</div>
<div>
<div class="output-label">
<h2 id="output-title" data-i18n="outputTitle">HTML 输出</h2>
<button class="preview-btn" onclick="togglePreview()" data-i18n="preview">预览 HTML</button>
</div>
<div id="output-wrapper">
<div id="raw-area" class="output active"></div>
<div id="preview-area" class="output"></div>
</div>
<div class="output-buttons">
<button onclick="copyOutput()" data-i18n="copy">复制输出</button>
<button onclick="downloadHtml()" data-i18n="download">下载 HTML</button>
</div>
</div>
</div>
</div>
<!-- 在 toast div 之前添加 footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3 data-i18n="footerAboutTitle">关于 MD2HTML</h3>
<p data-i18n="footerAboutText">MD2HTML 是一个免费的在线工具，帮助用户在 Markdown 和 HTML 格式之间轻松转换。产品开源，欢迎反馈任何需求到 <a href="mailto:hi@md2html.com">hi@md2html.com</a></p>
</div>
<div class="footer-section">
<h3 data-i18n="footerAgreementTitle">用户协议</h3>
<ul>
<li><a href="/privacy.html" data-i18n="footerPrivacyPolicy">隐私政策</a></li>
<li><a href="/terms.html" data-i18n="footerTerms">使用条款</a></li>
</ul>
</div>
<div class="footer-section">
<h3 data-i18n="footerFriendlyLinks">友情链接</h3>
<ul>
<li><a href="https://jiashuiyin.com" target="_blank" rel="noopener" data-i18n="footerWatermark">水印添加器</a></li>
<li><a href="https://researchtitle.textgen.net" target="_blank" rel="noopener" data-i18n="footerResearchTitle">论文标题生成器</a></li>
</ul>
</div>
<div class="footer-section">
<h3 data-i18n="footerContactTitle">联系我们</h3>
<div class="social-links">
<a href="https://github.com/pdmaker/Markdown-to-html" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="social-icon" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>
</a>
<a href="https://x.com/pdmake" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="social-icon" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"/>
</svg>
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p data-i18n="footerCopyright">© 2024 MD2HTML. 保留所有权利。</p>
</div>
</footer>
<script type="module" src="script.js"></script>
<div class="toast" id="toast"></div>
</body>
</html>