webslides.md

v0.2.4

Published

2 years ago

Integration of Webslides and Markdown.

Downloads

0High
0Medium
0Low

spritejs

WebSlides.md

集成 WebSlides 和 Markdown。

这个项目做什么用？

简单来说当然是在线分享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 提供了底层能力或设计思路参考。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme