MarkDown to Slide with Remark.js
MarkDown to Slide with Remark.js
the5fire
发布于 2019-03-01 11:24:56
发布于 2019-03-01 11:24:56
Markdown 快速转换为 ppt(online/s5)
开篇
.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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-01-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录