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

前言

相信大家都有过 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 样式 和 主题 .

使用

幻灯片的内容需要包含在 

 
 
 
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
        
Single Horizontal Slide
 
  
  
  
  
        
 
  
  
  
  
            
Vertical Slide 1
 
  
  
  
  
            
Vertical Slide 2
 
  
  
  
  
         
  
  
  
  
    

html 实现

标题和正文

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

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

For example:

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

For Example:

代码

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

For Example:

 
 
 
 
  
  
  
  
 
  
  
  
  
  console.log('hello reveal.js!'); 
  
  
  
  

注释

在演说时，会用到注释，对于注释，可以通过 

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

markdown 实现

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

For Example:

 
 
 
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
        ## Page title 
  
  
  
  
 
  
  
  
  
        A paragraph with some text and a [link](http://hakim.se). 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
背景色，fragment功能的实现，可以通过注释来实现。For Example: 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
     
  
  
  
  
        - Item 1  
  
  
  
  
        - Item 2  
  
  
  
  
     
  
  
  
  
 
 
 
 

外置 md 文件

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

For Example:

 
 
 
 
  
  
  
  
  
  
  
  
         data-separator="^\n\n\n"   
  
  
  
  
         data-separator-vertical="^\n\n"   
  
  
  
  
         data-separator-notes="^Note:"   
  
  
  
  
         data-charset="iso-8859-15"> 
  
  
  
  
 
 
 
 

分页实现

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

For Example:

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
    # 主题1 
  
  
  
  
    - 主题1-内容1 
  
  
  
  
    - 主题1-内容2 
  
  
  
  
    -- 
  
  
  
  
    ## 主题1-内容1 
  
  
  
  
    内容1-细节1 
  
  
  
  
    -- 
  
  
  
  
    ## 主题1-内容2 
  
  
  
  
    内容1-细节2 
  
  
  
  
    --- 
  
  
  
  
    # 主题2 
  
  
  
  
   
  
  
  
  
 
 
 
 

注释

对 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 标星 54K + 2K！这才是程序员写逼格满满的 PPT 的正确姿势！
文章分享：http://www.gawzjz.com/qtweb/news49/196099.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联