IT博客汇 | MarkDown to Slide with Remark.js

MarkDown to Slide with Remark.js

the5fire发表于 2017-01-16 23:40:33

Markdown 快速转换为 ppt(online/s5)

[by the5fire 2017-01-16]

演示链接

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是

<div class="left-column">内容</div>
和 
<div class="right-column">内容</div>

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

基本使用

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

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

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

class:center,middle

End

演示链接

[Power by Remark.js]