markdown 转换html
需要用到三个库
- EJS 可以帮助我们在HTML中潜入动态内容
- Marked 一个流行的解析器和编译器，可以将markdown转换成html标记
- BrowserSync 可以实施帮助你同步和更换你的网页修改，当你对markdown文件进行编辑将其转换成html时，browserSync可以自动刷新你的浏览器，使你能够及时查看你转换后的结果
建立ejs模版，template.ejs
入门语法 https://ejs.bootcss.com/#install
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
<!-- index.css 为markdown转html后需要的样式模版 -->
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<!-- % 代表可以动态插入 -->
<%- content %>
</body>
</html>
建立markdown模版文件，README.md(随便写了点内容)
### 命名路由，编程式跳转
```js
const routes: RouteRecordRaw[] = [
{
path: "/",
name: "A",
component: () => import("../A.vue"),
},
{
path: "/B",
name: "B",
component: () => import("../B.vue"),
},
];
### 处理markdown转换成html的逻辑语法，建立index.js文件
```js
const ejs = require("ejs");
// 读取文件
const fs = require("fs");
// 编译为html
const marked = require("marked");
// 创建一个全局变量
let browser;
// 浏览器自动启服务，加载相应页面
const browserSync = require("browser-sync");
const server = () => {
// 创建一个服务
browser = browserSync.create();
// 调用init启动
browser.init({
server: {
// 根目录
baseDir: "./",
index: "index.html", // 渲染index.html页面
},
});
};
// 通过ejs读取文件
const init = (callback) => {
// 读取markdown里的内容
const md = fs.readFileSync("README.md", "utf-8");
// 通过parse方法转换成html
// console.log(marked.parse(md));
// 把转换的markdown语法插入到html中
ejs.renderFile(
"template.ejs", // 使用此模版
{
content: marked.parse(md), // 替换模版里的内容
title: "markdown 转换成 html",
},
(err, data) => {
if (err) throw err;
fs.writeFileSync("index.html", data); // 根目录下创建一个index.html,若是存在，则会替换
// 调用当前服务
callback && callback();
}
);
};
// 监听文件变动，保持实时更新
fs.watchFile("README.md", (curr, prev) => {
console.log("curr", curr);
// 若是md有修改，则时间会是最新的
if (curr.mtime !== prev.mtime) {
init(() => {
browser.reload(); // 当前启动的服务里重新加载，不会再启动第二个服务
});
}
});
// 初始化调用
init(() => {
server();
});
