GitHub 标星 54K + 2K!这才是程序员写逼格满满的 PPT 的正确姿势!

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

前言

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

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

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

[[356306]]

reveal-md

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

安装

  1. npm install -g reveal-md 

使用

  1. reveal-md path/demo.md  

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

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

  1. ## 前端GitHub 
  2.  
  3. * 大前端集合 
  4. * GitHub 优秀开源项目推荐 
  5.  
  6. --- 
  7.  
  8. ## 内容 
  9.  
  10. > 专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称。 
  11.  
  12. 涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等! 
  13.  
  14.  
  15. --- 
  16.  
  17. ## 前端资源合集 
  18.  
  19. * 收集、整理、推荐业界高品质前端资源合集 
  20. * 优秀的工具、库、好的教程 
  21. * 了解业界更优秀的代码、工具、业界最新的技术 

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

效果如图:

主题使用

包含的主题有以下几种:

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

比如指定 league 主题使用:

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

效果如图:

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

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

  1. 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 进行查看

完整安装

安装:

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

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

npm 方式安装

  1. npm install reveal.js 
  2. # or 
  3. yarn add reveal.js 

直接导入使用

  1. import Reveal from 'reveal.js'
  2. import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'
  3.  
  4. let deck = new Reveal({ 
  5.    plugins: [ Markdown ] 
  6. }) 
  7. deck.initialize(); 

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

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

使用

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

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

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

For example:

  1. <div class="reveal"
  2.     <div class="slides"
  3.         <section>Single Horizontal Slide</section> 
  4.         <section> 
  5.             <section>Vertical Slide 1</section> 
  6.             <section>Vertical Slide 2</section> 
  7.         </section> 
  8.     </div> 
  9. </div> 

html 实现

标题和正文

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

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

For example:

  1. <section data-background-transition="zoom" data-background="#dddddd"

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

For Example:

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

代码

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

For Example:

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

注释

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

For Example:

  1. <aside class="notes"
  2.   这里是注释。 
  3. </aside> 

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

markdown 实现

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

For Example:

  1. <section data-markdown> 
  2.     <script type="text/template"
  3.         ## Page title 
  4.  
  5.         A paragraph with some text and a [link](http://hakim.se). 
  6.     </script> 
  7. </section> 
  8. 背景色,fragment功能的实现,可以通过注释来实现。For Example: 
  9.  
  10. <section data-markdown> 
  11.     <script type="text/template"
  12.     <!-- .slide: data-background="#ff0000" --> 
  13.         - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> 
  14.         - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> 
  15.     </script> 
  16. </section> 

外置 md 文件

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

For Example:

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

分页实现

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

For Example:

  1. <section data-separator="---" data-separator-vertical="--"  > 
  2.   <script type="text/template"
  3.     # 主题1 
  4.     - 主题1-内容1 
  5.     - 主题1-内容2 
  6.     -- 
  7.     ## 主题1-内容1 
  8.     内容1-细节1 
  9.     -- 
  10.     ## 主题1-内容2 
  11.     内容1-细节2 
  12.     --- 
  13.     # 主题2 
  14.   </script> 
  15. </section> 

注释

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

For Example:

  1. # Title 
  2. ## Sub-title 
  3.  
  4. Here is some content... 
  5.  
  6. Note: 
  7. 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 时,你应该就能在众人面前装逼了 :wink:

 

责任编辑:张燕妮 来源: segmentfault.com
相关推荐

2021-04-26 14:44:44

程序员技能开发者

2021-11-26 05:57:12

开源备份Restic

2024-09-25 08:22:06

2019-01-02 10:49:54

Tomcat内存HotSpot VM

2021-02-28 13:52:46

程序员编码技术

2021-11-05 10:36:19

性能优化实践

2015-07-13 11:32:09

PHP程序员正确姿势

2019-05-16 09:13:31

Github定理开发

2020-12-30 10:35:49

程序员技能开发者

2015-06-29 09:44:55

2020-06-16 11:09:13

程序员技能开发者

2021-04-09 16:25:00

GitHub代码开发者

2018-07-30 11:21:30

华为云

2015-07-28 09:51:14

程序员私单

2017-06-12 16:17:07

2020-06-28 16:28:24

Windows 10WindowsU盘

2020-08-05 07:27:54

SQL优化分类

2020-02-20 10:00:04

GitHubPyTorch开发者

2021-10-21 05:57:33

网盘开源云盘系统

2021-05-21 13:10:17

kill -9微服务Java
点赞
收藏

51CTO技术栈公众号