Skip to content

Tutorial

Jump to bottom
azurity edited this page Aug 9, 2020 · 2 revisions

Slide 使用教程

快速使用

Markdown 语法标准

CommonMark Spec

支持Latex格式数学公式

Markdown文件 Meta 信息（开头格式）

---
title: <Your Title>
author: '@<Your Name(Please set the name same as your github ID)>'
config:
    aotoslide: false #<numner or boolean>
    changeOnClick: false #<boolean>
    loop: true #<boolean>
    minWheelDelta: 40 #<number> 触发滚动所需的滚轮滚动量
    navigateOnScroll: 40 #<number> 滚动触发翻页所需的滚轮滚动量
    scrollWait: 450 #<number> 再次滚动延时
    slideOffset: 50 #<number> 触发翻页所需的滑动量（触摸）
    showIndex: true #<bollean> 是否显示幻灯片目录
style-config:
    auto-invert: false #文字是否自动反色(相对于背景)
highlight-theme: 'https://cdn.bootcss.com/highlight.js/9.15.10/styles/default.min.css'
---

基本快捷键

  • 方向键：垂直模式上下切换使用上下，一般模式使用方向左右 Page Up: 到上一张幻灯片 Page Fown 、Space: 到下一篇幻灯片 Home: 到第一章幻灯片 End ：到最后一页幻灯片
  • F键：启用PPT全屏
  • ESC：目前保留

扩充语法

Slide 语法

<slide class="..." wrap="..." align="..."/>

class 为本页slide任意class 与HTML类似 wrap 为内容层的任意class，不影响背景 align left | right | center

背景图片与背景视频

<slide/>
::image(image url)
<slide/>
::video(video url)

默认在全剧范围内使用文字与背景反色，如果不希望反色，可以通过添加

<slide class="invert" />  //反色

<slide class="no-invert" />  //不反色

HTML 插入

支持插入HTML标签 可一通过增加冒号数量嵌套，冒号数量增加为外层,需要闭合

:::div{style=width:100px;height:100px ...}
:::

属性语法

在需要设置的元素后添加{...} ，在单行后使用对同一行的元素进行设置，在标签内单行使用的是对整个元素块设置

布局语法

同样支持嵌套，实际上是alias :::grid 实际上是 :::div{.grid}

::::grid 
:::column
:::
::::

Note 演讲者备注

:::note
your notes
:::

动画

属于属性语法，使用step语法时在使用该语法的Slide块内需要一个 {data-step-count=...} 申明该slide 内能点多少下 在每个需要设置的元素或块，的后面使用属性语法

something {.animated} //直接播放（显示）

something with step { .animate-step data-step=1 } //点一次触发播放（显示）

Animate.css

可用动画

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

动画控制

.infinite 控制循环播放

延迟

Class Name Delay Time
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s

速度

Class Name Speed Time
slow 2s
slower 3s
fast 800ms
faster 500ms

快速字体设置

set{.font-...} //改变set的字体

行内语法

//mark 高亮块
... ==mark text=={.bg-red} ...

//ruby 注音符号
{注|zhù}{音|yīn}{符|fú}{号|hào}

//insert 插入性内容 
++insert++

//delete 删除性内容 
~~delete~~

//superScript 上标 （中间不能空格）
^superScript^

//subScript 下标 （中间不能空格）
~subScript~

图标语法

基于font-awesome V5+

:fab-font-awesome:

DSL 渲染语法

```render(<DSL-name>)
DSL code
```

echarts 图表

:::div{style=display:inline-block;width:400px;height:400px}
```render(echarts)
{
    "title": {
        "text": "ECharts 入门示例"
    },
    "legend": { "data":["销量"] },
    "xAxis": {
        "data": ["衬衫","羊毛衫","雪纺衫"]
    }, "yAxis": {},
    "series": [{
        "name": "销量",
        "type": "bar",
        "data": [5, 20, 36]
    }]
}
```
:::

roughViz 手绘风格图表

```render(roughViz)
{
    "type": "Donut",
    "data": {
      "labels": ["JNCO Jeans", "Sweat Pants", "Jorts"],
      "values": [20, 10, 2]
    }
    "roughness": 2
}
```

mermaid 示意图类

可以用于制作有向图、流程图、UML图

```render(mermaid)
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
```

timesheet 时间表

```render(timesheet)
{
    "from": 2002,
    "to": 2008,
    "list": [
        ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
        ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
        ['2003', 'Had very bad luck'],
        ['10/2003', '2006', 'At least had fun', 'dolor'],
        ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
        ['07/2005', '09/2005', 'Bad luck again', 'default'],
        ['10/2005', '2008', 'For a long time nothing happened', 'dolor']
    ]
}
```

state-machine-cat 状态机

```render(smcat)
initial,
doing: entry/ write unit test
       do/ write code
       exit/ ...,
# smcat recognizes initial
# and final states by name
# and renders them appropriately
final;

initial      => "on backlog" : item adds most value;
"on backlog" => doing        : working on it;
doing        => testing      : built & unit tested;
testing      => "on backlog" : test not ok;
testing      => final        : test ok;
```

css-doodle

用于通过一定的的语法绘制图案

```render(css-doodle)
:doodle {
    @grid: 10 / 16em;
}
background-color: tomato;
transform: scale(@rand(.2, .9));
```

颜色参考

/* Backgrounds */
.bg-navy { background-color: #001F3F; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-maroon { background-color: #85144B; }
.bg-white { background-color: #FFFFFF; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-black { background-color: #111111; }
/* Colors */
.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }
/* Border colors 

   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px); border-style: solid); }     
*/
.border--navy { border-color: #001F3F; }
.border--blue { border-color: #0074D9; }
.border--aqua { border-color: #7FDBFF; }
.border--teal { border-color: #39CCCC; }
.border--olive { border-color: #3D9970; }
.border--green { border-color: #2ECC40; }
.border--lime { border-color: #01FF70; }
.border--yellow { border-color: #FFDC00; }
.border--orange { border-color: #FF851B; }
.border--red { border-color: #FF4136; }
.border--fuchsia { border-color: #F012BE; }
.border--purple { border-color: #B10DC9; }
.border--maroon { border-color: #85144B; }
.border--white { border-color: #FFFFFF; }
.border--gray { border-color: #AAAAAA; }
.border--silver { border-color: #DDDDDD; }
.border--black { border-color: #111111; }
Clone this wiki locally