GitHub 标星 54K + 2K！这才是程序员写逼格满满的 PPT 的正确姿势！
大家好，我是你们的 猫哥，一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~
前言
猫哥是一个常年混迹在 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/reveal-md
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 种方式。
基本使用
下载最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
解压缩并将 index.html 中的示例内容替换为您自己的内容
在浏览器中打开 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 样式 和 主题.
使用
幻灯片的内容需要包含在 的标签中。
一个 p 是一页幻灯片。当 p 包含在 p 中时，是一个纵向的幻灯片。
怎么理解呢？可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。
For example:
Single Horizontal Slide
Vertical Slide 1
Vertical Slide 2
html 实现
标题和正文
p 中的内容就是幻灯片的内容，你可以使用 h2 标签标示 title，p 表示内容。需要红色的字体可以直接设置 style 的 color 为 red。
当某一页需要特殊背景色，可以使用 data-background 在 p 上设置, data-background-transition 表示背景的过渡效果。
For example:
如果需要正文一段一段出现。可以使用 fragment。
For Example:
代码
reveal.js 使用 highlight.js 来支持代码高亮。可以直接写 code 标签来实现, data-trim 表示去除多余的空格。
For Example:
console.log('hello reveal.js!');
注释
在演说时，会用到注释，对于注释，可以通过 来实现。
For Example:
这里是注释。
在幻灯片页面，按下 s 键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。
markdown 实现
reveal.js 不仅支持 html 表示来实现内容， 还可以通过 markdown 来实现内容。使用 markdown 实现内容时，需要对 p 标示添加 data-markdown 属性，然后将 markdown 内容写到一个 text/template 脚本中。
For Example:
## Page titleA paragraph with some text and a [link](http://hakim.se).
背景色，fragment功能的实现，可以通过注释来实现。For Example:- Item 1 - Item 2
外置 md 文件
reveal.js 可以引用一个外置的 markdown 文件来解析。
For Example:
分页实现
一个 markdown 文件中可以连续包含多个章内容。可以在 p 中 通过属性 data-separator, data-separator-vertical 来划分章节。
For Example:
# 主题1- 主题1-内容1- 主题1-内容2--## 主题1-内容1内容1-细节1--## 主题1-内容2内容1-细节2---# 主题2
注释
对 p 添加 data-separator-notes="^Note:" 属性，就可以指定 Note: 后面的内容为当前幻灯片的注释。
For Example:
# Title
## Sub-titleHere 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/reveal.js
最后
这两个神级项目的功能远远不止这么点，还有多少呢？
看看 Github 上的 README.md 你就知道了，在现在这样一个大前端的时代，有什么是网页不能完成的呢？
好了，看到这里，下次演示 PPT 时，你应该就能在众人面前装逼了 ????
好了啦，【前端GitHub】的第 10 期内容已经讲完了啦~
不知不觉，已经写到第 10 期了呢，已经分享了接近 80 个好的前端项目了呢，往期精文请看下方仓库，点击很危险，请慎入！
[前端GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub
平时如何发现好的开源项目，可以看看这篇文章：如何在 GitHub 上发现优秀开源项目 和 如何使用 GitHub 进行精准搜索的神仙技巧。
觉得有用 ？喜欢就收藏，顺便点个赞吧，你的支持是超级猫最大的鼓励！
可以加超级猫的 wx：CB834301747 ，一起闲聊前端。
微信搜 “前端GitHub”，回复 “电子书” 即可以获得 160 本前端精华书籍哦。
往期精文
11 个超火的前端必备在线工具，终于有时间上班摸鱼了
10 个 GitHub 上超火的 CSS 技巧项目，找到写 CSS 的灵感！
10 个 GitHub 上超火的前端面试项目，打造自己的加薪宝库！
10 个 GitHub 上超火和超好看的管理后台模版，后台管理项目有着落了
11 个超火的大厂前端代码规范，你也能写出诗一样的代码！
恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧
GitHub 上最火的、最值得前端学习的数据结构与算法项目！没有之一
全球最火的 WEB 开发学习路线！没有之一！3 天就在 GitHub 收获了接近 1w 点赞
GitHub 标星1.6W+，程序员不得不知的“潜规则”又火了，早知道就不会秃头了
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！