如何實現將markdown檔案實時轉換為html文件

weixin_34041003發表於2017-02-21
HTML

  在簡書裡寫文章時，有個預覽模式，左邊用markdown語法寫，右邊能實時預覽到最終效果，今天看到一個實現類似功能的demo，所以準備寫下來留個筆記

利用檔案監視實現自動將markdown檔案轉換為html文件

實現思路：

  1. 利用 fs模組的檔案監視功能fs.watch(filename,listener)監視指定markdown檔案. (可以理解為釋出訂閱模式，每當檔案發生變化，釋出訊息，訂閱者收到訊息）
  2. 當檔案發生變化後，藉助 marked包提供的markdown to html 功能將改變後的md檔案轉換為html格式。
  3. 將得到的html以及讀入的css檔案替換到模板，得到最終要渲染的html.
  4. 最後利用BrowserSync模組實現瀏覽器自動重新整理，即每當改變markdown檔案，瀏覽器中會自動重新整理顯示

程式碼不多:


const fs = require('fs');
const path = require('path');
const marked = require('marked');
const browserSync = require('browser-sync');

//接收需要轉換的檔案路徑
const target = path.join(__dirname, process.argv[2] || 'README.md')
//最終生成的html檔案的位置
const filename = target.replace(path.extname(target), '.html')
//獲取html檔名
const indexpath = path.basename(filename);

//通過browser-sync建立一個檔案伺服器
browserSync({
    notify: false,
    server: path.dirname(target),//網站根目錄
    index: indexpath//預設文件
})

//監視檔案變化，可以理解為當檔案發生變化（需要儲存才能觸發檔案變化)，interval時間間隔後呼叫回撥函式
fs.watchFile(target, { interval: 200 }, (cur, prev) => {
    // console.log(`current:${cur.size} previous:${prev.size}`);
    //判斷檔案的最後修改時間是否改變，減少不必要的轉換
    if (cur.mtime === prev.mtime) {
        return false;
    }
    fs.readFile(target, 'utf8', (err, content) => {
        if (err) {
            throw err;
        }
        let html = marked(content);
        // console.log(html);
        fs.readFile(path.join(__dirname, 'github.css'), 'utf8', (err, css) => {
            html = template.replace('{{{content}}}', html).replace('{{{styles}}}', css);
            // console.log(html);
            fs.writeFile(filename, html, (err) => {
                if (err) {
                    throw err;
                }
                browserSync.reload(indexpath);
                console.log('updated@' + new Date());
            })
        })
    })
})
const template = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown to Html</title>
    <style>{{{styles}}}</style>
</head>
<body>
    <div class='vs'>
    {{{content}}}
    </div>
</body>
</html>`;

執行後每當改變markdown檔案（ctrl+s)，頁面會自動重新整理，和簡書的預覽效果基本差不多
原始碼：https://github.com/Hfimy/markdownTohtml

相關文章