<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown 轉 HTML 轉換器</title>
<!-- 使用 GitHub Markdown 的 CSS 樣式，讓渲染的 HTML 更美觀 -->
<link rel="stylesheet" >
<!-- Showdown Markdown 轉 HTML 庫 -->
<script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f6f8fa;
color: #24292e;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.editor-container, .preview-container {
width: 50%;
}
}
.editor-container, .preview-container {
display: flex;
flex-direction: column;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
padding-bottom: 10px;
border-bottom: 1px solid #e1e4e8;
color: #2c3e50;
}
textarea {
width: 100%;
height: 300px;
padding: 14px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 6px;
resize: vertical;
font-family: monospace;
line-height: 1.5;
}
#preview {
flex-grow: 1;
padding: 14px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: white;
overflow-y: auto;
height: 300px;
}
.github-markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 20px;
}
.button-container {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
button {
padding: 10px 20px;
background-color: #2ea44f;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s;
}
button:hover {
background-color: #22863a;
}
#copyBtn {
background-color: #0366d6;
}
#copyBtn:hover {
background-color: #0256b3;
}
.instructions {
background-color: #f8f9fa;
border-left: 4px solid #0366d6;
padding: 15px;
margin-bottom: 20px;
border-radius: 0 4px 4px 0;
}
</style>
</head>
<body>
<h1>Markdown 轉 HTML 轉換器</h1>
<div class="instructions">
<p><strong>使用說明：</strong> 在左側輸入 Markdown 文本，右側將實時顯示轉換后的 HTML 預覽。點擊"復制 HTML"按鈕可將生成的 HTML 代碼復制到剪貼板。</p>
</div>
<div class="container">
<div class="editor-container">
<h2>Markdown 輸入</h2>
<textarea id="markdownInput" placeholder="在此輸入 Markdown 文本..."># Hello World!
這是一個簡單的Markdown示例。
- 列表項一
- 列表項二
- 列表項三
**粗體文本** *斜體文本*
[這是一個鏈接](https://www.example.com)
> 這是一個引用塊</textarea>
</div>
<div class="preview-container">
<h2>HTML 預覽</h2>
<div id="preview" class="markdown-body"></div>
</div>
</div>
<div class="button-container">
<button id="copyBtn">復制 HTML</button>
<button id="clearBtn">清空內容</button>
</div>
<script>
// 初始化 Showdown 轉換器
const converter = new showdown.Converter({
tables: true,
tasklists: true,
strikethrough: true,
simplifiedAutoLink: true
});
// 獲取DOM元素
const markdownInput = document.getElementById('markdownInput');
const preview = document.getElementById('preview');
const copyBtn = document.getElementById('copyBtn');
const clearBtn = document.getElementById('clearBtn');
// 更新預覽函數
function updatePreview() {
const markdownText = markdownInput.value;
const html = converter.makeHtml(markdownText);
preview.innerHTML = html;
}
// 初始加載時更新預覽
updatePreview();
// 輸入時實時更新預覽
markdownInput.addEventListener('input', updatePreview);
// 復制HTML代碼到剪貼板
copyBtn.addEventListener('click', function() {
const html = converter.makeHtml(markdownInput.value);
navigator.clipboard.writeText(html).then(() => {
alert('HTML 代碼已復制到剪貼板！');
}).catch(err => {
console.error('無法復制文本: ', err);
alert('復制失敗，請手動復制預覽內容。');
});
});
// 清空內容
clearBtn.addEventListener('click', function() {
if (confirm('確定要清空所有內容嗎？')) {
markdownInput.value = '';
preview.innerHTML = '';
}
});
</script>
</body>
</html>
400 186 1886
