者：前端小智 来源：大迁世界

.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