Example

使用样例

Slide元信息

title & author字段会被解析到主页面Slide列表 config 字段用于配置Slide highlight用于配置Slide中代码块语法高亮主题，未设置为default配色

---
title: MD-slide introduction
author: '@azurity'
config:
    loop: false
highlight-theme: 'https://cdn.bootcss.com/highlight.js/9.15.10/styles/solarized-dark.min.css'
---

图标使用

:fab-github:

背景使用

<slide class="bg-blue"/>

背景图片/背景视频（默认大小为整页）

<slide/>
::image(https://source.unsplash.com/UJbHNoVPZW0/)

or

<slide/>
::video(url)

文字反色模式

默认自动开启全局文字自动反色，无需手动设置

• 手动开启

<slide class="invert"/>

• 手动关闭

<slide class="no-invert"/>

asciinema(命令行视频)

```render(asciinema)
https://asciinema.org/a/28307.cast
```

页面布局

参考Web Slides

container语法

可以通过编辑 container-alias.yaml 来自定义alias

如 ::grid 等效于 :::div{.grid}

:::div{style=width:100px;height:100px .bg-red other-attributes}
:::

演讲者注释

在演讲者模式中可见

note 内容支持markdown语法

:::note
your note here.
:::

对(markdown)元素作设置

something here. {#line .bg-trans-light}

对(markdown)元素字体进行设置

通过编辑 easy-font-alias.yaml 指定自定义字体 alias

testfont{.font-CourierNew}

基于CSS动画效果

幻灯片动画

data-step-count用于配置该页幻灯片整体所有的点击动画记数

<slide/>
{data-step-count=...}

动画

点击动画

.animate-step和data-step用于配合幻灯片动画进行点击动画的配置

data-step 用于声明第几次点击出现该元素，.bounce之类的用于配置使用什么动画效果

something {.animate-step .bounce data-step=1}

循环动画

something {.bounce .infinite .animated}

注音符号

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

标记语法

before ==this is a mark block=={.bg-red} after

上标

 some^superscript^

下标

some~subscript~

插入

++insert something++

删除线

~~delete~~

Tex 语法（公式语法）

$$e^{-i\pi} + 1 = 0$$
$$E = mc^2$$