EJS:一款强大的JavaScript模板引擎,它可以帮助我们在HTML中嵌入动态内容。
Marked:一个流行的Markdown解析器和编译器,它可以将Markdown语法转换为HTML标记。
BrowserSync:一个强大的开发工具,它可以帮助您实时预览和同步您的网页更改。当您对Markdown文件进行编辑并将其转换为HTML时,BrowserSync可以自动刷新您的浏览器,使您能够即时查看转换后的结果。
ejs语法
1.<% alert('hello world') %> // 会执行弹框
2.输出经过 HTML 转义的内容
变量如果包含 '<'、'>'、'&'等HTML字符,会被转义成字符实体,像`< > &`
<%=,最好保证里面内容不要有HTML字符
<%= value %>可以是变量
const text = '<p>你好你好</p>' <h2><%= text %></h2>
// 输出 <p>你好你好</p> 插入 <h2> 标签中
3.输出非转义的内容
<%-不会解析HTML标签,也不会将字符转义后输出
const content = '<p>标签</p>'
<h2><%- content %></h2> // 原样输出
// npm i ejs marked browser-sync
const ejs = require('ejs');
const fs = require('fs');
const marked = require('marked');
let browser;
const browserSync = require('browser-sync');
const server = () => {
browser = browserSync.create();
browser.init({
server: {
baseDir: './',
index: 'index.html'
}
})
}
const init = (callback) => {
const md = fs.readFileSync('./README.md', 'utf8');
// 插入
ejs.renderFile('template.ejs', {
content: marked.parse(md), // marked文件转成html
title: 'markdown to html'
}, (err, data) => {
if (err) throw err;
fs.writeFileSync('index.html', data);
// server()
callback && callback()
})
}
fs.watchFile('README.md', (curr, prev) => {
if (curr.mtime !== prev.mtime) {
init(() => {
browser.reload() // 第一次启动服务,第二次不需要在启动,刷新就行
})
}
})
init(() => {
server()
})