Markdown Slide帮助文档

%%.theme:sky%% ## Markdown Slide 介绍 使用`reveal.js`和`Markdown`创建`Slide` === 基本用法:使用[slide][ /slide]标签包裹Markdown代码  === 如果安装了[zxsq_editor](http://addon.discuz.com/?@zxsq_editor.plugin)，可以实时预览幻灯片  === # 幻灯片语法 - 使用Markdown语法，参考[Makrdown快速入门](http://www.appinn.com/markdown/basic.html) - 对幻灯片分页，主题，背景，转场特效等特性定义了一些专用语法 === ## Slide分页 - `reveal.js` 以水平和垂直分页的方式组织Slide，同一话题需要多张Slide时，可以使用垂直分页 - `Markdown`中使用3个空行表示水平分页，2个空行表示垂直分页 - 也可以使用 `空行加===` 表示水平分页, `空行加|||` 表示垂直分页 ```         # Slide 1.1         |||         # Slide 1.2         ===         # Slide 2 ``` === ## 全局属性 标签为 `%% 属性描述 %%`， 非必须，须顶格书写 | 属性 | 作用 | | --- | ---- | | %%.title: Markdown%% | 标题 | | %%.theme: moon%% | 主题，默认为black | | %%.c.配置项: 值%% | 改变reveal.js的[默认配置](https://github.com/hakimel/reveal.js#configuration) | ||| ### 可用主题 - beige - black - blood - league - moon - night - serif - simple - sky - solarized - white ||| ### 常用配置 [点此](https://github.com/hakimel/reveal.js#configuration)浏览全部配置 | 属性 | 作用 | |--- |--- | |%%.c.controls: false%% |是否显示控制按钮 | |%%.c.progress: true%% |是否显示进度条 | |%%.c.slideNumber: true%% |是否显示页数 | |%%.c.transition: zoom%% |none,fade,slide,convex,concave,zoom | |%%.c.transitionSpeed:fast%% |default/fast/slow | ||| ### 幻灯片转场特效 `%%.c.transition:特效%%` 控制全局切换特效，可选: none/fade/slide/convex/concave/zoom 单张幻灯片可以通过 `%s.ts.特效%` 来覆盖全局配置 === ## Slide属性 标签为 `% 属性描述 %`， 须顶格书写 | 属性 | 作用 | | ---- | ---- | | %s.bg.颜色代码% | 设置背景颜色 | | %s.bgi.图片链接% | 设置背景图片 | | %s.bgv.视频链接% |设置背景视频 | | %s.ts.特效代码% | Slide切换特效 | | %s.tss.slow% |Slide切换速度(slow,fast) | | %s.auto.毫秒% | 自动切换到下一张Slide的延时 | ||| ### Slide背景颜色 <!-- .slide: data-background-color="#66CDAA" --> ``` ### Slide背景颜色 %s.bg.#66CDAA% ``` ||| ### Slide背景图片 %s.bgi.https://www.tecbbs.com/data/attachment/album/201710/18/235910i2c22jrcdruujzda.jpg% ``` ### Slide背景图片 %s.bgi.https://www.tecbbs.com/data/attachment/album/201710/18/235910i2c22jrcdruujzda.jpg% ``` ||| ### Slide背景视频 <!-- .slide: data-background-video="https://s.w.org/images/core/4.8/link-boundaries.mp4" --> ``` ### Slide背景视频 %s.bgv.https://s.w.org/images/core/4.8/link-boundaries.mp4% ``` ||| ### Slide切换特效 <!-- .slide: data-transition-speed="slow" --> <!-- .slide: data-transition="zoom" --> ``` ### Slide切换特效 %s.ts.convex% %s.tss.slow% ``` ||| ### Slide自动切换 <!-- .slide: data-autoslide="3000" --> <!-- .slide: data-transition="convex" --> `3s`后将切换到下一张Slide ``` ### Slide自动切换 %s.auto.3000% `3s`后将切换到下一张Slide ``` === ## 元素属性 fragment(碎片,片段)被用来在一个幻灯片中突出显示单独的一个元素。默认的片段样式是开始不可见，然后淡入，可以通过 `@fg.样式@` 来改变片段样式 |属性 |作用 | |--- | --- | |@fg.属性@| 改变样式| |@index.数字@ | 显示顺序 | |@auto.数字@ |n毫秒后自动转到下一个fragment | ||| ### fragment样式 - grow<!-- .element: class="fragment grow" --> - shrink<!-- .element: class="fragment shrink" --> - fade-out<!-- .element: class="fragment fade-out" --> - fade-up(also down, left and right!)<!-- .element: class="fragment fade-up" --> - current-visible(visible only once)<!-- .element: class="fragment current-visible" --> - highlight-current-blue(blue only once)<!-- .element: class="fragment highlight-current-blue" --> **highlight-red**<!-- .element: class="fragment highlight-red" --> __highlight-green__<!-- .element: class="fragment highlight-green" --> __**highlight-blue**__<!-- .element: class="fragment highlight-blue" --> ||| ### 控制显示顺序 - item1 <!-- .element: class="fragment" data-fragment-index="2" --> - item2 <!-- .element: class="fragment" data-fragment-index="3" --> - item3 <!-- .element: class="fragment" data-fragment-index="1" --> ``` # 实际使用时请去掉 @ 后面的空格 - item1 @ index.2@ - item2 @ index.3@ - item3 @ index.1@ ``` ||| ### fragment自动播放 - item1 <!-- .element: class="fragment" data-autoslide="3000" --> - item2 <!-- .element: class="fragment highlight-blue" --> ``` # 实际使用时请去掉 @ 后面的空格 - item1 @ auto.3000@ - item2 @ fg.highlight-blue@ ``` === # 数学公式 - 行内公式 $\vec{a} \cdot \vec{b}=0$ - 跨行公式 $$f(x,y,z) = 3y^2 z \left( 3 + \frac{7x+5}{1 + y^2}\right)$$ === # 演讲者模式 - 以Note: 开头一直到本页结束为演讲者注释 - 快捷键 `s` 进入演讲者模式 ```         Note: 这是演讲者注释 ``` Note: 这是演讲者注释 === # 导出PDF(打印) - 非全屏状态下点击幻灯片下右侧工具条，打开新窗口 - 可打印样式:  - 可打印样式(包含Note):  - 使用chrome浏览器的打印功能，导出到PDF === # 快捷键 `?` 可调出快捷键帮助 | 按键 | 功能 | 按键 |功能 | | --- | --- | ---- | ---- | | F | 全屏 | B, . | Pause | | ? | 快捷键帮助 |ESC, O |概览模式 | |N,空格 | 下一张 | S| 演讲者模式 | |P | 上一张 | END |最后一张 | |方向键| 翻页 | Home| 第一张 | === # Slide内部链接 [跳转到第一张幻灯片](#/1) ``` # Slide内部链接 [跳转到第一张幻灯片](#/1) ``` === # Thanks! 访问[官方网站](http://www.tecbbs.com/forum.php?mod=viewthread&tid=37076)获取更多帮助

4