[Node.js] 將 Markdown 轉換成 html

Markdown是一個輕量的標記語言, 主要用於讓人們可以不用 HTML 複雜繁長的語法就能夠標記格式而達到管理文件的目的,目前比較知名的 Blog 或是電子書文件編輯皆採用 Markdown 語法,如: Ghost BlogLogdown BlogGitBook

本篇文章主要是和大家分享,如何利用 NPM 套件於 Node.js 後端直接將資料庫撈出來的 Markdowm 語法轉成 Html 給前端 Web 做呈現

NPM module

轉換的模組 NPM 套件就已經有現成的,所以實作的步驟也很簡單,先將 markdown 模組裝起來,指令如下:

  • sudo npm install markdown

程式實作

程式實作部分首先將模組 require 進來,接著從 product collection 裡將產品的描述資訊給撈出來

利用 toHTML 函數將 encode 成 URL 的 markdown 語法 轉成 HTML 給前端使用md.toHTML(decodeURIComponent(product.description)) ,

var md = require('markdown').markdown;

exports.init = function (req, res, next)  
{
    var workflow = new req.app.utility.workflow(req, res);
    var _id = req.params.id;


    workflow.on('query', function() {
        req.app.db.models.Product.findOne({_id: _id})
        .exec(function(err, product) {
            if (err) return workflow.emit('exception', err);
            if (!product) return workflow.emit('exception', 'missing data');


            product.description=md.toHTML(decodeURIComponent(product.description));
            workflow.outcome.data = product;

            return workflow.emit('render');
        });

    });

前端實作

前端的實作如果沒有套特定的 framework,基本上就是將剛才後端剛才的 posts.description 變數放置上來即可呈現

section#contain  
    .container
      .row
        p.lead
          !{posts.description}  

結果畫面

從資料庫取得的產品描述內容(將 markdown encode to url) 最後轉換完成後給前端呈現後的畫面

Ben Shiue

Having being a full stack engineer. His interests in Node.js, ARM mbed, IoT solutions. Contact us : [email protected]

ALL RIGHTS RESERVED. COPYRIGHT © 2016. Designed and Coded by Makee.io