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文件即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.