slides库reveal.js简介

简介

reveal.js是一个功能强大的在线演示文稿库。尝试它的主要原因有:

  • 文稿内容可以使用html标签或者markdown,可以使用任何编辑器
  • 支持浏览器直接打开
  • 支持使用node作为服务提供在线分享
  • 支持通过chrome的打印成pdf文档

编辑

编写文稿比较方便,直接下载release版本的包,或者clone工程目录即可。
其中release版本可以在https://github.com/hakimel/reveal.js/releases
页面中选择最新版本下载即可。

基本的功能使用非常简单,可以直接编辑代码中的index.html文件,按照里面的格式编辑即可。
html文件中的section的标签对应slides的一页,其中按照标准的html标签编写。例如官方示例的第一页:

<section>
    <h1>Reveal.js</h1>
    <h3>The HTML Presentation Framework</h3>
    <p>
        <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
    </p>
</section>

当然,对我来说,reveal.js最方便的地方在于可以直接在源码中使用markdown语法。markdown使用详细介绍文档
使用时需要将markdown代码放在script标签中,并将type设置为text/template

<section data-markdown>
    <script type="text/template">
        ## Markdown support

        Write content using inline or external Markdown.
        Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
    </script>
</section>

这样就可以容易的将markdown文档和slides结合起来了。

演示和分享

slides最大的作用当然是演示了,使用reveal.js标准结构的slides演示最方便的方式,就是直接在浏览器中打开index.html。这样可以方便的在没有网络的情况下,
单机进行演示。如果需要在线分享,需要安装nodejs,然后通过node安装grunt,最后通过npm install安装reveal.js依赖。

npm install
grunt serve

默认启动端口为8000。

最后,一般演讲完之后,还需要分享内容。这时可以通过chrome的打印功能,直接打印成pdf文档。
打印时有两个地方需要特别注意:

  1. 必须在访问的url上增加print-pdf参数。例如原url为/index.html,改成/index.html?print-pdf
  2. 打印页面中“布局”需要设置为“横向”,并且选项中勾选“背景图形”。

然后保存为pdf文件即可。

转载自:https://coolex.info/blog/519.html

时间: 2024-11-05 14:46:28

slides库reveal.js简介的相关文章

reveal.js实现html播放ppt的炫酷效果

演示地址: http://meiyouwumai.github.io/reveal/ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>reveal.js - The HTML Presentation Framework</title> <meta name="description&qu

微信小程序使用第三方库Underscore.js步骤详解_javascript技巧

前言 Underscore.js是一个很精干的库,压缩后只有4KB.Underscore 提供了100多个函数,包括常用的:map.filter.invoke - 当然还有更多专业的辅助函数,如:函数绑定.JavaScript 模板功能.创建快速索引.强类型相等测试等等.弥补了标准库的不足,大大方便了JavaScript的编程. 微信小程序无法直接使用require( 'underscore.js' )进行调用. 微信小程序模块化机制 微信小程序运行环境支持CommoJS模块化,通过module

JavaScript的UI库 Knockout.js 3.2 预览:组件

JavaScript 的 UI 库 Knockout.js 3.2 预览:组件.Knockout 3.2 将会提供开箱即用的新功能,通过创建组件来实现.组件可以一步联结模板和数据(视图模块).更多组件内容介绍请看发行说明.Knockout 3.2 版本将会在这个夏天发布,尽请期待. Knockout 是个JavaScript library,帮助创建丰富的显示和编辑器UI,通过干净的底层数据模型.你可以在任何时候动态更新UI的选择部分.

基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)_javascript技巧

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m

跟我学Nodejs(一)--- Node.js简介及安装开发环境_javascript技巧

学习资料 1.深入浅出Node.js 2.Node.js开发指南 简介(只捡了我觉得重要的)     Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言:     Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑头疼的Javascript兼容性问题     采用单线程.异步IO与事件驱动的设计来实现高并发(异步事件也在一定程度上增加了开发和调试的难度):     Node.js内建一个HTTP服务器,所以对于

Backbone.js系列教程一 - Backbone.js简介

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及.其中一种运用广泛的MVC框架就是Backbone.js. Backbone中的Models(模型).Views(视图)和Controller(控制器) Backbone.js包含以下几个主要功能: 创建模型(以及模型集合): 创建视图: 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系: 在模型中使用观察者模式,一旦模型触

【原创】各种 JSON 解析库的功能简介

这里增加一项无聊的对比图,看客自斟. =================================== [rui_maciel/mjson]Last Update:2013-05-15(最新版本为 mjson-1.5 发布日期为 2012-08-22)description M's JSON parser is a small JSON parser written in ISO C which enables the user to handle information describe

深入解析Backbone.js框架的依赖库Underscore.js的作用_基础知识

backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素.处理元素的基本操作. 注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架. Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象就变为Underscore对象,也可以通过Underscore对象的Value()方法获取原生js对象中的数据.(jquery通过$()方法得到Jquery对象) Undersc

风吟的小型JavaScirpt库 (FY.JS)._javascript技巧

小弟刚学javascript没几天不发出来给各位高手指教看看这个小库哪方面可以做的更好实在是不会进步,于是我发出来求喷来了.这个小玩意我开发的初衷就是给自己使用的不建议大家使用.你要是觉得风吟的代码写得不好请你耐心的照顾一下我这个小菜鸟务必跟我说明白哪里不好应该怎么改.我不是重造轮子我只是想提高自己的水平.希望不吝赐教. 比如此库什么地方还可以更精简的写法节省更多代码 比如此库哪里不兼容或者如何写法更完美.  FY.JS已经在google code 上存放.  项目地址:http://code.