原文首发链接: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的更多相关文章

  1. HTML第二部分表单及使用Photoshop快速制作网页

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  2. 怎么使用dreamweaver制作网页教程 dw建站设计网页

    对于网页制作相关专业人士一定对dreamweaver有所认识,下面小编就问大家总结一下相关网页制作的一些步骤,喜欢的朋友可以一起来学习一下   Dreamweaver这一款专业的网页制作软件,相信相关 ...

  3. 如何使用Python快速制作可视化报表----pyecharts

    如何使用Python快速制作可视化报表   数据可视化能力已经越来越成为各岗位的基础技能.领英的数据报告显示,数据可视化技能在2017年中国最热门技能中排名第一. 就数据分析而言,可视化探索几乎是你正 ...

  4. h5快速制作工具-企业级. 非个人无水印

    Epub360 Epub是团队引入的专业级H5应用开发工具,能够快速制作出高质量的H5运营交互页面,具有动画控制.交互设定.社交应用和数据应用的特点,其制作过程就类似于制作一个PPT,比较容易上手. ...

  5. Photoshop将普通照片快速制作二次元漫画风格效果

    今天为大家分享Photoshop将普通照片快速制作二次元漫画风格效果,教程很不错,对于喜欢漫画的朋友可以参考本文,希望能对大家有所帮助! 一提到日本动画电影,大家第一印象肯定是宫崎骏,但是日本除了宫崎 ...

  6. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  7. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  8. 【公开课】《奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱》文字记录与反馈

        本期分享的内容: <奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱> 时间:2016年11月02日 课程主讲人:叶锡文 从事商业智能行业,有丰富的实施经验,擅长 ...

  9. 10月26日 奥威Power-BI基于微软示例库(MSOLAP)快速制作管理驾驶舱 腾讯课堂开课啦

    本次课是基于olap数据源的案例实操课,以微软olap示例库Adventure Works为数据基础.        AdventureWorks示例数据库为一家虚拟公司的数据,公司背景为大型跨国生产 ...

随机推荐

  1. 【.net 深呼吸】细说CodeDom(6):方法参数

    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  4. Dapper where Id in的解决方案

    简单记一下,一会出去有点事情~ 我们一般写sql都是==>update NoteInfo set NDataStatus=@NDataStatus where NId in (@NIds) Da ...

  5. dagger2系列之Scope

    Dagger的Scope注解代表的是作用域,通过实现自定义@Scope注解,标记当前生成对象的使用范围,标识一个类型的注射器只实例化一次,在同一个作用域内,只会生成一个实例, 然后在此作用域内共用一个 ...

  6. Python(九) Python 操作 MySQL 之 pysql 与 SQLAchemy

    本文针对 Python 操作 MySQL 主要使用的两种方式讲解: 原生模块 pymsql ORM框架 SQLAchemy 本章内容: pymsql 执行 sql 增\删\改\查 语句 pymsql ...

  7. 火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版

    火星坐标 火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图.导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的.火星坐标的真实名称应该是GCJ- ...

  8. PHP设计模式(八)桥接模式(Bridge For PHP)

    一.概述 桥接模式:将两个原本不相关的类结合在一起,然后利用两个类中的方法和属性,输出一份新的结果. 二.案例 1.模拟毛笔(转) 需求:现在需要准备三种粗细(大中小),并且有五种颜色的比 如果使用蜡 ...

  9. Prometheus 系统监控方案 一

    最近一直在折腾时序类型的数据库,经过一段时间项目应用,觉得十分不错.而Prometheus又是刚刚推出不久的开源方案,中文资料较少,所以打算写一系列应用的实践过程分享一下. Prometheus 是什 ...

  10. OpenGL shader 中关于顶点坐标值的思考

    今天工作中需要做一个事情: 在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示. 思路很简单,在vertex shader内知道顶点坐标,进行计 ...