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></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 = `
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>
```
功能特点
- 实时预览:左侧编辑,右侧实时显示渲染结果
- 多种主题:提供6种美观主题可供选择
- 代码高亮:使用highlight.js实现代码语法高亮
- 导出功能:
- 导出为HTML文件(包含完整样式)
- 下载原始Markdown文件
- 响应式设计:适配不同屏幕尺寸
- 用户友好:
- 光标位置显示
- Markdown快捷参考
- 美观的UI设计
使用方法
- 将上述代码保存为HTML文件
- 在浏览器中打开该文件
- 在左侧编辑区输入Markdown文本
- 右侧会自动显示渲染结果
- 通过左侧边栏切换不同主题
- 使用顶部工具栏按钮导出或下载内容
这个编辑器完全基于前端技术实现,无需服务器支持,可以直接在本地使用。
相关文章:
deepseek v3-0324 Markdown 编辑器 HTML
Markdown 编辑器 HTML 以下是一个美观的 Markdown 编辑器 HTML 页面,支持多种主题切换和实时预览功能: <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&q…...
视频设备轨迹回放平台EasyCVR如何搭建公共娱乐场所远程视频监控系统
一、背景介绍 由于KTV、酒吧、足疗店等服务场所人员流动频繁、环境复杂,一直是治安管理的重点区域。为有效打击 “黄赌毒”、打架斗殴、寻衅滋事等违法犯罪的活动,打造安全有序的娱乐消费环境,我国相关部门将加大对这类场所的清查与管控力度…...
网络安全基础知识总结
什么是网络安全 采取必要措施,来防范对网络的攻击,侵入,干扰,破坏和非法使用,以及防范一些意外事故,使得网络处于稳定可靠运行的状态,保障网络数据的完整性、保密性、可用性的能力(CIA)。 举例…...
Python设计模式:克隆模式
1. 什么是克隆模式 克隆模式的核心思想是通过复制一个已有的对象(原型)来创建一个新的对象(克隆)。这种方式可以避免重复的初始化过程,从而提高效率。克隆模式通常涉及以下几个方面: 原型对象:…...
【工具】在 Visual Studio 中使用 Dotfuscator 对“C# 类库(DLL)或应用程序(EXE)”进行混淆
在 Visual Studio 中使用 Dotfuscator 进行混淆 Dotfuscator 是 Visual Studio 自带的混淆工具(Dotfuscator Community Edition,简称 CE)。它可以混淆 C# 类库(DLL)或应用程序(EXE),…...
积分赛——获取环境温度
设计要求 从DS18B20温度传感器上获取环境温度,并将其温度值显示到数码管上(保留两位小数)。 当“S4”定义为发送按键,按键S4按下时,串口向PC端发送当前采集的温度值; 串口发送格式: Temp:26.…...
LogicFlow获取锚点数据的自定义key并添加的连接的Edge边数据中
1、重写 PolylineEdgeModel 类(其它 EdgeModel 都可以) class CustomNetWorkNodeEdge extends PolylineEdge { } class CustomNetWorkNodeEdgeModel extends PolylineEdgeModel {getData() {const data super.getData();//获取开始锚点自定义属性添加到…...
【python中级】解压whl文件内容
【python中级】解压whl文件内容 1.背景2.解压1.背景 【python中级】关于whl文件的说明 https://blog.csdn.net/jn10010537/article/details/146979236 补充以上博客: 在 旧版 setuptools 中(< v58),如果想生成 .whl,必须先pip install 安装 wheel 三方包! pip inst…...
Xilinx系列FPGA实现HDMI2.1视频收发,支持8K@60Hz分辨率,提供2套工程源码和技术支持
目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我已有的4K/8K视频处理解决方案我已有的FPGA图像处理方案 3、详细设计方案设计框图硬件设计架构本HDMI2.1性能参数8K视频输入源Video PHY ControllerHDMI 2.1 Receive…...
如何把网页文章转为pdf保存
fnF12调出右边网页端的控制台 在下面输入代码 1、转CSDN上的文章 (function(){ use strict;var articleBox $("div.article_content");articleBox.removeAttr("style");var head_str ""; var foot_str ""; var olde…...
开源可视化大屏go-view前后端安装
一、后端安装 下载代码 git clone https://gitee.com/MTrun/go-view-serve修改配置 cd go-view-serve/ # 修改application-dev.yml的数据库文件地址 vi ./src/main/resources/application-dev.ymlapplication-dev.yml spring:datasource:driver-class-name: org.sqlite.JDB…...
eventEmitter实现
没有做任何异常处理,简单模拟实现 事件对象的每一个事件都对应一个数组 /*__events {"事件1":[cb1,cb2],"事件2":[cb3,cb4],"事件3":[...],"事件4":[...],};*/class E{__events {};constructor(){}//注册监听回调on(type , callbac…...
自然语言处理|如何用少样本技术提升低资源语言处理?
一、引言 在全球化的背景下,自然语言处理(NLP)技术取得了显著进展,为人们的生活和工作提供了便利。然而,大多数 NLP 研究和应用集中在少数高资源语言上,如英语和中文。据统计,全球存在超过 700…...
系统安全——文件监控-FileMonitor
namespace FileSystemWatcherDemo {public partial class Form1 : Form{ public Form1(){InitializeComponent();UsingFileSystemWatcher();} /// <summary>/// 使用FileSystemWatcher方法/// </summary>void UsingFileSystemWatcher(){//6.2//FileSystemWa…...
07-01-自考数据结构(20331)- 排序-内部排序知识点
内部排序算法是数据结构核心内容,主要包括插入类(直接插入、希尔)、交换类(冒泡、快速)、选择类(简单选择、堆)、归并和基数五大类排序方法。 知识拓扑 知识点介绍 直接插入排序 定义:将每个待排序元素插入到已排序序列的适当位置 算法步骤: 从第二个元素开始遍历…...
Unity:平滑输入(Input.GetAxis)
目录 1.为什么需要Input.GetAxis? 2. Input.GetAxis的基本功能 3. Input.GetAxis的工作原理 4. 常用参数和设置 5. 代码示例:用GetAxis控制角色移动 6. 与Input.GetAxisRaw的区别 7.如何优化GetAxis? 1.为什么需要Input.GetAxis&…...
【AI学习】MCP的简单快速理解
最近,AI界最火热的恐怕就是MCP了。作为一个新的知识点,学习的开始,先摘录一些信息,从发展历程、通俗介绍到具体案例,这样可以快速理解MCP。 MCP发展历程 来自i陆三金 Anthropic 开发者关系负责人 Alex Albert&#…...
单机快速部署开源、免费的分布式任务调度系统——DolphinScheduler
看了DolphinScheduler的介绍,不知道有没有引起你的兴趣,有没有想要上手体验一番呢。本文则主要为大家介绍DolphinScheduler的单机部署方式,方便大家快速体验。 环境准备 需要Java环境,这是一个老生常谈的问题,关于Ja…...
Vue3命名规范指南
在 Vue 3 中,遵循一致的命名规范可以提高代码的可读性和维护性。以下是常见的命名规范和实践建议: 1. 组件命名 PascalCase(大驼峰式) 单文件组件(.vue 文件)和组件引用时推荐使用 PascalCase,便…...
【大模型系列篇】大模型基建工程:基于 FastAPI 自动构建 SSE MCP 服务器
今天我们将使用FastAPI来构建 MCP 服务器,Anthropic 推出的这个MCP 协议,目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。FastAPI 基于 Starlette 和 Uvicorn,采用异步编程模型,可轻松处理高并发请求,尤…...
springcloud configClient获取configServer信息失败导致启动configClient注入失败报错解决
目录 一、问题现象 二、解决方案 三、运行结果 四、代码地址 一、问题现象 springcloud configClient获取configServer信息失败导致启动configClient注入失败 报错堆栈信息 org.springframework.beans.factory.BeanCreationException: Error creating bean with name scop…...
HarmonyOS-ArkUI Rcp模块类关系梳理
前言 本文重点解决的是,按照官网学习路径学习Tcp模块内容时,越看越混乱的问题。仿照官网案例,书写代码时,产生的各种疑惑。比如,类与类之间的关系,各种配置信息究竟有多少,为什么越写越混乱。那…...
26考研——线性表_ 线性表的链式表示_双循环链表(2)
408答疑 文章目录 三、 线性表的链式表示双循环链表单链表与双链表的比较单链表的特点双链表的特点 双链表上基本操作的实现双链表的插入操作双链表的删除操作 双链表的代码实操定义结点创建一个结点带头结点的双链表初始化创建双链表打印双链表查找结点插入结点在指定节点后插…...
大模型如何引爆餐饮与电商行业变革
大模型如何引爆餐饮与电商行业变革? 一、时代背景:大模型重构产业逻辑的底层动力 1. 技术跃迁催生效率革命 2025年,大模型技术迎来"普惠临界点"。李开复在中关村论坛指出,大模型推理成本每年降低10倍,使得…...
基于springboot的考研成绩查询系统(源码+lw+部署文档+讲解),源码可白嫖!
摘要 这些年随着Internet的迅速发展,我们国家和世界都已经进入了互联网大数据时代,计算机网络已经成为了整个社会以及经济发展的巨大动能,考研成绩查询管理事务现在已经成为社会关注的重要内容,因此运用互联网技术来提高考研成绩…...
es自定义ik分词器中文词库实现热更新
基于web地址的方式实现ik分词热更新。 操作系统:win 11 es version:8.6.2 ik version:8.6.2 1、创建web服务,并提供ik查询词库接口 编写分词http url代码,返回自定义分词内容分词词库数据来自业务需求,存…...
OpenStack 卷虚拟机跨租户迁移方案
目标:迁移租户A的卷虚机到租户B 场景:使用卷虚拟机,租户a和b使用相同网络 租户A的操作: 1.记录虚拟机的ip地址,Mac信息, nova interface-list neutron port-show 2.对虚拟机进行关机操作,将…...
添加购物车功能
业务需求: 用户提交三个字段,服务端根据提交的字段判断是菜品还是套餐,根据菜品或者套餐添加购物车表中。 代码实现 RestController Slf4j RequestMapping("/user/shoppingCart") public class ShoppingCartController {Autowired…...
Logo语言的系统监控
Logo语言的系统监控 引言 在信息技术飞速发展的时代,系统监控成为了确保计算机系统和网络平稳运行的重要手段。系统监控不仅可以实时跟踪系统的性能、资源使用情况和安全风险等,还能够在出现问题时及时发出警报,从而避免潜在的故障和损失。…...
Scheme语言的算法
Scheme语言的算法探索 引言 Scheme是一种以表达式为基础的编程语言,属于Lisp家族,因其简洁、灵活的语法而受到广泛关注。Scheme不仅适合教学,还被用于实际应用开发和研究。本文将深入探讨Scheme语言的算法,包括其基本特性、常用…...
