官网文档： https://slides.com/
GitHub
基础设置
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
controls: true,// 是否在右下角展示控制条
progress: true,// 是否显示演示的进度条
center: true,
hash: true,
math: {
mathjax: 'https://cdn.jsdelivr.net/gh/mathjax/[email protected]/MathJax.js',
config: 'TeX-AMS_HTML-full',
// pass other options into `MathJax.Hub.Config()`
TeX: {
Macros: {
RR: "{
\\bf R}" } }
},
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight,RevealMath ]
});
</script>
全局概览：按ESC（F11或F键进入全屏模式，B暂停继续展示）
跳转连接
<a href="#/2/3">like this</a>.
Markdown
<section data-markdown>
<textarea data-template>
## Slide 1
A paragraph with some text and a [link](http://hakim.se).
---
## Slide 2
---
## Slide 3
</textarea>
</section>
注： \begin{bmatrix}1\newline 2\end{bmatrix} 用\newline实现换行
长段latex无法对齐，可使用
</span>
<span class="r-fit-text">
进行分割，让后用
\qquad
统一调整长度，即可实现对齐。
代码区域
<section>
<pre><code data-trim data-noescape>
import cv2
import numpy as np
from src.dlt import calculate_transformation_matrix
from src.util import *
</code></pre>
</section>
加 script type=“text/template” 展示html
<pre><code>
<script type="text/template">
sealed class Either<out A, out B> {
data class Left<out A>(val a: A) : Either<A, Nothing>()
data class Right<out B>(val b: B) : Either<Nothing, B>()
}
</script>
</code></pre>
笔记区域
<section>
<h2>笔记区域</h2>
<p> You can press s.</p>
<aside class="notes">
一些笔记
</aside>
</section>
展示时隐藏某一张
设置data-visibility=“hidden”
<section data-visibility="hidden">
</section>
自动调整字号
<section>
<p>添加r-fit-text类以自动调整文本大小</p>
<h2 class="r-fit-text">ABCDEFGHIJKLMN TEXT</h2>
<h2 class="r-fit-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ TEXT</h2>
</section>
Html中的List仍起作用
<section>
<h2> List</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
背景
<section>
<section data-background="#dddddd">
</section>
<section data-background=".png">
</section>
<section data-background=".png" data-background-repeat="repeat" data-background-size="100px">
</section>
<section data-background-video=".mp4" data-background-color="#000000">
</section>
<section data-background=".gif">
</section>
</section>
文字变色动画，Highlight
<p> Highlight
<span class="fragment highlight-red">red</span>
<span class="fragment highlight-blue">blue</span>
<span class="fragment highlight-green">green</span>
</p>
淡入淡出动画
<section>
<section>
<h2>Fragment Styles</h2>
<p>There's different types of fragments, like:</p>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p>
<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
<span style="display: inline-block;" class="fragment fade-up">up, </span>
<span style="display: inline-block;" class="fragment fade-down">down, </span>
<span style="display: inline-block;" class="fragment fade-left">left</span>
</p>
<p class="fragment fade-in-then-out">fade-in-then-out</p>
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
</section>
</section>
事件绑定
<section data-state="customevent"></section>
Reveal.on( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
也能添加自己定义的事件，比如时间的显示：
setInterval(function(){
document.getElementById("currentTime").innerHTML=new Date().toLocaleString(); },1000);
document.onkeydown =cdk;
function cdk(){
if(event.keyCode ==13){
alert('你按下了Enter');
}
}
看板娘
<style>#live2dcanvas {
border: 0 !important;}</style>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
"display": {
"superSample": 2,
"width": 200,
"height": 400,
"position": "right",
"hOffset": 0,
"vOffset": 0
}
});
</script>