娱乐公司网站模板品牌画册设计

张

张建站

2026/4/19 8:50:23

10分钟阅读

娱乐公司网站模板,品牌画册设计,小程序找不到怎么办,海淀区seo搜索引擎开发一个基于 Node.js 和 mermaid.js 的 Web 服务器程序#xff0c;实现在线编辑 Markdown 文档并支持 mermaid.js 流程图渲染的功能。我会为你搭建一个完整、可直接运行的服务端程序#xff0c;包含核心的 Web 服务、Markdown 解析和 Mermaid 渲染能力。实现思路使用 Expr…开发一个基于 Node.js 和 mermaid.js 的 Web 服务器程序实现在线编辑 Markdown 文档并支持 mermaid.js 流程图渲染的功能。我会为你搭建一个完整、可直接运行的服务端程序包含核心的 Web 服务、Markdown 解析和 Mermaid 渲染能力。实现思路使用Express作为基础 Web 框架搭建服务器使用marked解析 Markdown 内容并配置 Mermaid 扩展使用mermaid实现流程图的渲染提供一个简洁的前端编辑界面支持实时预览实现基本的文件保存/加载功能本地文件存储完整实现代码1. 项目初始化与依赖安装首先创建项目并安装所需依赖创建项目目录mkdir md-edit-appcd md-edit-app初始化 npm 项目npm init -y安装核心依赖npm install express4 marked12npm install cors body-parser fs-extra ejs我用的 node.js 版本: 18.20 , 搭配的版本是npm install express4.18.3 marked12.0.2npm install cors2.8.5 body-parser1.20.2 fs-extra11.2.0 ejs3.1.92. 服务器主程序 (app.js)constexpressrequire(express);constmarkedrequire(marked);// 移除 const mermaid require(mermaid);constcorsrequire(cors);constbodyParserrequire(body-parser);constfsrequire(fs-extra);constpathrequire(path);// 初始化 Express 应用constappexpress();// 移除 mermaid 初始化代码 ↓// mermaid.initialize({// startOnLoad: false,// theme: default,// securityLevel: loose // 允许更多的渲染选项// });// 配置 Marked 解析器添加 Mermaid 支持constrenderernewmarked.Renderer();// 重写代码块渲染逻辑识别 mermaid 代码块renderer.code(code,language){if(languagemermaid){// 为 Mermaid 代码块生成容器仅保留代码渲染交给前端returndiv classmermaid${code}/div;}// 其他代码块使用默认渲染returnprecode classlanguage-${language}${code}/code/pre;};// 配置 markedmarked.setOptions({renderer:renderer,highlight:true,breaks:true,gfm:true// 启用 GitHub 风格的 Markdown});// 中间件配置app.use(cors());app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:true}));app.use(express.static(path.join(__dirname,public)));// 设置模板引擎app.set(view engine,ejs);app.set(views,path.join(__dirname,views));// 确保保存文件的目录存在constDOCS_DIRpath.join(__dirname,docs);fs.ensureDirSync(DOCS_DIR);// 路由配置// 首页 - 编辑器界面app.get(/,(req,res){res.render(editor,{title:Markdown 在线编辑器 (支持Mermaid)});});// 解析 Markdown 为 HTML (API)app.post(/api/parse,(req,res){try{const{markdown}req.body;if(!markdown){returnres.status(400).json({error:Markdown 内容不能为空});}// 解析 Markdown 为 HTMLconsthtmlmarked.parse(markdown);res.json({html});}catch(error){res.status(500).json({error:解析 Markdown 失败: error.message});}});// 保存文档 (API)app.post(/api/save,(req,res){try{const{filename,content}req.body;if(!filename||!content){returnres.status(400).json({error:文件名和内容不能为空});}// 拼接文件路径constfilePathpath.join(DOCS_DIR,${filename}.md);// 写入文件fs.writeFileSync(filePath,content,utf8);res.json({success:true,message:文件保存成功,filePath});}catch(error){res.status(500).json({error:保存文件失败: error.message});}});// 加载文档 (API)app.get(/api/load/:filename,(req,res){try{const{filename}req.params;constfilePathpath.join(DOCS_DIR,${filename}.md);// 检查文件是否存在if(!fs.existsSync(filePath)){returnres.status(404).json({error:文件不存在});}// 读取文件内容constcontentfs.readFileSync(filePath,utf8);res.json({success:true,content});}catch(error){res.status(500).json({error:加载文件失败: error.message});}});// 获取文档列表 (API)app.get(/api/docs,(req,res){try{// 读取目录下所有 .md 文件constfilesfs.readdirSync(DOCS_DIR).filter(filepath.extname(file).md).map(file({name:path.basename(file,.md),path:file}));res.json({success:true,docs:files});}catch(error){res.status(500).json({error:获取文档列表失败: error.message});}});// 启动服务器constPORT8000;app.listen(PORT,(){console.log(服务器运行在: http://localhost:${PORT});console.log(文档保存目录:${DOCS_DIR});});3. 前端编辑器页面 (views/editor.ejs)!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title% title %/titlescriptsrchttps://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js/scriptstyle*{box-sizing:border-box;margin:0;padding:0;}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;flex-direction:column;height:100vh;}.header{background:#2c3e50;color:white;padding:1rem;text-align:center;}.container{display:flex;flex:1;overflow:hidden;}.editor-container, .preview-container{flex:1;padding:1rem;overflow:hidden;border:1px solid #ddd;}textarea{width:100%;height:100%;padding:1rem;font-family:Consolas,Monaco,monospace;font-size:14px;border:none;outline:none;resize:none;}.preview{width:100%;height:100%;overflow-y:auto;padding:1rem;background:#f9f9f9;}.controls{padding:1rem;background:#f1f1f1;display:flex;gap:1rem;}button{padding:0.5rem 1rem;background:#3498db;color:white;border:none;border-radius:4px;cursor:pointer;}button:hover{background:#2980b9;}.file-input{padding:0.5rem;}pre{background:#f4f4f4;padding:1rem;border-radius:4px;overflow-x:auto;}code{font-family:Consolas,Monaco,monospace;}/style/headbodydivclassheaderh1Markdown 在线编辑器 (支持 Mermaid 流程图)/h1/divdivclasscontrolsinputtypetextidfilenameplaceholder输入文件名(无需.md)valuedemobuttonidsaveBtn保存文档/buttonbuttonidloadBtn加载文档/buttonbuttonidrefreshBtn刷新预览/button/divdivclasscontainerdivclasseditor-containertextareaideditorplaceholder请输入 Markdown 内容...## Markdown 编辑器 (支持 Mermaid) ### 功能说明 - 支持标准 Markdown 语法 - 支持 Mermaid 流程图渲染 - 支持文档保存/加载 ### Mermaid 示例 mermaid graph TD A[开始] -- B{选择操作} B --|编辑| C[Markdown 编辑] B --|预览| D[实时预览] C -- E[保存文档] D -- E E -- F[结束]普通代码示例console.log(Hello, Markdown!);/textarea /div div classpreview-container div idpreview classpreview/div /div运行与使用说明创建目录结构md-edit-app/ ├── app.js // 服务器主程序 ├── views/ // 模板目录 │ └── editor.ejs // 编辑器页面 ├── public/ // 静态资源目录 (空即可) └── docs/ // 文档保存目录 (自动创建)启动服务器nodeapp.js访问编辑器打开浏览器访问http://localhost:8000即可看到 Markdown 编辑器界面功能使用在左侧编辑框输入 Markdown 内容包含 Mermaid 代码块点击「刷新预览」查看右侧渲染效果输入文件名后点击「保存文档」可将内容保存到服务器输入已保存的文件名点击「加载文档」可加载保存的内容总结核心功能该程序基于 Express 搭建 Web 服务器使用 marked 解析 Markdown集成 mermaid.js 实现流程图渲染提供了完整的在线编辑、预览、保存、加载功能。技术栈Node.js Express marked (Markdown解析) mermaid.js (流程图渲染) EJS (模板引擎)。扩展建议可进一步添加用户认证、多人协作、云存储、更多 Markdown 扩展如表格、公式等功能也可优化前端界面使其更美观易用。这个程序开箱即用你可以直接复制代码运行体验完整的 Markdown 在线编辑和 Mermaid 渲染功能。