1. 安装node js
1.1 去官网 https://nodejs.org/zh-cn 下载安装
1.2 验证
node -v
2. 建立项目文件夹
2.1 文件夹 NodeJSWeb
2.2 创建server.js
内容如下
const express = require('express');
const http = require('http');
const fs = require('fs');
const path = require('path');
const app = express();
const PORT = 3000;
// 提供静态文件服务
app.use(express.static('public'));
// 路由:主页
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
// 服务器监听指定端口
app.listen(PORT, () => {
console.log(`服务器正在运行,访问地址为 http://localhost:${PORT}/`);
});
3. 安装模块express
3.1 在当前文件夹下打开cmd
3.2 安装 Express: 使用 npm 安装 Express.js,可以执行以下命令:
npm install express
4. 创建index.html
内容如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/editormd/css/editormd.preview.css" />
<title>公告板</title>
</head>
<body>
<div class="container">
<div class="container main_con">
<div id="view_node">
<div id="test-editormd-view">
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
<script src="/editormd/editormd.min.js"></script>
<script src="/editormd/lib/marked.min.js"></script>
<script src="/editormd/lib/prettify.min.js"></script>
<script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var testEditormdView = undefined
var view_parent = $("#view_node");
function getMdInfo(name){
$.get(name, function(result){
console.log(result);
var view = document.getElementById("test-editormd-view");
if(view)
{
view.remove();
view_parent.append("<div id=\"test-editormd-view\"></div>");
}
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown : result,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 开启 HTML 标签解析,为了安全性,默认不开启
//htmlDecode : "style,script,iframe", // you can filter tags decode
//toc : false,
tocm : true, // Using [TOCM]
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
//gfm : false,
//tocDropdown : true,
//markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
//emoji : true,
//taskList : true,
//tex : true, // 默认不解析
//flowChart : true, // 默认不解析
//sequenceDiagram : true, // 默认不解析
});
});
}
document.addEventListener("DOMContentLoaded", function() {
console.log("ready!");
getMdInfo("/about.md");
});
</script>
</body>
</html>
5. 创建静态文件夹
5.1 创建文件夹public
5.2 public
文件夹下放about.md
和editormd
about.md
是网页内容,md格式editormd
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。- Download:
Github download
6. 运行服务器
node .\server.js
服务器正在运行,访问地址为 http://localhost:3000/