Markdown 快速转换为 ppt

name: inverse
layout: true
class: center, middle, inverse

---
# Markdown 快速转换为 ppt(online/s5)
[by the5fire 2017-01-16]

[演示链接](https://www.the5fire.com/slide/markdown-to-slide/)

---
layout: false

## 开篇

.left-column[

前段时间一直在看函数式编程，上周总结了下，准备了分享，一开始是熟悉的keynote。

写大纲，ok。

解释概念，ok。

展示代码，写个demo，截图，贴进去，太麻烦，

于是找了下快速把markdown转成slide的工具。

]

.right-column[

之前其实有一个工具叫做reveal.js，之前用过，印象中有点复杂。

于是搜索了下"markdown to slide"，于是找到remark.js，主页就是一个slide，查看下源码发现里面直接是markdown格式的，这简直太好了，意味着我的md文件可以直接放进去。

发现每次写完copy进去太low，又几段代码就搞定了。

]

---

## 定制remark.js

代码用Python写有点简单，想来最近一直在跟js打交道，于是用node来写：

//slide_it.js
    var fs = require('fs');
    var template = require('art-template');

var filename = process.argv[2];
    var tmplFile = 'tmpl';
    template.config('base', __dirname);
    template.config('extname', '.html');

fs.readFile(filename, function (err, data) {
        var content = data.toString();
        var lines = content.split('\n');
        var title = lines[0];
        var content = lines.join('\n');
        var html = template(tmplFile, {title: title, content: content});
        fs.writeFile(filename.replace('.md', '.html'), html);
    });

模板就是页面扒下来的，为了能离线演示把css都内联了，代码不贴了，最后示例链接查看源码吧。

---

## 基本使用

node slide_it.js markdown-to-slide.md  // 会生成markdown-to-slide.html文件

页面也很容易定制，比如前面的两列的处理就是

.left-column[
    左侧内容
    ]
    .right-collumn[
    右侧内容
    ]

对应的html是

这意味着你可以自定义top-column和bottom-colun这样的标签来处理样式.

---

## 基本使用
也可以在模板中设置几个参数配置背景和居中情况：

<textarea id="source">
    name: inverse
    layout: true
    class: left, middle, inverse
    ---
    {{ content }}  // markdown 添加的位置
    </textarea>

需要定制的不多，主要是展示代码比较方便。做日常演示足够了。

---
class:center,middle

# End
[演示链接](https://www.the5fire.com/slide/markdown-to-slide/)

[[Power by Remark.js](https://remarkjs.com/#1)]

---
name: last-page
template: inverse

## THX

.footnote[by [the5fire.com](https://www.the5fire.com)]