A framework for easily creating beautiful presentations using HTML.

Reference:

原生的Reveal.js还是需要将代码写在HTML里，@ksqsf 师弟通过org-reveal 可以将 Org mode 的文本导出成Reveal.js。可惜我不是Emacs党，退而求其次可以使用 reveal-md 将Markdown文本直接导出为Reveal.js。

安装

1
npm install -g reveal-md

在线浏览

直接渲染Markdown文档，这个文档可以是本地的也可以是HTTP协议的，这个操作会打开localhost浏览器浏览渲染效果

1
reveal-md [FILE.md]

直接渲染本地目录下所有的Markdown文档

1
reveal-md [DIR]

默认端口是 1948，可以通过 --port 8888 来修改端口。

Markdown

PPT分页

使用 \n---\n 三个横杠作为分节。 \n----\n 四个横杠作为分页。

主题

默认的PPT主题是 black，可以通过下面的命令改变渲染的主题，可以使用的主题看这里

1
reveal-md slides.md --theme solarized

Reveal.js Theme
默认的高亮主题是 zenburn，可以通过下面命令改变高亮的主题，可以使用的主题看这里

1
reveal-md slides.md --highlight-theme github

使用细节

  • 对于Item，通过以下代码来增加动画效果，

    1
    2
    3
    * Frag 1 <!-- .element: class="fragment" -->
    * Frag 2 <!-- .element: class="fragment" -->
    * Frag 3 <!-- .element: class="fragment" data-fragment-index="3" -->

  • [](#/SECTION/PAGE) 超链接直接指向了第SECTION节第PAGE页的PPT

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    # Deep

    * [Chapter 1](#/1)
    * [Chapter 2a](#/2)
    * [Chapter 2b](#/2/1)

    ---

    ## Chapter 1

    Once upon a time.

    [<](#/)

    ---

    ## Chapter 2a

    Fairy.

    [<](#/)

    ----

    ## Chapter 2b

    Tale.

    [<](#/)

  • 修改背景颜色或者背景图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # slide1

    This slide has no background image.

    ---

    <!-- .slide: data-background="./image1.png" -->

    # slide2

    This one does!

    ---

    ## Colored Slide

    <!-- .slide: data-background="#ff0000" -->

  • 修改PPT间的过场动画，可选的有 none, fade, slide, convex, concave, zoom

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # slide1

    This slide is starter.

    ---

    <!-- .slide: data-transition="concave" -->
    # slide2

    This one has concave transition!

  • 背景可以设置为视频

    1
    2
    3
    # Background Video

    <!-- .slide: data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-background-video-loop -->

自定义的CSS

左侧底角和右侧底角位置定义，通常是首页作者的属性.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
#bottom-left {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: left;
}
#bottom-right {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: right;
	font-size: 30px;
}
</style>

导出

导出成PDF

1
reveal-md slides.md --print slides.pdf

然而导出PDF却背离了使用Reveal.js的目的，所以可以通过以下命令导出成含Reveal.js的静态HTML页面

1
reveal-md slides.md --static _site

有时候--no-sandbox渲染不掉用Chrome内核选项有用。