者：前端小智 來源：大遷世界

.md文件是markdown的一種標記語言，和html比較起來，更簡單快捷，主要體現在：標記符的數量和書寫上。

• 標記符的數量：html文檔需要用到數量繁多的標記符，再輔以css來控制樣式和排版，而markdown文檔只需要四個基本的標記符號就能完成同樣的事。
• 標記符的書寫：HTML文檔內容需要同時標記開始和結束這是一個網頁，而markdown文檔則只要在開始位置標記即可# 這是一個md文檔。下面介紹如何實現將.md文件轉換成.html文件。

方式一：使用i5ting_toc插件

需要先安裝npm(安裝node.js后會自帶npm)，然后才能安裝i5ting插件：

npm install i5ting_toc -g

執行命令行生成html文件，在輸入前要進入到對應根目錄下：

i5ting_toc -f **.md

需要注意的是：寫md文檔的特殊符號時記得添加空格。小技巧：如何快速在當前目錄打開cmd?選擇當前目錄，按住shift，然后鼠標右鍵在此處打開命令窗口(在此處打開powerShell窗口)。

方式二：使用gitbook

同樣先需要安裝node，然后運行：

npm i gitbook gitbook-cli -g

生成md文件,這個命令會生成相應的md的文件，然后在相應的文件里寫你的內容即可：

gitbook init

md轉html,生成一個_doc目錄，打開就可以看到你html文件了。

gitbook build

方式三：利用前端代碼

實現原理是采用node.js搭建服務器，讀取md文件轉化為html片斷。瀏覽器發送ajax請求獲取片段后再渲染生成html網頁。

node代碼：

var express = require('express');

var http = require('http');

var fs = require('fs');

var bodyParser = require('body-parser');

var marked = require('marked'); // 將md轉化為html的js包

var app = express();

app.use(express.static('src')); //加載靜態文件

var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.get('/getMdFile',urlencodedParser, function(req, res) {

var data = fs.readFileSync('src/test.md', 'utf-8'); //讀取本地的md文件

res.end(JSON.stringify({

body : marked(data)

}));

} );

//啟動端口監聽

var server = app.listen(8088, function () {

var host = server.address().address;

var port = server.address().port;

console.log("應用實例，訪問地址為 http://%s:%s", host, port)

});

前端html：

<div id="content"> <h1 class="title">md-to-HTML web app</h1> <div id="article"> </div></div><script type="text/JavaScript" src="js/jquery-1.11.3.min.js"></script><script> var article = document.getElementById('article'); $.ajax({ url: "/getMdFile", success: function(result) { console.log('數據獲取成功'); article.innerHTML = JSON.parse(result).body; }, error: function (err) { console.log(err); article.innerHTML = '<p>獲取數據失敗</p>'; } });</script>

家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

1.什么是 ai2html

ai2html 是 Adob?e Illustrator 的開源腳本，可將 Illustrator 文檔轉換為 html 和 css，基于 ai2html 的諸多示例登上了 New York Times。

ai2html由不同的組成部分：

• ai2html-css：支持插入到 html 中的 css，可以將其包含在 Illustrator 文檔中某處的文本塊中，但不要包含在畫板上。
• ai2html-js：支持添加始終插入到 html 部分中的 javascript，可以將其包含在 Illustrator 文檔中某處的文本塊中，但不要包含在畫板上。
• ai2html-html：添加始終插入到 html 部分中的 html，請將其包含在 Illustrator 文檔中某處的文本塊中，但不要包含在畫板上。
• ai2html-text：可以將文本存儲到變量中，并使用基本的 Mustache 或 erb/ejs 表示法將它們插入到文檔中。

目前 ai2html 在 Github 上開源，是一個值得關注的 AI 類前端開源項目。

2.為什么需要 ai2html

很多人會有此疑問，為什么不直接將 Illustrator 文件導出為圖像或 SVG？

圖像和 SVG 中的文本會隨著圖像的縮放而縮放，因此當藝術品縮小時，文本很快就會變得難以辨認，或者在放大時看起來非常大。

通過將文本渲染為 html，可以上下縮放“圖形”同時保持文本在相同的字體大小和行高下可讀，從而適應從手機到巨型桌面顯示器的視口。

可以打開鏈接 http://nyti.ms/1CQdkwq ，然后查看頁面時更改窗口大小，此時將看到圖稿比例變化，但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive

同時，當 Illustrator 保存 SVG 時，每一行文本都會被分解為單獨的 SVG 元素，這使得編輯文本變得非常困難。 通過以 HTML 形式渲染文本，編輯人員可以更輕松地進入 CMS 并進行編輯，而無需費力地瀏覽一堆 SVG 代碼。

當然，ai2html 也有一定的局限性，主要體現在以下幾點：

• 由于在設置文本格式和定位元素時，網頁會將數字四舍五入為整像素，因此圖形的 html 版本將不會與其 Illustrator 版本完全一致。 如果文本塊跨越多行并且在 Illustrator 中具有小數行距，則舍入差異會特別復雜。
• 設置為 valign:bottom 的非常大的文本目前無法正確定位
• ai2html 只關注文本，而可能忽略藝術的成分
• 畫板應該有唯一的名稱。
• 圖形對象中的標簽將渲染為圖像的一部分。 如果希望圖表標簽顯示為 html，則需要取消圖表分組。
• 在區域文本塊中，由于溢出框而隱藏的文本將出現在 html 輸出中。

3.安裝/使用 ai2html

將 ai2html 的 CDN 文件下載保存到電腦，下載地址已經在文末給出。

將 ai2html.js 文件移動到腳本所在的 Illustrator 文件夾中。 例如，在運行 Adobe Illustrator CC 2015 的 Mac 上，路徑為：

/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js

接著按照以下步驟使用 ai2html：

• 創建 Illustrator 作品。例如：將畫板調整為希望以 div 在網頁上顯示的尺寸；確保文檔顏色模式設置為 RGB；保存文檔；使用 Arial 或 Georgia，除非已將自己的字體添加到腳本中的字體數組中。
• 通過選擇以下方式運行腳本：File > Scripts > ai2html
• 轉到包含 Illustrator 文件的文件夾， 里面有一個名為 ai2html-output 的輸出文件夾， 在瀏覽器中打開 html 文件以預覽輸出。

參考資料

http://ai2html.org/

https://github.com/newsdev/ai2html

https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js