md 转换为 html,修改 md 实时刷新 html

1.创建目录 mdTohtml,并进入

终端输入:mkdir mdTohtml && cd mdTohtml

2.初始化项目,并修改为 ES 模块

终端输入:yarn init -y
package.json 添加属性 type:"module"

3. 安装依赖

终端输入:yarn add marked browser-sync

4. 创建 app.js 文件

终端输入:echo > app.js

5. app.js 文件内容,导入模块

import fs from 'fs'
import url from 'url'
import path from 'path'
import { marked } from 'marked'
import browserSync from 'browser-sync'

6. app.js 文件内容,获取 md 文件路径、获取 css 初始化文件路径、生成的 html 文件路径

const mdPath = path.resolve('index.md')
const cssPath = path.resolve("init.css")
const htmlPath = mdPath.replace(path.extname(mdPath),'.html')

7. app.js 文件内容,读取 md 文件内容、读取 css 文件内容、生成 html 文件

const createHtml = async ()=>{
  const temp = `
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <!--  更多样式主题可以在 https://cdnjs.com/libraries/highlight.js 网址查找  -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.0/styles/base16/windows-95.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <style>{{style}}</style>
    </head>
    <body>
    {{content}}
    </body>
    </html>
  `
  const mdStr = await fs.promises.readFile(mdPath,'utf-8')
  const htmlStr = marked.parse(mdStr)
  const cssStr = await fs.promises.readFile(cssPath,'utf-8')
  const finalHtmlStr = temp.replace("{{style}}",cssStr).replace("{{content}}",htmlStr)
  fs.promises.writeFile(htmlPath,finalHtmlStr)
}
// 生成 html页面
createHtml()

8. app.js 文件内容,监听 md 文件改变后,重新生成 html 文件

fs.watchFile(mdPath,(cur,pre)=>{
  cur.mtime !== pre.mtime && createHtml()
})

9. app.js 文件内容,监听 html 文件是否变化,变化了就刷新一打开的对应页面

browserSync.init({
  browser: "",
  server: process.cwd(),
  watch: true,
  index: path.basename(htmlPath)
})

10. 启动项目

终端执行:node app.js

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/36434.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
WEBMAN159832981WEBMAN159832981订阅用户
上一篇 2022年5月18日 20:25
下一篇 2022年5月18日

相关推荐

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息