reveal.js生成演示文稿语法汇总

采用Reveal.js进行文稿演示时，markdown需要添加一些语法条件来多样化显示信息。
此文只是一些使用语法的总结，方便使用时的快速高效。

基本原则

• 一个页面一个section
• section可以嵌套，可以向上、向下滚动

常用语法

<!-- 隐藏页面 -->
<section data-visibility="hidden"></section>
<!-- 未计数 -->
<section data-visibility="uncounted">Slide 3</section>
<section data-auto-animate></section>

背景颜色

正常颜色

<section data-background-color="aquamarine">
  <h2>🍦</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
  <h2>🍰</h2>
</section>

渐变

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  <h2>🐟</h2>
</section>
<section data-background-gradient="radial-gradient(#283b95, #17b2c3)">
  <h2>🐳</h2>
</section>

背景图片

<section data-background-image="http://example.com/image.png">
  <h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png" 
          data-background-size="100px" data-background-repeat="repeat">
  <h2>This background image will be sized to 100px and repeated</h2>
</section>

显示方式

<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>

可选项有：
fade-out：开始可见，淡出，默认这种方式
fade-up：淡入时向上
fade-down：淡入时向下
fade-left：淡入时向左
fade-right：淡入时向右
fade-in-then-out：淡入，然后下一步淡出
current-visible：淡入，然后在下一步淡出
fade-in-then-semi-out：淡入，然后下一步到50%
grow：放大
semi-fade-out：淡出到50%
shrink：缩小
strike：删除线
highlight-red：文本变成红色
highlight-green：文本变成绿色
highlight-blue：文本变成蓝色
highlight-current-red：文本变成红色，下一步恢复
highlight-current-green：文本变成绿色，下一步恢复
highlight-current-blue：文本变成蓝色，下一步恢复

链接

<section>
	<a href="#/grand-finale">Go to the last slide</a>
</section>
<section>
	<h2>Slide 2</h2>
</section>
<section id="grand-finale">
	<h2>The end</h2>
	<a href="#/0">Back to the first</a>
</section>

主题选择

<link rel="stylesheet" href="dist/theme/black.css">

可供选择的主题有：

• black
• white
• league
• beige
• night
• serif
• simple
• solarized
• moon
• dracula
• sky
• blood

layout

class可供选择的有：
r-stack：层叠
r-fit-text：适应窗体
r-stretch：拉伸适应高度
r-frame：窗口放在固定的锚点上

<!-- r-stack -->
<div class="r-stack">
  <img class="fragment" src="https://picsum.photos/450/300" width="450" height="300">
  <img class="fragment" src="https://picsum.photos/300/450" width="300" height="450">
  <img class="fragment" src="https://picsum.photos/400/400" width="400" height="400">
</div>

<!-- r-fit-text -->
<h2 class="r-fit-text">BIG</h2>
<h2 class="r-fit-text">FIT TEXT</h2>
<h2 class="r-fit-text">CAN BE USED FOR MULTIPLE HEADLINES</h2>

<!-- r-stretch -->
<h2>Stretch Example</h2>
<img class="r-stretch" src="/images/slides-symbol-512x512.png">
<p>Image byline</p>

<!-- r-frame -->
<img src="logo.svg" width="200">
<a href="#">
  <img class="r-frame" src="logo.svg" width="200">
</a>

过渡

<section data-transition="zoom">
  <h2>This slide will override the presentation transition and zoom!</h2>
</section>

<section data-transition-speed="fast">
  <h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>

选项：
none：立即切换背景
fade：交叉淡入淡出，背景过渡默认设置
slide：幻灯片过渡默认设置
convex：以以凸角滑动
concave：以凹角滑动
zoom：向上缩放传入的幻灯片，使其从屏幕中心增长

演示尺寸

Reveal.initialize({   
  // The "normal" size of the presentation, aspect ratio will
  // be preserved when the presentation is scaled to fit different
  // resolutions. Can be specified using percentage units.
  width: 960,
  height: 700,

  // Factor of the display size that should remain empty around
  // the content
  margin: 0.04,

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0,
  center: false,
  embedded: false,
});

添加页码

// 显示总页数
Reveal.initialize({ slideNumber: true });
// 显示 当前页数/总页面
Reveal.initialize({ slideNumber: 'c/t' });

演示模式

预览模式

快捷键ESC和O

全屏模式

快捷键F

参考资料

官网地址：https://revealjs.com/