46

大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目,在此分享给大家。

公众号:前端GitHub,专注于挖掘 GitHub 上优秀的前端开源项目,收集、整理、推荐业界高品质前端资源合集,优秀的工具、库、好的教程、了解业界更优秀的代码、工具、业界最新的技术,抹平你的前端信息不对称。

平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 10 期精华内容。


相信大家都有过 PPT 分享的经历,超级猫一直觉得用 powerpoint 写幻灯片太麻烦,效率太低了。

作为程序员,特别是前端,有没有更简结与高逼格幻灯片实现方式呢?肯定是有的啊!

今天给大家带来的是使用 Markdown 和 HTML 写逼格满满的 PPT 的正确姿势!

reveal-md

reveal-md 是使用 Markdown 来做 PPT 展示的开源项目,标星 2.1K 。

安装

npm install -g reveal-md

使用

reveal-md path/demo.md

其中,path/demo.md 是你的 Markdown 文件地址,可以使用本地地址,也可以使用 URL。

使用如下的 Markdown 文件 demo.md :

## 前端GitHub

* 大前端集合
* GitHub 优秀开源项目推荐

---

## 内容

> 专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。

涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等!


---

## 前端资源合集

* 收集、整理、推荐业界高品质前端资源合集
* 优秀的工具、库、好的教程
* 了解业界更优秀的代码、工具、业界最新的技术

在终端运行命令:reveal-md ./demo.md

效果如图:

主题使用

包含的主题有以下几种:

  • beige
  • black
  • blood
  • league
  • moon
  • night
  • serif
  • simple
  • sky
  • solarized
  • white

比如指定 league 主题使用:

reveal-md path/demo.md --theme league

效果如图:

还可以指定自己写的主题,也就是自己写的 css 样式,使用自定义主题后,会覆盖默认的主题。

比如自定义文件位于 ./theme/my-custom.css 中时,指定对应的路径即可。

reveal-md slides.md --theme theme/my-custom.css

项目地址:

https://github.com/webpro/rev...

reveal.js

这是一个基于 CSS 的 3D 幻灯片工具,标星 54K。

Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本,并可以加入各种 html 语言支持的交互动画,然后由 Pandoc 直接转化成 PPT。

reveal.js 是一个开放源代码 HTML 表示框架。 它使使用 Web 浏览器的任何人都可以免费创建功能齐全且美观的演示文稿。

该框架具有广泛的功能,包括嵌套幻灯片,Markdown 支持,自动动画,PDF 导出,演讲者注释,LaTeX 支持,语法突出显示的代码等等。

reveal.js 有一下几个特点:

  • 支持标签来区分每一页幻灯片
  • 可以使用 markdown 来写内容
  • 支持 pdf 的导出
  • 支持演说注释
  • 提供 JavaScript API 来控制页面
  • 提供了多个默认主题和切换方式
  • 自适应移动端和 PC 端

使用

使用分为 基本使用、完整安装、npm 方式安装 3 种方式。

基本使用

  1. 下载最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
  2. 解压缩并将 index.html 中的示例内容替换为您自己的内容
  3. 在浏览器中打开 index.html 进行查看

完整安装

安装:

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js && npm install
npm start

打开 http://localhost:8000 查看您的演示文稿。

npm 方式安装

npm install reveal.js
# or
yarn add reveal.js

直接导入使用

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
   plugins: [ Markdown ]
})
deck.initialize();

还需要添加 reveal.js 样式 和 主题.

<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">

使用

幻灯片的内容需要包含在 <div class="reveal"> <div class="slides"> 的标签中。

一个 section 是一页幻灯片。当 section 包含在 section 中时,是一个纵向的幻灯片。

怎么理解呢? 可以这样理解:横向的幻灯片代表一章,纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的,而纵向的幻灯片是上下切换的。

For example:

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

html 实现

标题和正文

section 中的内容就是幻灯片的内容,你可以使用 h2 标签标示 titlep 表示内容。需要红色的字体可以直接设置 stylecolorred

