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联系删除