来源：Node.js

工具

将markdown转为html需要三个库：

  • EJS：一款强大的JavaScript模板引擎，可以在HTML中嵌入动态内容
  • Marked：一个流行的Markdown解析器和编译器，可以将Markdown语法转换为HTML标记,提供了丰富的选项和扩展功能，以满足各种转换需求
  • BrowserSync：一个强大的开发工具，可以实时预览和同步网页更改，当对Markdown文件进行编辑并将其转换为HTML时，BrowserSync可以自动刷新浏览器，从而即时查看转换后的结果

EJS语法

纯脚本标签

<% code %>，写任意的js，用于流程控制，无任何输出

1
<% alert('hello world') %> // 执行弹框

输出经HTML转义的内容

<%= value %>，可以是变量

<%= a ? b : c %>，也可以是表达式

<%= a + b %>，变量如果包含<、>、&等HTML字符，会被转义成字符实体，因此最好保证里面内容不要有HTML

1
2
const text = '<p>野兽先辈</p>'
<h2><%= text %></h2> 	// <h2>&lt;p&gt;野兽先辈&lt;/p&gt;</h2>

输出非转义的内容（原始内容）

<%- 富文本数据 %>，通常用于输出富文本，即HTML内容，它不会解析HTML标签，也不会将字符转义后输出

1
2
const content = '<p>标签</p>'
<h2><%- content %></h2>		// <h2><p>标签</p></h2>

引入其他模板

<%- include('***文件路径') %>，将相对于模板路径中的模板片段包含进来

用<%- include指令而不是<% include，为的是避免输出的HTML代码被转义

1
2
3
4
5
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

条件判断

1
2
3
4
5
6
7
8
9
<% if (condition1) { %>
  ... 
<% } %>

<% if (condition1) { %>
  ... 
<% } else if (condition2) { %>
  ... 
<% } %>
1
2
3
4
5
6
7
<% if (a && b) { %>
  <p>可以直接放html内容</p>
<% } %>

<% if (a && b) { %>
  <% console.log('也可以嵌套任意ejs模版语句') %>
<% } %>

循环

1
2
3
<% for(var i = 0; i < target.length; i++){ %>
  <%= i %> <%= target[i] %>
<% } %>
1
2
3
4
5
6
7
<% for(var i in jsArr) { %>
  <script type="text/javascript" src="<%= jsArr[i] %>" ref="preload"></script>
<% } %>

<% for(var css of cssArr) { %>
  <link rel="stylesheet" href="<%= css %>" />
<% } %>

Marked

将md转换为html，只需要一行代码

1
2
3
const marked = require('marked')

marked.parse(readme.toString())

BrowserSync

开启一个服务热更新运行html文件，需要设置根目录和index.html文件

1
2
3
4
5
6
7
8
9
10
11
const browserSync = require('browser-sync')
const openBrowser =  () => {
    const browser = browserSync.create()
    browser.init({
        server: {
            baseDir: './',
            index: 'index.html',
        }
    })
    return browser
}

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const ejs = require('ejs')
const fs = require('node:fs')
const marked = require('marked')
const browserSync = require('browser-sync')

let browser

// 创建服务
const server = ()=> {
  browser = browserSync.create()
  browser.init({
    server: {
      baseDir: './',
      index: 'index.html'
    }
  })
}

const init = (callback) => {
  // 读取md的内容
  const md = fs.readFileSync('./README.md', 'utf-8')

  // 将md转换成html
  const html = marked.parse(md.toString())

  // 将html渲染成ejs
  ejs.renderFile('template.ejs', {
    content: html,
    title: 'md to html',
  }, (err, result) => {
    if (err) {
      console.log(err)
    } else {
      fs.writeFileSync('./index.html', result)
      callback && callback()
    }
  })
}

// 监视md的变化
fs.watchFile('README.md', (curr, prev)=> {
  if(curr.mtime !== prev.mtime) {
    init(()=> browser.reload())
  }
})

init(()=> {
  server()
})

效果，当修改md的内容后，页面能呈现变化