markdown转html

95 阅读1分钟

EJS:一款强大的JavaScript模板引擎,它可以帮助我们在HTML中嵌入动态内容。
Marked:一个流行的Markdown解析器和编译器,它可以将Markdown语法转换为HTML标记。
BrowserSync:一个强大的开发工具,它可以帮助您实时预览和同步您的网页更改。当您对Markdown文件进行编辑并将其转换为HTML时,BrowserSync可以自动刷新您的浏览器,使您能够即时查看转换后的结果。

ejs语法
1.<% alert('hello world') %> // 会执行弹框

2.输出经过 HTML 转义的内容
  变量如果包含 '<''>''&'HTML字符,会被转义成字符实体,像`&lt; &gt; &amp;`
  <%=,最好保证里面内容不要有HTML字符
  <%= value %>可以是变量
  const text = '<p>你好你好</p>' <h2><%= text %></h2> 
  // 输出 &lt;p&gt;你好你好&lt;/p&gt; 插入 <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()
})