deepseek v3-0324 Markdown 編輯器 HTML

Markdown 編輯器 HTML

以下是一個美觀的 Markdown 編輯器 HTML 頁面，支持多種主題切換和實時預覽功能：
在這里插入圖片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多功能 Markdown 編輯器</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script><style>:root {--primary-color: #3498db;--secondary-color: #2980b9;--background-color: #f9f9f9;--text-color: #333;--sidebar-color: #2c3e50;--sidebar-text: #ecf0f1;--editor-bg: #fff;--preview-bg: #fff;--border-color: #ddd;}* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: var(--text-color);background-color: var(--background-color);transition: all 0.3s ease;}.container {display: flex;min-height: 100vh;}.sidebar {width: 250px;background-color: var(--sidebar-color);color: var(--sidebar-text);padding: 20px;transition: all 0.3s ease;}.sidebar-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;}.sidebar-title {font-size: 1.5rem;font-weight: bold;}.theme-selector {margin-bottom: 30px;}.theme-selector h3 {margin-bottom: 15px;font-size: 1.1rem;}.theme-options {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}.theme-option {width: 100%;height: 30px;border-radius: 4px;cursor: pointer;border: 2px solid transparent;}.theme-option:hover {opacity: 0.9;}.theme-option.active {border-color: var(--sidebar-text);}.default-theme { background: linear-gradient(135deg, #3498db 50%, #2980b9 50%); }.dark-theme { background: linear-gradient(135deg, #34495e 50%, #2c3e50 50%); }.solarized-theme { background: linear-gradient(135deg, #268bd2 50%, #073642 50%); }.monokai-theme { background: linear-gradient(135deg, #a6e22e 50%, #272822 50%); }.dracula-theme { background: linear-gradient(135deg, #bd93f9 50%, #282a36 50%); }.github-theme { background: linear-gradient(135deg, #24292e 50%, #f6f8fa 50%); }.main-content {flex: 1;display: flex;flex-direction: column;}.toolbar {background-color: var(--primary-color);color: white;padding: 10px 20px;display: flex;justify-content: space-between;align-items: center;}.toolbar-title {font-size: 1.2rem;font-weight: bold;}.toolbar-actions button {background-color: var(--secondary-color);color: white;border: none;padding: 8px 15px;border-radius: 4px;cursor: pointer;margin-left: 10px;transition: background-color 0.2s;}.toolbar-actions button:hover {background-color: #1a6ea0;}.editor-container {display: flex;flex: 1;overflow: hidden;}.editor-section, .preview-section {flex: 1;padding: 20px;overflow-y: auto;position: relative;}.editor-section {background-color: var(--editor-bg);border-right: 1px solid var(--border-color);}.preview-section {background-color: var(--preview-bg);}.section-title {font-size: 1rem;margin-bottom: 15px;color: var(--primary-color);display: flex;align-items: center;}.section-title i {margin-right: 8px;}#markdown-editor {width: 100%;height: calc(100% - 30px);border: 1px solid var(--border-color);border-radius: 4px;padding: 15px;font-family: 'Consolas', 'Monaco', monospace;font-size: 14px;line-height: 1.5;resize: none;background-color: var(--editor-bg);color: var(--text-color);}#markdown-preview {height: calc(100% - 30px);overflow-y: auto;padding: 15px;border: 1px solid var(--border-color);border-radius: 4px;background-color: var(--preview-bg);}#markdown-preview pre {background-color: #f5f5f5;padding: 10px;border-radius: 4px;overflow-x: auto;}#markdown-preview code {font-family: 'Consolas', 'Monaco', monospace;}#markdown-preview blockquote {border-left: 4px solid var(--primary-color);padding-left: 15px;color: #666;margin: 15px 0;}#markdown-preview table {border-collapse: collapse;width: 100%;margin: 15px 0;}#markdown-preview table, #markdown-preview th, #markdown-preview td {border: 1px solid var(--border-color);}#markdown-preview th, #markdown-preview td {padding: 8px 12px;}#markdown-preview img {max-width: 100%;height: auto;}.status-bar {background-color: var(--primary-color);color: white;padding: 8px 20px;font-size: 0.8rem;display: flex;justify-content: space-between;}@media (max-width: 768px) {.container {flex-direction: column;}.sidebar {width: 100%;padding: 15px;}.editor-container {flex-direction: column;}.editor-section, .preview-section {flex: none;height: 50vh;}.editor-section {border-right: none;border-bottom: 1px solid var(--border-color);}}</style>
</head>
<body><div class="container"><div class="sidebar"><div class="sidebar-header"><div class="sidebar-title">MD Editor</div><i class="fas fa-cog"></i></div><div class="theme-selector"><h3>選擇主題</h3><div class="theme-options"><div class="theme-option default-theme active" data-theme="default"></div><div class="theme-option dark-theme" data-theme="dark"></div><div class="theme-option solarized-theme" data-theme="solarized"></div><div class="theme-option monokai-theme" data-theme="monokai"></div><div class="theme-option dracula-theme" data-theme="dracula"></div><div class="theme-option github-theme" data-theme="github"></div></div></div><div class="shortcuts"><h3>Markdown 快捷參考</h3><ul style="margin-top: 10px; padding-left: 20px;"><li><code># 標題</code></li><li><code>**粗體**</code></li><li><code>*斜體*</code></li><li><code>`代碼`</code></li><li><code>- 列表項</code></li><li><code>[鏈接](URL)</code></li><li><code>![圖片](URL)</code></li></ul></div></div><div class="main-content"><div class="toolbar"><div class="toolbar-title"><i class="fas fa-file-alt"></i> 未命名文檔.md</div><div class="toolbar-actions"><button id="export-html"><i class="fas fa-file-export"></i> 導出HTML</button><button id="download-md"><i class="fas fa-download"></i> 下載MD</button></div></div><div class="editor-container"><div class="editor-section"><div class="section-title"><i class="fas fa-edit"></i> 編輯</div><textarea id="markdown-editor" placeholder="在此輸入Markdown文本..."># Markdown 編輯器這是一個**多功能**的Markdown編輯器，支持*實時預覽*和多種主題。## 功能特性- 實時預覽
- 多種主題選擇
- 代碼高亮
- 響應式設計
- 導出功能### 代碼示例```javascript
function helloWorld() {console.log("Hello, Markdown Editor!");
}

表格示例

功能	支持
標題	?
列表	?
代碼塊	?
表格	?

提示：左側邊欄可以切換主題

            <div class="preview-section"><div class="section-title"><i class="fas fa-eye"></i> 預覽</div><div id="markdown-preview"></div></div></div><div class="status-bar"><div class="status-info">行: 1, 列: 1</div><div class="status-mode">Markdown</div></div></div>
</div><script>// 初始化 marked 和 highlight.jsmarked.setOptions({breaks: true,highlight: function(code, lang) {if (hljs.getLanguage(lang)) {return hljs.highlight(lang, code).value;}return hljs.highlightAuto(code).value;}});// 獲取DOM元素const editor = document.getElementById('markdown-editor');const preview = document.getElementById('markdown-preview');const themeOptions = document.querySelectorAll('.theme-option');const exportHtmlBtn = document.getElementById('export-html');const downloadMdBtn = document.getElementById('download-md');// 初始渲染function updatePreview() {preview.innerHTML = marked.parse(editor.value);}// 實時更新預覽editor.addEventListener('input', updatePreview);// 初始化預覽updatePreview();// 主題切換themeOptions.forEach(option => {option.addEventListener('click', function() {// 移除所有active類themeOptions.forEach(opt => opt.classList.remove('active'));// 添加active類到當前選項this.classList.add('active');// 根據選擇的主題更新CSS變量const theme = this.dataset.theme;changeTheme(theme);});});// 主題配置function changeTheme(theme) {const root = document.documentElement;switch(theme) {case 'dark':root.style.setProperty('--primary-color', '#34495e');root.style.setProperty('--secondary-color', '#2c3e50');root.style.setProperty('--background-color', '#1a1a1a');root.style.setProperty('--text-color', '#ecf0f1');root.style.setProperty('--sidebar-color', '#2c3e50');root.style.setProperty('--sidebar-text', '#ecf0f1');root.style.setProperty('--editor-bg', '#2c3e50');root.style.setProperty('--preview-bg', '#34495e');root.style.setProperty('--border-color', '#444');break;case 'solarized':root.style.setProperty('--primary-color', '#268bd2');root.style.setProperty('--secondary-color', '#073642');root.style.setProperty('--background-color', '#fdf6e3');root.style.setProperty('--text-color', '#586e75');root.style.setProperty('--sidebar-color', '#073642');root.style.setProperty('--sidebar-text', '#93a1a1');root.style.setProperty('--editor-bg', '#eee8d5');root.style.setProperty('--preview-bg', '#fdf6e3');root.style.setProperty('--border-color', '#93a1a1');break;case 'monokai':root.style.setProperty('--primary-color', '#a6e22e');root.style.setProperty('--secondary-color', '#272822');root.style.setProperty('--background-color', '#272822');root.style.setProperty('--text-color', '#f8f8f2');root.style.setProperty('--sidebar-color', '#272822');root.style.setProperty('--sidebar-text', '#f8f8f2');root.style.setProperty('--editor-bg', '#272822');root.style.setProperty('--preview-bg', '#272822');root.style.setProperty('--border-color', '#49483e');break;case 'dracula':root.style.setProperty('--primary-color', '#bd93f9');root.style.setProperty('--secondary-color', '#282a36');root.style.setProperty('--background-color', '#282a36');root.style.setProperty('--text-color', '#f8f8f2');root.style.setProperty('--sidebar-color', '#44475a');root.style.setProperty('--sidebar-text', '#f8f8f2');root.style.setProperty('--editor-bg', '#282a36');root.style.setProperty('--preview-bg', '#282a36');root.style.setProperty('--border-color', '#6272a4');break;case 'github':root.style.setProperty('--primary-color', '#24292e');root.style.setProperty('--secondary-color', '#f6f8fa');root.style.setProperty('--background-color', '#ffffff');root.style.setProperty('--text-color', '#24292e');root.style.setProperty('--sidebar-color', '#24292e');root.style.setProperty('--sidebar-text', '#f6f8fa');root.style.setProperty('--editor-bg', '#ffffff');root.style.setProperty('--preview-bg', '#f6f8fa');root.style.setProperty('--border-color', '#e1e4e8');break;default: // default themeroot.style.setProperty('--primary-color', '#3498db');root.style.setProperty('--secondary-color', '#2980b9');root.style.setProperty('--background-color', '#f9f9f9');root.style.setProperty('--text-color', '#333');root.style.setProperty('--sidebar-color', '#2c3e50');root.style.setProperty('--sidebar-text', '#ecf0f1');root.style.setProperty('--editor-bg', '#ffffff');root.style.setProperty('--preview-bg', '#ffffff');root.style.setProperty('--border-color', '#ddd');}}// 導出HTMLexportHtmlBtn.addEventListener('click', function() {const htmlContent = `

Markdown導出 ${marked.parse(editor.value)} `;

        const blob = new Blob([htmlContent], { type: 'text/html' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'markdown-export.html';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);});// 下載MarkdowndownloadMdBtn.addEventListener('click', function() {const blob = new Blob([editor.value], { type: 'text/markdown' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'markdown-document.md';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);});// 更新光標位置editor.addEventListener('keyup', updateCursorPosition);editor.addEventListener('click', updateCursorPosition);function updateCursorPosition() {const cursorPos = editor.selectionStart;const text = editor.value.substr(0, cursorPos);const lines = text.split('\n');const line = lines.length;const column = lines[lines.length - 1].length + 1;document.querySelector('.status-info').textContent = `行: ${line}, 列: ${column}`;}// 初始化光標位置updateCursorPosition();
</script>

```