1.创建目录 mdTohtml，并进入
终端输入：mkdir mdTohtml && cd mdTohtml2.初始化项目,并修改为 ES 模块
终端输入：yarn init -y
package.json 添加属性 type:"module"3. 安装依赖
终端输入：yarn add marked browser-sync4. 创建 app.js 文件
终端输入：echo > app.js5. 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联系删除
