幻灯片测试
幻灯片测试
幻灯片测试
—— by MZMTab
测试 reveal.js 在博客园渲染的效果，暂时可能还有 bug。
推荐的人多了可以考虑写一下教程。
按键前请点一下幻灯片
按 ? 键查看键盘帮助（别忘了 shift）
按 F 全屏查看，按箭头键导航
按esc查看大纲
当然也可以一路空格到底
一级标题测试
二级标题测试
三级标题测试
四级标题测试
五级标题测试
六级标题测试（真的有人用吗）
静态图片测试： PNG：
JPG：
ICO：
GIF：
SVG：
APNG：
行内公式测试：\(1+1=2,\int _{-\infty} ^ {\infty} e^{-x^2} dx=\sqrt \pi\)。
多行公式测试：
\[\begin{align*}
\sum _{l=1} ^n \sum _{r=l} ^n f(l,r) &= \sum _{l=1} ^ n \sum _{r=l} ^ n \sum _{d=1} ^ {\max \{ a_l,a_{l+1},\cdots,a_{r} \} } \mu (d) \prod _{i=l} ^ r \left \lfloor \frac{a_i}{d} \right \rfloor \\
&= \sum _{d=1} ^ V \mu(d) \sum _{l=1} ^n \sum _{r=l} ^n \prod _{i=l} ^r \left \lfloor \frac{a_i}{d} \right \rfloor\\
\end{align*}
\]
斜体字测试
加粗测试
斜加粗测试
删除线测试
竖直分页测试 &自定义 CSS 测试。
↓↓↓
这是一个竖直分页哦。
→→→
Viz.js 渲染测试
digraph LNFA5{
rankdir=LR;
node[shape=circle];
subgraph cluster_R1 {
label="R1的NFA";
style=dotted;
ql1;
qr1[shape=doublecircle];
ql1 -> qr1 [style="dashed"];
}
subgraph cluster_R2 {
label="R2的NFA";
style=dotted;
ql2;
qr2[shape=doublecircle];
ql2 -> qr2 [style="dashed"];
}
q0 [color=red];
qt [shape=doublecircle];
q0 -> ql1 [label="ε"];
q0 -> ql2 [label="ε"];
qr1 -> qt [label="ε"];
qr2 -> qt [label="ε"];
}
无序列表测试
- 一、
- 二、
- 三、
- 1、
- 2、
- a、
- b、
- 四
甲乙丙丁，开中药铺
还有这个。
Fragment 测试
第二个出现的，
第一个出现的，
第三个出现的。
行内代码测试：print('Hello,World')。
多行代码测试：
#include <iostream>
int main(){
std::cout<<"Hello,World!"<<std::endl;
return 0;
}
折叠框测试 & CSS 测试：
你知道吗？
这里面什么都没有！
Some Other Thing。
都幻灯片了，折叠框感觉没什么用。
一些奇奇怪怪的测试：
作者虚假的 rating：
作者真实的 rating：
应该就只有这么多了吧。感觉其它的也用不上。
The End!
本页相关的 CSS；
.info {
border-color: #3498db;
background: rgba(52, 152, 219, 0.2);
}
.epigraph {
width: 40%;
margin-left: 60%;
}
details {
margin-top: 1em;
margin-bottom: 1em;
padding: 0.5em;
border-left-style: solid;
border-left-width: 5px;
}
.arrow-hint {
display: block;
text-align: center;
color: #aaa;
font-size: 1.2em;
animation: bounce 1.5s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
源码：
未加处理、直接可以在 VSCode Markdown Preview Enhanced 查看的源码
<!-- slide -->
# 幻灯片测试
<div class="epigraph">
<p>—— by MZMTab</p>
</div>
测试 reveal.js 在博客园渲染的效果，暂时可能还有 bug。
推荐的人多了可以考虑写一下教程。
__按键前请点一下幻灯片__
_按 ? 键查看键盘帮助（别忘了 shift）_
_按 F 全屏查看，按箭头键导航_
_按esc查看大纲_
___当然也可以一路空格到底___
<!-- slide -->
# 一级标题测试
## 二级标题测试
### 三级标题测试
#### 四级标题测试
##### 五级标题测试
###### 六级标题测试（真的有人用吗）
<!-- slide -->
静态图片测试： PNG：
JPG：
ICO：
GIF：
SVG：
<!-- slide -->
APNG：
<!-- slide -->
行内公式测试：$1+1=2,\int _{-\infty} ^ {\infty} e^{-x^2} dx=\sqrt \pi$。
多行公式测试：
$$
\begin{align*}
\sum _{l=1} ^n \sum _{r=l} ^n f(l,r) &= \sum _{l=1} ^ n \sum _{r=l} ^ n \sum _{d=1} ^ {\max \{ a_l,a_{l+1},\cdots,a_{r} \} } \mu (d) \prod _{i=l} ^ r \left \lfloor \frac{a_i}{d} \right \rfloor \\
&= \sum _{d=1} ^ V \mu(d) \sum _{l=1} ^n \sum _{r=l} ^n \prod _{i=l} ^r \left \lfloor \frac{a_i}{d} \right \rfloor\\
\end{align*}
$$
<!-- slide -->
[链接测试](https://www.cnblogs.com/MZMTab/p/19968493)
_斜体字测试_
**加粗测试**
___斜加粗测试___
~~删除线测试~~
<!-- slide -->
竖直分页测试 &自定义 CSS 测试。
<span class="arrow-hint">↓↓↓</span>
<!-- slide vertical=true -->
这是一个竖直分页哦。
<span class="arrow-hint">→→→</span>
<!-- slide -->
Viz.js 渲染测试
<div>
```dot
digraph LNFA5{
rankdir=LR;
node[shape=circle];
subgraph cluster_R1 {
label="R1的NFA";
style=dotted;
ql1;
qr1[shape=doublecircle];
ql1 -> qr1 [style="dashed"];
}
subgraph cluster_R2 {
label="R2的NFA";
style=dotted;
ql2;
qr2[shape=doublecircle];
ql2 -> qr2 [style="dashed"];
}
q0 [color=red];
qt [shape=doublecircle];
q0 -> ql1 [label="ε"];
q0 -> ql2 [label="ε"];
qr1 -> qt [label="ε"];
qr2 -> qt [label="ε"];
}
```
</div>
<!-- slide -->
无序列表测试
- 一、
- 二、
- 三、
- 1、
- 2、
- a、
- b、
- 四
~~甲乙丙丁，开中药铺~~
<!-- slide -->
<span class="fragment" data-fragment-index="4">
还有这个。
</span>
Fragment 测试
<span class="fragment" data-fragment-index="2">
第二个出现的，
</span>
<span class="fragment" data-fragment-index="1">
第一个出现的，
</span>
<span class="fragment" data-fragment-index="3">
第三个出现的。
</span>
<!-- slide -->
行内代码测试：`print('Hello,World')`。
多行代码测试：
<div>
```cpp
#include <iostream>
int main(){
std::cout<<"Hello,World!"<<std::endl;
return 0;
}
```
</div>
<!-- slide -->
折叠框测试 & CSS 测试：
<details class="info">
<summary>你知道吗？</summary>
这里面什么都没有！
</details>
Some Other Thing。
都幻灯片了，折叠框感觉没什么用。
<!-- slide -->
一些奇奇怪怪的测试：
作者虚假的 rating：[](https://atcoder.jp/users/MZMTab)
作者真实的 rating：[](https://codeforces.com/profile/MZMTab)
<!-- slide -->
应该就只有这么多了吧。感觉其它的也用不上。
<!-- slide -->
__The End!__
导出的脚本：
oup= []
with open("TRY-origin.md","r",encoding="UTF-8") as fin:
inp= fin.readlines()
f=False
for i in inp:
if(i=="<!-- slide -->\n"):
if f:
oup.append("\n</section></section><section><section>\n")
else:
oup.append("<section><section>\n")
f=True
elif(i=="<!-- slide vertical=true -->\n"):
oup.append("\n</section><section>\n")
else:
oup.append(i)
with open("out.md","w",encoding="UTF-8") as fout:
fout.write("<div class=\"reveal_to_show\" style=\"width: 100%; aspect-ratio: 16/9; border: 1px solid #eee;\"><div class=\"slides\">\n")
for i in oup:
fout.write(i)
fout.write("\n</section></section></div></div>")
已知 Bug，但不想修复：六级标题渲染有些奇怪，但真的有人用六级标题吗？
UPD：修引用格式时顺带修复了。
浙公网安备 33010602011771号