Cleaver快速制作网页PPT
原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/
写在开始之前
互联网时代,以浏览器作为入口,已经有越来越多的桌面应用被web应用所取代。微软最赚钱的Office办公软件,也正在被免费的web应用所吞噬。如今即便薄学如我就已然知晓reveal.js
impress.js
等各种轮子来制作体验优良的网页PPT。今天就来尝试下这Node.js的轮子Cleaver
来制作网页PPT。
Cleaver基于HTML5,用最短的时间做出超炫幻灯片。你还会坚持PowerPoint吗?
Cleaver介绍
如果你已经有了一个Markdown的文档,30秒就可以制作成幻灯片。Cleaver是为Hacker准备的工具。
Cleaver的官方发布页:http://jdan.github.io/cleaver/;
参考文章:30秒制作幻灯片 Cleaver。
Cleaver安装
系统环境(据悉:cleaver不支持win系统)
Linux: Ubuntu 12.04 LTS 64bit
node: v0.6.12
npm: 1.1.4
通过nodejs安装Cleaver
//局部安装Cleaver
~ mkdir nodejs-cleaver && cd nodejs-cleaver
~ sudo npm install cleaver
//全局安装Cleaver
~ sudo npm install cleaver -g
Cleaver基本使用
执行cleaver命令,解析一个markdown文件,会自动生成HTMl文档,欧耶,算是Pandoc的部分功能深入了;
用cleaver自带的例子:
//如是局部安装,运行下面一句就好
cleaver node_modules/cleaver/examples/basic.md
//如是全局安装,请跑起Like this:
cleaver /usr/local/lib/node_modules/cleaver/examples/basic.md
Cleaver配置选项option
title: Basic Example #HTML的标题名
author: #作者信息,在最后一页显示
name: Jordan Scales
twitter: jdan
url: http://jeffjade.com
output: basic.html
除此之外还有其他额外设置,譬如:
- theme: 皮肤(theme: jdan/cleaver-retro)
- style: css样式表(style: css/main.css)
- output: 生成的HTML文件名(output: basic.html)
- controls: 控制按钮(controls: true)
- progress: 顶部显示进程条(progress: true)
- agenda: 生成一个目录页(progress: false)
- encoding: 文档的字符编码(encoding: utf-8)
- template: 设置每张slide的模板(template: template/slide.mustache)
- layout: 设置HTML模板(template: template/layout.mustache)
Cleaver的正文内容:
Cleaver仅支持Markdown语法的,通过Markdown构建网页内容,Markdown官方网站:http://daringfireball.net/projects/markdown/
需要注意的是,Cleaver以” — “(两个中横线)做为分页的标志,其他语法都遵循Markdown规则。
MS Office PowerPoint 正在被渐行渐远。。。
写在最后
相比于之下,impress.js
, reveal.js
以及Cleaver三者各有特色吧;在唯快不破的理论下,Cleaver自然占据了无与伦比的优势,只是像动画,样式等比于impress是一个短板。并且,在写此文的时候欲以Cleaver来呈现的,不过总是报出下面这样的问题(Mac OS X Yosemite):
!! Cannot read property 'compiled' of undefined
Please report this to https://github.com/chjj/marked.
花了些许时间来探究这个问题,只是现在网络上目测关于这个信息不是很多。逐一对比之下,文章的格式没什么问题。在即将放弃的时候,发现原来是标记代码的时候用了````shell`,所造成的问题,去掉shell或者换成别的标记就没有问题了。额...。
这里是此文的PPT版本(Cleaver);当然,这个是需要在PC偏高些的浏览器上才能正常查看。
原文链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/
Cleaver快速制作网页PPT的更多相关文章
- HTML第二部分表单及使用Photoshop快速制作网页
一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...
- 怎么使用dreamweaver制作网页教程 dw建站设计网页
对于网页制作相关专业人士一定对dreamweaver有所认识,下面小编就问大家总结一下相关网页制作的一些步骤,喜欢的朋友可以一起来学习一下 Dreamweaver这一款专业的网页制作软件,相信相关 ...
- 如何使用Python快速制作可视化报表----pyecharts
如何使用Python快速制作可视化报表 数据可视化能力已经越来越成为各岗位的基础技能.领英的数据报告显示,数据可视化技能在2017年中国最热门技能中排名第一. 就数据分析而言,可视化探索几乎是你正 ...
- h5快速制作工具-企业级. 非个人无水印
Epub360 Epub是团队引入的专业级H5应用开发工具,能够快速制作出高质量的H5运营交互页面,具有动画控制.交互设定.社交应用和数据应用的特点,其制作过程就类似于制作一个PPT,比较容易上手. ...
- Photoshop将普通照片快速制作二次元漫画风格效果
今天为大家分享Photoshop将普通照片快速制作二次元漫画风格效果,教程很不错,对于喜欢漫画的朋友可以参考本文,希望能对大家有所帮助! 一提到日本动画电影,大家第一印象肯定是宫崎骏,但是日本除了宫崎 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
- 【公开课】《奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱》文字记录与反馈
本期分享的内容: <奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱> 时间:2016年11月02日 课程主讲人:叶锡文 从事商业智能行业,有丰富的实施经验,擅长 ...
- 10月26日 奥威Power-BI基于微软示例库(MSOLAP)快速制作管理驾驶舱 腾讯课堂开课啦
本次课是基于olap数据源的案例实操课,以微软olap示例库Adventure Works为数据基础. AdventureWorks示例数据库为一家虚拟公司的数据,公司背景为大型跨国生产 ...
随机推荐
- node服务的监控预警系统架构
需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作.不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定性.高可靠性.鲁棒性以及直观的监控和报警 ...
- 利用CSS中的:after、: before制作的边三角提示框
小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...
- android通过webview调起支付宝app支付
webview在加载网页的时候会默认调起手机自带的浏览器加载网页,用户体验不好.但当用户设置浏览器客户端(setWebViewClient)设置这样的监听事件之后,当请求url的时候就不会打开手机自带 ...
- Java 为值传递而不是引用传递
——reference Java is Pass by Value and Not Pass by Reference 其实这个问题是一个非常初级的问题,相关的概念初学者早已掌握,但是时间长了还是容易 ...
- js学习之类型识别
用来判别类型的方法有好多,整理了一下4种方法,平时用的时候,在不同情景下,还是要结合着使用的. 方法一 typeof:可以识别标准类型,除了Null:不能识别具体的对象类型,除了Function &l ...
- css元素水平居中和垂直居中的方式
关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...
- 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇
最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...
- POJ1743 Musical Theme [后缀数组]
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 27539 Accepted: 9290 De ...
- Vue.js——60分钟组件快速入门(上篇)
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Egret3D研究报告(二)从Unity3D导出场景到Egret3D
Egret3D暂时没有场编的计划,但是我们知道unity3D是一个很好的场编. 有一些游戏即使不是使用Unity3D开发,也使用Unity3D做场编.这里就不点名了,而且并不在少数. 我们就这么干. ...