the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


MarkDown to Slide with Remark.js

作者:the5fire | 标签:       | 发布:2017-01-17 7:36 a.m. | 阅读量: 1875, 1270

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]


----EOF-----

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: