WebSlides.md
这个项目做什么用？
简单来说当然是在线分享PPT（Slides）（手动狗头）。
具体来说就是你可以用任意一个简单的、在线能够运行 Web 代码的 Playground 环境来当做 PPT 制作工具来写你的 PPT，比如 CodePen、JSBin、CodeSandbox、Stackblitz 以及稀土掘金即将推出的一款新的在线编写和分享代码的产品。
所有你需要做的不过是在你的 HTML 文件中引入一个简单的 JS 文件（gzip前300多KB），以及一个 CSS 文件（gzip前100KB)。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.css">
<script src="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.js"></script>
<article id="webslides">
<section>
# 我是第一页
</section>
<section class="bg-trans-dark">
# 我是第二页
</section>
<section class="bg-black-blue">
# 我是第三页
</section>
</article>类似的项目
WebSlides
WebSlides 是一个基于HTML和CSS的在线写PPT的工具，它基于内建的语义化CSS，让你只需要了解基本的前端页面知识，就可以写出好看的PPT。
实际上，这个项目就是基于 WebSlides 本身，在它的基础上增加了一些特性，最主要的是支持了 Markdown 语法，并且（通过扩展）保留了 WebSlides 纯 HTML 写法。
WebSlides 关于支持 Markdown 语法的讨论见这个 issue，但遗憾的是，这个2017年的需求官方并没有响应。WebSlides.md 通过集成 WebSlides 和 marked，加入了 Markdown 语法。
NodePPT
三水清老师的 NodePPT 是迄今为止最好用的 Web 演讲工具之一。如果你使用 NodeJS，你可以安装这个工具，用 Markdown 创作 PPT 并运行 Node 服务来演示 PPT。
NodePPT 也是结合了 WebSlides 和 Markdown，它通过 markdown-it 解析 Markdown、通过 posthtml 处理 HTML 标签。
如果你需要一个专业的，在个人便携电脑上创作和运行 PPT 的工具，那么推荐 NodePPT，如果你希望在已有在线 Playground 平台上快速演示和分享 PPT，那么 WebSlides.md 是更简单的选择。
Slidev
Slidev 是 Anthony Fu 大神主导开发的一个新项目，是为开发者打造的演示文稿工具。Slidev 旨在为开发者提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、更具表现力和吸引力。
与 NodePPT 一样，Slidev 需要 NodeJS 环境进行项目初始化和本地部署。由于是较新的项目，它与 NodePPT 相比，提供更为丰富的主题、组件和扩展能力。项目的代码采用 TypeScript 编写并基于 Vue3 来渲染应用。
声享
声享 原本是最好的制作 Web 演讲的平台，由奇虎360奇舞团开发和运营，可惜因为一些不可抗力，目前已经停止服务。
WebSlides.md 增加了什么？
-
基于 Marked 集成了 Markdown 的能力，但仍然保留了完整的 HTML 的能力；并且支持 Markdown 代码在 HTML 中的缩进，以方便书写和阅读。
-
通过集成 Prism 增加了对代码的支持，并且支持动态加载所有的 Prism 官方主题。
-
通过集成 mermaid 支持流程图。
-
通过集成 KaTex 支持数学公式。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.css">
<script src="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.js"></script>
<article id="webslides" codeTheme="prism-solarized-dark-atom">
<section class="aligncenter">
# 我是一级标题
## 我是二级标题
- 我是列表
<!--html-->
<div>这里面是完整的<strong>HTML</strong>片段</div>
<!--/html-->
</section>
<section class="bg-trans-dark">
# 我是第二页
```js
console.log('我是代码');
```
</section>
<section class="bg-black-blue">
# 我是第三页
$$ a^2 + b^2 = c^2 $$
:@KaTex
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
\f\hat\xi\,e^{2 \pi i \xi x}
\,d\xi
</section>
<section class="bg-black-blue">
# 我是第四页
```mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
```
:@mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</section>
</article>详细用法
可以看 WebSlides 官网 教程，有详细的HTML和CSS说明，所有用法都保留了支持。
详细文档：https://slides.juejin.fun/
致谢
这些项目为 WebSlides.md 提供了底层能力或设计思路参考。