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

markdown 转换html

需要用到三个库

  • EJS 可以帮助我们在HTML中潜入动态内容
  • Marked 一个流行的解析器和编译器,可以将markdown转换成html标记
  • BrowserSync 可以实施帮助你同步和更换你的网页修改,当你对markdown文件进行编辑将其转换成html时,browserSync可以自动刷新你的浏览器,使你能够及时查看你转换后的结果
建立ejs模版,template.ejs

入门语法 https://ejs.bootcss.com/#install

html 复制代码
<!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(随便写了点内容)
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();
});
相关推荐
LeQi4 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑5 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia14 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子16 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。17 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia19 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
nc_kai20 分钟前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
Rubin9321 分钟前
浏览器一帧做些什么?
html
来碗疙瘩汤23 分钟前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
满分观察网友z24 分钟前
富文本解析终极指南:从Quill到小程序,我如何用正则摆平所有坑?
前端