当前位置： 首页 > article >正文

AI生成的基于html+marked.js实现的Markdown转html工具，离线使用，可实时预览 [

article 2025/6/8 10:07:19

有一个markdown格式的文档，手头只有notepad++的MarkdownPanel插件可以预览，但是只能预览，不能直接转换为html文件下载，直接复制预览的内效果又不太好，度娘也能找到很多工具，但是都需要在线使用。所以考虑用AI自己生成一个。
要求：可以离线使用，轻量，可以实时预览。
了解到marked.js是一个使用JavaScript实现的markdown解析库，功能比较完善，所以考虑使用html+js来实现markdown文档转换为html功能。
生成结果截图：

以下为生成步骤及最终源码：

1.在deepseek中输入要求：
使用html+marked.js实现Markdown转html功能，要求页面为左右布局，左侧输入markdown文本后右侧可以实时预览，预览效果应与下载的html页面打开后的展示内容一致

2.检查deepseek生成的代码，发现deepseek生成的源码中有两部分不是以源码的形式输出的，输出的是渲染后的结果

发现把示例代码中的引用快'''全部调整成了\'\'\'，源码复制出来时候稍后手动修正

4.新增上传功能，以及调整按钮布局

<!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><script src="marked.min.js"></script><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;line-height: 1.6;color: #333;background-color: #f5f5f5;height: 100vh;display: flex;flex-direction: column;}.header {background-color: #2c3e50;color: white;padding: 15px 20px;text-align: center;}.container {display: flex;flex: 1;overflow: hidden;}.editor-pane, .preview-pane {flex: 1;padding: 20px;overflow-y: auto;height: 100%;}.editor-pane {background-color: #f8f9fa;border-right: 1px solid #ddd;}.preview-pane {background-color: white;}textarea {width: 100%;height: 100%;min-height: 300px;padding: 10px;border: 1px solid #ddd;border-radius: 4px;resize: none;font-family: monospace;font-size: 14px;line-height: 1.5;}.preview-content {height: 100%;overflow-y: auto;padding: 10px;}.toolbar {padding: 10px 20px;background-color: #ecf0f1;border-bottom: 1px solid #ddd;display: flex;justify-content: space-between;}.left-toolbar, .right-toolbar {display: flex;gap: 10px;}button {padding: 8px 15px;background-color: #3498db;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;}button:hover {background-color: #2980b9;}#file-input {display: none;}/* Markdown样式，确保预览和导出一致 */.markdown-body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;line-height: 1.6;color: #333;}.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {margin-top: 24px;margin-bottom: 16px;font-weight: 600;line-height: 1.25;}.markdown-body h1 {padding-bottom: 0.3em;font-size: 2em;border-bottom: 1px solid #eaecef;}.markdown-body h2 {padding-bottom: 0.3em;font-size: 1.5em;border-bottom: 1px solid #eaecef;}.markdown-body p {margin-top: 0;margin-bottom: 16px;}.markdown-body a {color: #0366d6;text-decoration: none;}.markdown-body a:hover {text-decoration: underline;}.markdown-body code {font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;padding: 0.2em 0.4em;margin: 0;font-size: 85%;background-color: rgba(27, 31, 35, 0.05);border-radius: 3px;}.markdown-body pre {background-color: #f6f8fa;border-radius: 3px;padding: 16px;overflow: auto;line-height: 1.45;}.markdown-body pre code {padding: 0;margin: 0;background-color: transparent;border-radius: 0;}.markdown-body blockquote {padding: 0 1em;color: #6a737d;border-left: 0.25em solid #dfe2e5;margin: 0 0 16px 0;}.markdown-body table {border-collapse: collapse;margin: 16px 0;width: 100%;}.markdown-body table th, .markdown-body table td {padding: 6px 13px;border: 1px solid #dfe2e5;}.markdown-body table tr {background-color: #fff;border-top: 1px solid #c6cbd1;}.markdown-body table tr:nth-child(2n) {background-color: #f6f8fa;}.markdown-body img {max-width: 100%;}</style>
</head>
<body><div class="header"><h1>Markdown实时预览工具</h1></div><div class="toolbar"><div class="left-toolbar"><button id="upload-btn">上传Markdown文件</button><input type="file" id="file-input" accept=".md,.markdown"></div><div class="right-toolbar"><button id="download-btn">下载HTML</button></div></div><div class="container"><div class="editor-pane"><textarea id="markdown-input" placeholder="在此输入Markdown文本..."># Markdown 实时预览工具这是一个使用 **marked.js** 实现的Markdown实时预览工具。## 功能特点- 左右分栏布局
- 左侧编辑，右侧实时预览
- 预览效果与导出的HTML一致
- 支持常见的Markdown语法### 代码示例```javascript
function hello() {console.log("Hello, Markdown!");
}
```### 表格示例```
| 语法 | 描述 |
|------|------|
| 标题 | 使用 `#` |
| 列表 | 使用 `-` 或 `*` |
| 链接 | `[text](url)` |
```> 提示：尝试在左侧编辑内容，右侧会实时更新预览效果。</textarea></div><div class="preview-pane"><div id="preview-content" class="preview-content markdown-body"></div></div></div><script>// 获取DOM元素const markdownInput = document.getElementById('markdown-input');const previewContent = document.getElementById('preview-content');const downloadBtn = document.getElementById('download-btn');const uploadBtn = document.getElementById('upload-btn');const fileInput = document.getElementById('file-input');// 配置marked.jsmarked.setOptions({breaks: true,gfm: true,highlight: function(code, lang) {// 这里可以添加代码高亮逻辑，如果需要可以使用highlight.jsreturn code;}});// 初始渲染updatePreview();// 监听输入变化markdownInput.addEventListener('input', updatePreview);// 更新预览函数function updatePreview() {const markdownText = markdownInput.value;previewContent.innerHTML = marked.parse(markdownText);}// 上传文件处理uploadBtn.addEventListener('click', function() {fileInput.click();});fileInput.addEventListener('change', function(e) {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = function(e) {markdownInput.value = e.target.result;updatePreview();};reader.readAsText(file);});// 下载HTML文件downloadBtn.addEventListener('click', function() {const markdownText = markdownInput.value;const htmlContent = marked.parse(markdownText);const htmlTemplate = `<!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><style>body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;line-height: 1.6;color: #333;max-width: 800px;margin: 0 auto;padding: 20px;}h1, h2, h3, h4, h5, h6 {margin-top: 24px;margin-bottom: 16px;font-weight: 600;line-height: 1.25;}h1 {padding-bottom: 0.3em;font-size: 2em;border-bottom: 1px solid #eaecef;}h2 {padding-bottom: 0.3em;font-size: 1.5em;border-bottom: 1px solid #eaecef;}p {margin-top: 0;margin-bottom: 16px;}a {color: #0366d6;text-decoration: none;}a:hover {text-decoration: underline;}code {font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;padding: 0.2em 0.4em;margin: 0;font-size: 85%;background-color: rgba(27, 31, 35, 0.05);border-radius: 3px;}pre {background-color: #f6f8fa;border-radius: 3px;padding: 16px;overflow: auto;line-height: 1.45;}pre code {padding: 0;margin: 0;background-color: transparent;border-radius: 0;}blockquote {padding: 0 1em;color: #6a737d;border-left: 0.25em solid #dfe2e5;margin: 0 0 16px 0;}table {border-collapse: collapse;margin: 16px 0;width: 100%;}table th, table td {padding: 6px 13px;border: 1px solid #dfe2e5;}table tr {background-color: #fff;border-top: 1px solid #c6cbd1;}table tr:nth-child(2n) {background-color: #f6f8fa;}img {max-width: 100%;}</style>
</head>
<body>
${htmlContent}
</body>
</html>`;const blob = new Blob([htmlTemplate], { 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);});</script>
</body>
</html>

相关文章：

AI生成的基于html+marked.js实现的Markdown转html工具，离线使用，可实时预览 [

有一个markdown格式的文档&#xff0c;手头只有notepad的MarkdownPanel插件可以预览&#xff0c;但是只能预览&#xff0c;不能直接转换为html文件下载&#xff0c;直接复制预览的内效果又不太好&#xff0c;度娘也能找到很多工具&#xff0c;但是都需要在线使用。所以考虑用AI…...

编程日记 2025/6/8 10:07:19

机器学习：load_predict_project

本文目录&#xff1a; 一、project目录二、utils里的两个工具包&#xff08;一&#xff09;common.py&#xff08;二&#xff09;log.py 三、src文件夹代码&#xff08;一&#xff09;模型训练&#xff08;train.py&#xff09;&#xff08;二&#xff09;模型预测&#xff08;…...

编程日记 2025/6/8 10:06:12

OkHttp 3.0源码解析：从设计理念到核心实现

本文通过深入分析OkHttp 3.0源码&#xff0c;揭示其高效HTTP客户端的实现奥秘&#xff0c;包含核心设计理念、关键组件解析、完整工作流程及实用技巧。 一、引言&#xff1a;为什么选择OkHttp&#xff1f; 在Android和Java生态中&#xff0c;OkHttp已成为HTTP客户端的标准选择…...

编程日记 2025/6/8 10:05:07

【storage】

文章目录 1、RAM and ROM2、DRAM and SRAM2、Flash Memory&#xff08;闪存&#xff09;4、DDR and SPI NOR Flash5、eMMC6、SPI NOR vs SPI NAND vs eMMC vs SD附录——prototype and demo board附录——U盘、SD卡、TF卡、SSD参考 1、RAM and ROM RAM&#xff08;Random Acce…...

编程日记 2025/6/8 10:04:04

微信小程序带参分享、链接功能

分享链接的功能是右上角点...然后复制链接&#xff0c;可以直接点击 #小程序://**商城/p5XqHti******* 这种链接直接从其他地方跳转到小程序 wx.onCopyUrl(() > {return {query: "shareCode" this.shareCode,}; }); query就是参数&#xff0c;直接在onload里…...

编程日记 2025/6/8 10:02:58

JVM 垃圾回收器 详解

垃圾收集器 SerialSerial Old&#xff1a;单线程回收&#xff0c;适用于单核CPU场景ParNewCMS&#xff1a;暂停时间较短&#xff0c;适用于大型互联网应用中与用户交互的部分Paraller ScavengeParallel Old&#xff1a;吞吐量高&#xff0c;适用于后台进行大量数据操作G1&#…...

编程日记 2025/6/8 10:01:51

FreeRTOS任务之深入篇

目录 1.Tick1.1 Tick的概念1.2 Tick与任务调度1.3 Tick与延时函数 2.任务状态2.1 运行状态 (Running)2.2 就绪状态 (Ready)2.3 阻塞状态 (Blocked)5.4 暂停状态 (Suspended)2.5 特殊状态&#xff1a;删除状态 (Deleted)5.6 任务状态转换2.7 实验 3.Delay函数3.1 两个函数3.2 实…...

编程日记 2025/6/8 10:00:43

Linux 系统、代码与服务器进阶知识深度解析

在数字化时代&#xff0c;Linux 系统凭借其开源、稳定、安全的特性&#xff0c;成为服务器领域和软件开发的核心支柱。除了算法优化技巧&#xff0c;Linux 系统在网络服务、容器化技术、服务器安全等方面也蕴含着丰富的知识和实用技术。接下来&#xff0c;我们将深入探讨这些领…...

编程日记 2025/6/8 9:59:41

人工智能--AI换脸

本文实现了一个简易的人脸交换程序&#xff0c;主要功能包括&#xff1a;1)检查所需的模型文件是否存在&#xff1b;2)使用预训练的Caffe模型检测图像中的人脸&#xff1b;3)将源图像的人脸区域通过泊松融合无缝地替换到目标图像上。程序通过OpenCV的DNN模块加载人脸检测模型&a…...

编程日记 2025/6/8 9:58:38

NLP学习路线图（二十七）：Transformer编码器/解码器

一、Transformer概览&#xff1a;抛弃循环&#xff0c;拥抱注意力 传统RNN及其变体&#xff08;如LSTM、GRU&#xff09;处理序列数据时存在顺序依赖的瓶颈&#xff1a;必须逐个处理序列元素&#xff0c;难以并行计算&#xff0c;且对长程依赖建模能力较弱。Transformer的革命…...

编程日记 2025/6/8 9:57:34

【机器学习】支持向量机实验报告——基于SVM进行分类预测

目录 一、实验题目描述 二、实验步骤 三、Python代码实现基于SVM进行分类预测 四、我的收获 五、我的感受 一、实验题目描述 实验题目&#xff1a;基于SVM进行分类预测 实验要求&#xff1a;通过给定数据&#xff0c;使用支持向量机算法&#xff08;SVM&#xff09;实现分…...

编程日记 2025/6/8 9:56:29

策略模式实战：Spring中动态选择商品处理策略的实现

概念 可以在运行时期动态的选择需要的具体策略类&#xff0c;处理具体的问题 组成元素 策略接口 public interface GoodsStrategy {void handleGoods(); } 具体策略类 Service(Constants.BEAN_GOODS) public class BeanGoodsStrategy implements GoodsStrategy {Override…...

编程日记 2025/6/8 9:55:25

主流信创数据库对向量功能的支持对比

主流信创数据库对向量功能的支持对比 版本支持对比向量索引支持对比距离函数支持对比使用限制对比OceanBase向量数据库GaussDB向量数据库TiDB向量数据库VastBase向量数据库 ⭐️ 本文章引用数据截止于2025年5月31日。 版本支持对比 数据库产品支持向量功能的版本OceanBaseOce…...

编程日记 2025/6/8 9:54:22

Matlab | matlab中的画图工具详解

二维图形到高级三维可视化 **一、基础二维绘图****二、三维可视化****三、图形修饰工具****四、高级功能****五、交互式工具****六、面向对象绘图（推荐）****七、常用技巧****学习资源**在MATLAB中，画图工具（绘图功能）是其核心优势之一，涵盖从基础二维图形到高级三维可视化…...

编程日记 2025/6/8 9:53:12

HA: Wordy靶场

HA: Wordy 来自 <HA: Wordy ~ VulnHub> 1&#xff0c;将两台虚拟机网络连接都改为NAT模式 2&#xff0c;攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.128&#xff0c;靶场IP192.168.23.130 3&#xff0c;对靶机进行端口服务探…...

编程日记 2025/6/8 9:52:08

6.7本日总结

一、英语 复习默写list10list19&#xff0c;07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 本周结束线代第一讲和计组第二章&#xff0c;之后学习计网4.4&#xff0c;学完计网4.4之后开操作系…...

编程日记 2025/6/8 9:50:56

中国移动6周年！

基站超过250万个 网络规模全球最大、质量最优 覆盖全国96%人口 在全国率先实现乡乡双千兆 服务用户超5.7亿 网络上下行均值接入速率均居行业首位 行业应用快速推广&#xff0c;数量超5万个 3CC、RedCap、通感一体、 无线AI改造等技术成熟商用 客户品牌持续升级&#x…...

编程日记 2025/6/8 9:49:54

Svelte 核心语法详解：Vue/React 开发者如何快速上手？

在很多地方早就听到过svelte的大名了&#xff0c;不少工具都有针对svelte的配置插件&#xff0c;比如vite \ unocss \ svelte. 虽然还没使用过&#xff0c;但是发现它的star82.9k数很高哦&#xff0c;学习一下它与众不同的魔法。 这名字有点别扭&#xff0c;好几次都写错。 sve…...

编程日记 2025/6/8 9:48:50

Fullstack 面试复习笔记：HTML / CSS 基础梳理

Fullstack 面试复习笔记&#xff1a;HTML / CSS 基础梳理 之前的笔记&#xff1a; Fullstack 面试复习笔记&#xff1a;操作系统 / 网络 / HTTP / 设计模式梳理Fullstack 面试复习笔记&#xff1a;Java 基础语法 / 核心特性体系化总结Fullstack 面试复习笔记&#xff1a;项目…...

编程日记 2025/6/8 9:46:27

408第一季 - 数据结构 - 树与二叉树II

二叉树的先中后序遍历 理解 那主播&#xff0c;请问你有没有更快的遍历方式呢 有的&#xff0c;兄弟有的 以中序遍历为例啊 找左边有没有东西&#xff0c;左边没东西那它就自由了&#xff0c;就按上面的图举例子 A左边有东西&#xff0c;是B&#xff0c;B左边没东西&#xf…...

编程日记 2025/6/8 9:45:23

打卡第47天

作业&#xff1a;对比不同卷积层热图可视化的结果 核心差异总结 浅层卷积层&#xff08;如第 1-3 层&#xff09; 关注细节&#xff1a;聚焦输入图像的边缘、纹理、颜色块等基础特征&#xff08;例&#xff1a;猫脸的胡须边缘、树叶的脉络&#xff09;。热图特点&#xff1a;区…...

编程日记 2025/6/8 9:43:09

从上下文学习和微调看语言模型的泛化：一项对照研究

大型语言模型表现出令人兴奋的能力&#xff0c;但也可以从微调中表现出令人惊讶的狭窄泛化。例如&#xff0c;他们可能无法概括为简单的关系反转&#xff0c;或者无法根据训练信息进行简单的逻辑推理。这些未能从微调中概括出来的失败可能会阻碍这些模型的实际应用。另一方面&a…...

编程日记 2025/6/8 9:42:07

智慧城市建设方案

第1章 总体说明 1.1 建设背景 1.2 建设目标 1.3 项目建设主要内容 1.4 设计原则 第2章 对项目的理解 2.1 现状分析 2.2 业务需求分析 2.3 功能需求分析 第3章 大数据平台建设方案 3.1 大数据平台总体设计 3.2 大数据平台功能设计 3.3 平台应用 第4章 政策标准保障…...

编程日记 2025/6/8 9:41:06

phosphobot开源程序是控制您的 SO-100 和 SO-101 机器人并训练 VLA AI 机器人开源模型

​一、软件介绍 文末提供程序和源码下载 phosphobot开源程序是控制您的 SO-100 和 SO-101 机器人并训练 VLA AI 机器人开源模型。 二、Overview 概述 &#x1f579;️ Control your robot with the keyboard, a leader arm, a Meta Quest headset or via API &#x1f579;️…...

编程日记 2025/6/8 9:40:02

pygame开发的坦克大战

使用Python和Pygame开发的精美坦克大战游戏。这个游戏包含玩家控制的坦克、敌方坦克、各种障碍物、爆炸效果和完整的游戏机制。 游戏说明 这个坦克大战游戏包含以下功能&#xff1a; 游戏特点 玩家控制&#xff1a;使用方向键移动坦克&#xff0c;空格键射击 敌人AI&#x…...

编程日记 2025/6/8 9:39:01

C++2025.6.7 C++五级考题

城市商业街主干道是一条笔直的道路&#xff0c;商业街里有 n 家店铺&#xff0c;现给定 n 个店铺的位置&#xff0c;请在这条道路上找到一个中心点&#xff0c;使得所有店铺到这个中心点的距离之和最小&#xff0c;并输出这个最小值。 #include <bits/stdc.h> using nam…...

编程日记 2025/6/8 9:37:59

【原神 × 二叉树】角色天赋树、任务分支和圣遗物强化路径的算法秘密！

【原神 二叉树】角色天赋树、任务分支和圣遗物强化路径的算法秘密！ 作者：星之辰 标签：#原神 #二叉树 #天赋树 #任务分支 #圣遗物强化 #算法科普 发布时间：2025年6月 总字数：6000+ 一、引子：提瓦特大陆的“树型奥秘” 你是否曾留意过《原神》角色面板的天赋树？ 升级技能…...

编程日记 2025/6/8 9:35:43

功能安全实战系列09-英飞凌TC3xx LBIST开发详解

本文框架 0. 前言1.What?1.1 基本原理1.1.1 检测范围1.1.2 LBIST与锁步核对比1.1.3 控制寄存器1.2 关联Alarm2. How?2.1 LBIST触发？2.1.1 SSW配置自动触发2.1.2 软件手动触发LBIST2.2 实现策略2.3 测试篇LBIST对启动时间的影响如何确定当前LBIST是否已使能？如何确定当前LBI…...

编程日记 2025/6/8 9:33:30

一个完整的日志收集方案:Elasticsearch + Logstash + Kibana+Filebeat (二)

&#x1f4c4; 本地 Windows 部署 Logstash 连接本地 Elasticsearch 指南 ✅ 目标 在本地 Windows 上安装并运行 Logstash配置 Logstash 将数据发送至本地 Elasticsearch测试数据采集与 ES 存储流程 &#x1f9f0; 前提条件 软件版本要求安装说明Java17Oracle JDK 下载 或 O…...

编程日记 2025/6/8 9:32:29

RT-Thread内核组成——内核移植

内核移植就是指将 RT-Thread 内核在不同的芯片架构、不同的板卡上运行起来&#xff0c;能够具备线程管理和调度&#xff0c;内存管理&#xff0c;线程间同步和通信、定时器管理等功能。移植可分为 CPU 架构移植和 BSP&#xff08;Board support package&#xff0c;板级支持包&…...

编程日记 2025/6/8 9:28:56