当某一页需要特殊背景色,可以使用 data-backgroundsection 上设置, data-background-transition 表示背景的过渡效果。

For example:

<section data-background-transition="zoom" data-background="#dddddd">

如果需要正文一段一段出现。可以使用 fragment

For Example:

<p class="fragment"></p>

代码

reveal.js 使用 highlight.js 来支持代码高亮。可以直接写 code 标签来实现, data-trim 表示去除多余的空格。

For Example:

<pre><code data-trim>
  console.log('hello reveal.js!');
</code></pre>

注释

在演说时,会用到注释,对于注释,可以通过 <aside class="notes"> 来实现。

For Example:

<aside class="notes">
  这里是注释。
</aside>

在幻灯片页面,按下 s 键,就可以调出注释页面,注释页面包含了当前幻灯片,下一章幻灯片,注释,以及幻灯片播放时间。

markdown 实现

reveal.js 不仅支持 html 表示来实现内容, 还可以通过 markdown 来实现内容。使用 markdown 实现内容时,需要对 section 标示添加 data-markdown 属性,然后将 markdown 内容写到一个 text/template 脚本中。

For Example:

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>
背景色,fragment功能的实现,可以通过注释来实现。For Example:

<section data-markdown>
    <script type="text/template">
    <!-- .slide: data-background="#ff0000" -->
        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
    </script>
</section>

外置 md 文件

reveal.js 可以引用一个外置的 markdown 文件来解析。

For Example:

<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>

分页实现

一个 markdown 文件中可以连续包含多个章内容。可以在 section 中 通过属性 data-separator, data-separator-vertical 来划分章节。

For Example:

<section data-separator="---" data-separator-vertical="--"  >
  <script type="text/template">
    # 主题1
    - 主题1-内容1
    - 主题1-内容2
    --
    ## 主题1-内容1
    内容1-细节1
    --
    ## 主题1-内容2
    内容1-细节2
    ---
    # 主题2
  </script>
</section>

注释

对 section 添加 data-separator-notes="^Note:" 属性,就可以指定 Note: 后面的内容为当前幻灯片的注释。

For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

导出 PDF

  • 在浏览器打开文件的 url 上添加 print-pdf 即可以,比如: http://localhost:8000/demo.html/?print-pdf,你可以测试一下官方的 revealjs.com/demo?print-pdf
  • 打开浏览器的保存为 pdf 的弹框,快捷键为:CTRL/CMD + P
  • 边距设置为 无
  • 勾上背景图形
  • 点击 保存 即可

多主题

reveal.js 提供了多种样式。可以通过引用不同的主题来实现。具体主题查看 reveal.js/css/theme 下的 css 文件。

总结

reveal.js 来实现幻灯片,可以只关注内容,忽略各种切换效果。

而且可以使用 markdown 来实现,大大提高了编写效率。对于最后生成的 html 文件,可以部署到服务器,这样只需要网络就可以进行分享,不需要使用 U 盘拷来拷去了。

https://github.com/hakimel/re...

最后

这两个神级项目的功能远远不止这么点,还有多少呢?

看看 Github 上的 README.md 你就知道了,在现在这样一个大前端的时代,有什么是网页不能完成的呢?

好了,看到这里,下次演示 PPT 时,你应该就能在众人面前装逼了 😉

好了啦,【前端GitHub】的第 10 期内容已经讲完了啦~

不知不觉,已经写到第 10 期了呢,已经分享了接近 80 个好的前端项目了呢,往期精文请看下方仓库,点击很危险,请慎入!

[前端GitHub]:https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目,可以看看这篇文章:如何在 GitHub 上发现优秀开源项目如何使用 GitHub 进行精准搜索的神仙技巧

可以加超级猫的 wx:CB834301747 ,一起闲聊前端。

微信搜 “前端GitHub”,回复 “电子书” 即可以获得 160 本前端精华书籍哦。

往期精文

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!


夜尽天明
13.9k 声望6.5k 粉丝