deepseek v3-0324 Markdown 编辑器 HTML

Liudef062025-04-05 22:45

Markdown 编辑器 HTML

以下是一个美观的 Markdown 编辑器 HTML 页面，支持多种主题切换和实时预览功能：

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.js
    marked.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 theme
                root.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');
        }
    }

    // 导出HTML
    exportHtmlBtn.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);
    });

    // 下载Markdown
    downloadMdBtn.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>

```

功能特点

  1. 实时预览：左侧编辑，右侧实时显示渲染结果
  2. 多种主题：提供6种美观主题可供选择
  3. 代码高亮：使用highlight.js实现代码语法高亮
  4. 导出功能 ：
    • 导出为HTML文件（包含完整样式）
    • 下载原始Markdown文件
  5. 响应式设计：适配不同屏幕尺寸
  6. 用户友好 ：
    • 光标位置显示
    • Markdown快捷参考
    • 美观的UI设计

使用方法

  1. 将上述代码保存为HTML文件
  2. 在浏览器中打开该文件
  3. 在左侧编辑区输入Markdown文本
  4. 右侧会自动显示渲染结果
  5. 通过左侧边栏切换不同主题
  6. 使用顶部工具栏按钮导出或下载内容

这个编辑器完全基于前端技术实现，无需服务器支持，可以直接在本地使用。

相关推荐
JeffongTan1 小时前
在LWC中镶嵌VF Page获取用户IP
前端·javascript·salesforce
陆枫Larry3 小时前
Astro 是什么
前端
是立不是利4 小时前
写给设计师的 CSS 博客美学指南
前端·css
默_笙5 小时前
🏝 Docker 就是"房地产开发"：从施工图纸到小区物业的容器化指南
前端·javascript
计算机魔术师5 小时前
Rohan Paul 谈用时间跨度衡量智能体能力，并引用 OpenAI 自动化研究实习生里程碑
前端
kyriewen5 小时前
我手写了个极简版 React Router——才搞懂 v6 为什么砍了这么多 API
前端·javascript·程序员
a1117765 小时前
Shirone 二次元博客主题 开源
前端·开源
IT_陈寒6 小时前
Python的切片赋值把我坑惨了，这不是bug是特性
前端·人工智能·后端
掘金酱6 小时前
【社区公告】致每一位掘友：关于这次调整， 想再说几句
前端·人工智能
CoderLiu6 小时前
程序化工具调用（PTC）与动态工作流引擎：深入大模型工具调用的架构演进与实践
前端·人工智能·后端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03历年考研数学一、数学二、数学三真题试卷及答案PDF04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06ZCode 周末送额度活动开启：3 亿 Token 免费领取07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10VSCode+CodeX扩展，无法启动