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

最新推荐文章于 2025-05-06 16:52:06 发布

孩子气呵呵特

最新推荐文章于 2025-05-06 16:52:06 发布

阅读量1.3k

点赞数 4

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_39755186/article/details/138081858

版权

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