markdown语法转换成html渲染到页面

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>
    
    <link rel="stylesheet" href="./index.css" />
  head>
  <body>
    
    <%- content %>
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

建立markdown模版文件，README.md(随便写了点内容)

### 命名路由，编程式跳转

```js
const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "A",
    component: () => import("../A.vue"),
  },
  {
    path: "/B",
    name: "B",
    component: () => import("../B.vue"),
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

### 处理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();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

相关阅读:
力扣第463题岛屿的周长 C++ 深度优先搜索 + 思维判断的边界
iframe 跨域通信和不跨域通信
最小栈与栈的压入、弹出序列
一文了解io包中的discard类型
二叉搜索树之：【中序遍历一棵二叉搜索树】【给一棵有固定形态的二叉搜索树填值】【用BST中序遍历的性质填值】【之前讲过层序遍历】
深度学习——GRU单元
Java&C++题解与拓展——leetcode1608.特殊数组的特征值【么的新知识】
基于springboot实现校园志愿者管理系统项目【项目源码+论文说明】
springboot docker
python实现对简单的运算型验证码的识别【不使用OpenCV】

原文地址：https://blog.csdn.net/weixin_39755186/article/details/138081858