Reveal.js：把你的 Markdown 文稿变成 PPT

https://github.com/hakimel/reveal.js

通过 Reveal.js 这个框架， 我们可以把 Markdown 文件转为类似 PPT 的演示文稿，轻快省力，减少排版上的时间，更专于文字内容；同时，也获得 PPT 所不具有的灵活性。

PowerPoint Out!

PPT，全名 PowerPoint，诨名「力量点数」。

在公众的意识里，它已经成为演讲的标准配备（除非你供职于苹果或锤子之类的公司）。如果你需要和同学或同事协作、确保老师或 BOSS 能不假思索地打开你的文稿，PPT 往往是第一选择。虽然制作 PPT 的时候我希望自己很有力量、很 powerful，事实却是我在一遍遍傻乎乎地双击文本框。

PPT 虽强大，但割据了磁盘的大量空间，运行起来的内存占用也不小；尤其在 macOS 上，跑起 PPT 来就像乘上了上世纪的铁皮小火车。随着 macOS 的普及和动画技术的进步，Keynote、Prezi 等新秀陆续挑战 PPT 的权威，它们实现了各种炫目的动画效果，把演示文稿变成了一场特效电影。

Absolutely，这很酷，但更多时候我们需要的只是简单明了的演示。我尝试过许多「轻量化」的演示文稿制作工具，这些或是在线或是本地的应用各具匠心，但本质上只是简化版或变异版的 PPT。它们的根本问题在于过度依赖图形界面，让用户在版面和动画上花了太多精力，而分散了本应花在文字内容上的时间。

当我不需要和别人协作、或只是做一个简单演讲的时候，我希望有一个更轻量、更灵活的工具，让我专于文字内容、快速完成演示文稿，同时在写文章的同时就完成排版。

你一定想到了 Markdown，而我要介绍的工具也利用了 Markdown 的特性，却不止于此。

Reveal.js 概览

Reveal.js 是一个使用 HTML 语言制作演示文稿的 Web 框架，支持插入多种格式的内容，并以类似 PPT 的形式呈现。在英文中，「reveal」有「启示」的意思，我觉得这一释义恰到体现了演示文稿的本质：

化繁为简地、清晰地启发观众，让他们在最短时间内了解演讲的内容。

Reveal.js 支持 Markdown 语法，我们得以直接在 Markdown 编辑器里做 PPT。你用 Markdown 语法所实现的精美、简洁的版式，在 Reveal.js 里仍能沿用。这是我以前修改所得的一个演示效果：

不同于应用商店里那些界面精美的应用，Reveal.js 给你的只是一堆源码文件。所幸实际使用起来出乎意料的简单，实际上，使用 Reveal.js 做演示文稿时，你就是在制作一个网页，基本上你能找到的文本编辑器都可以胜任，不需要依赖特定的应用，而且你也只需要了解两三个 HTML 语法。

Reveal.js 具有许多优势：

  • 制作灵活、不限应用，只需修改 HTML 文件
  • 发布灵活、不限平台，只需打开 HTML 文件
  • 丰富的特性，支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等
  • 极度轻量，占用空间和内存少

试一试

Reveal.js 的源码可以在其 首页 下载到，只有一个不到 2M 的压缩包。建议你多看几遍其官网的演示效果，很流畅简洁，但图文并茂，动画、列表、表格、，该有的一个不少。解压所得文件夹里的 demo.html，就是官网的源码：

一下子几百行代码涌入眼中，让人不免打起退堂鼓。好在里面大多数的代码你都不必理睬，只需关心关系到内容呈现的一小部分。为了方便，我们将拿同一目录下的 index.html 作为模板。用你喜欢的 Markdown 编辑器打开它。

HTML 语法

在开始前，了解 HTML 语法的一点基础会让之后的进程更为顺利。相信初学 Markdown，你最喜欢用的就是那对星号，它们可以将所包含的文字加粗。在 HTML 里，也可以理解为就是这样的标记（正经学 HTML 的话可不能这么想当然）赋予了文字和段落一些属性，只是比 Markdown 更为丰富。

一份完整的 HTML 文件源码，有两部分组成。一对<head> </head>标签里面是一些关于该文档的说明，在使用 Reveal.js 时已经设置好，不需要再做修改；接下来的一对<body> </body>标签之间就是演示的主要内容。

在 index.html 里，你可以看到，一对<body> </body>之间嵌套了一对<div class="reveal"> </div>，后者之间还套了一组<div class="slides"> </div>，大意理解为它们所包含的内容，要用 Reveal.js 的方式来呈现。只有黄框内的，才是我们的编辑对象，看起来代码多，实际改动的很少。

虽然乱糟糟的一堆代码也能用，但最好注意一下行首的缩进（就是按下 Tab 键出来的效果），保证每组标签都靠左对齐，因为它们之间可能嵌套另一组或几组标签，等内容多了你自己都不知道自己在干什么。

也有的标签，所包含内容非常简短，直接在一行内就可以解决，使用这样的形式：<标签名>你的内容</标签名>。无论是那类标签组，前后标签名需一致，后一个标签名之前加上斜杠「/」表示这对标签到此为止。记得有始有终，即使七夕过了，标签也务必成对出现。

分页

Reveal.js 里页面有两种页面类型，横向的一级页面、纵向的子页面。后者务必嵌套在前者里面。所谓的纵横比较好理解，键盘上的左右箭头控制一级页面，上下键移动子页面。

一级页面用以下代码实现：

 <section>用户邮箱为何频收广告</section>

或者简单一些，把它们写在一行内：

 <section>通知中心为何深夜惨叫</section>

把任意一串代码嵌套进之前黄框所示位置，就能实现一个页面。

而子页面则像俄罗斯套娃一样：

 <section><section>这是付费教程的升级</section><section>还是下一个圈钱手段</section></section>

组合着使用它们，可以实现两级子母页面的效果：

PPT 最基本的样子就有了。多数的线性演讲，用方向键按顺序切换页面，这样的结构已经足够；如果你讲得很跳跃、随性，需要临场发挥、让演示文稿随你而动，也许 Prezi 更适合你（和 Reveal.js 类似的 impress.js 也可以实现）。

Markdown

支持 Markdown 是我使用 Reveal.js 最直接的原因。写文章的同时就做好了排版工作，无需假借鼠标点点选选，不亦乐乎？我们还是通过一对标签把 Markdown 文稿转为 PPT 样式：

 <section data-markdown># 震惊！国内某数字消费资讯网站竟提供这种服务* 												


											

Reveal.js：把你的 Markdown 文稿变成 PPT相关推荐
	

    
								
  1. 基于docker+reveal.js搭建一个属于自己的在线ppt网站
		
    前言 最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种极其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...
    
		
    2. 
						
  2. 使用reveal.js制作一个酷炫的网页ppt
		
    今天教大家使用reveal.js,制作一个简洁优雅的网页ppt.在这之前,你需要一些基本的HTML以及CSS的技能基础. 1.准备工作 下载插件,插件下载地址:https://github.com/h ...
    
		
    3. 
						
  3. 使用reveal.js制作精美的网页版PPT
		
    前言 最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT ...
    
		
    4. 
						
  4. Reveal.js一个用来做WEB演示文稿的框架
		
    reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件 ...
    
		
    5. 
						
  5. 使用reveal.js写演示文稿
		
    使用reveal.js写演示文稿 用powerpoint或者keynote写演示文稿,对于代码.数学公式等的支持一直是个痛点.而且对于前端同学来说,一身的css功力用不上也是个痛点.对于使用markd ...
    
		
    6. 
						
  6. reveal.js + markdown 制作幻灯片
		
    reveal.js + markdown 制作幻灯片--0 reveal.js是一款通过利用HTML快速创建演示文稿,并且具有很多功能:垂直,水平幻灯片:支持Markdown,LaTex:演讲者注释: ...
    
		
    7. 
						
  7. reveal.js + markdown 制作幻灯片——配置选项，幻灯片背景，尺寸，插入媒体，链接
		
    reveal.js + markdown 制作幻灯片--配置选项,幻灯片背景,尺寸,插入媒体,链接 配置选项 配置选项在index.html文件的<body>中,通过Reveal.init ...
    
		
    8. 
						
  8. js 复制图片_不会做ppt？Reveal.js让你复制粘贴另类拉风，简洁优雅又低调
		
    要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js Reveal.js是什么 它是一个专门用来做 HTML 演示文稿的框架,通俗的讲它是 ...
    
		
    9. 
						
  9. 支持javascript的ppt软件_强大CSS3的3D幻灯片工具reveal.js(推荐)
		
    reveal.js是一个基于CSS3的3D幻灯片工具.Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具,能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上.它使用 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. LAMP环境搭建与测试
		
    2. 
						
  2. Python 中的 os 模块常见方法
		
    3. 
						
  3. git总是提示输入用户名密码的解决记录
		
    4. 
						
  4. hadoop 传感器数据_大数据时代Hadoop的本质，你有过认真了解吗？
		
    5. 
						
  5. 二进制安装的mysql怎么卸载_mysql安装-----二进制包安装及卸载
		
    6. 
						
  6. Linux的常用基础命令
		
    7. 
						
  7. Spring源码解析一（框架梳理）
		
    8. 
						
  8. java 爬取微信公众号文章 - 搜狗微信搜索
		
    9. 
						
  9. 计算机无线网络连接怎么弄,Win7系统如何设置无线网络连接？
		
    10. 
						
  10. 赤裸裸的逆袭：小学生都用大数据分析苏轼了！
		
    11. 
						
  11. chrome浏览器无法访问此网站并且响应时间长的方法
		
    12. 
						
  12. 大二web期末大作业——动漫海贼王（可以很好的应付老师的作业）
		
    13. 
						
  13. 用excel中数据分析功能做线性回归练习。分别选取20、200、2000（或20000）组数据，进行练习。记录回归方程式、相关系数R2并用jupyter编程
		
    14. 
						
  14. 这世上本来没有路,走的人多了,也便成了路
		
    15. 
						
  15. 【数据结构】7-1 软硬车厢交替排列 (13 分)
		
    16. 
						
  16. Exchange Server2010系列之六：监控用户邮件
		
    17. 
						
  17. IOS实现Voip应用后台运行需要的几个配置项
		
    18. 
						
  18. php 公众号验证回调方法_微信公众号运营的技巧和方法？
		
    19. 
						
  19. ArcGIS教程：ArcGIS地质图矢量化技巧概要
		
    20. 
						
  20. iphone 6s耗电问题
		
    21. 
		

	


热门文章
	

    
									
  1. squid的简单介绍
			
    2. 
						
  2. Python判断函数与方法
			
    3. 
						
  3. [Java]LeetCode138. 复制带随机指针的链表 |  Copy List with Random Pointer
			
    4. 
						
  4. DCOM EXCE权限配置问题
			
    5. 
						
  5. 030 Substring with Concatenation of All Words 与所有单词相关联的字串
			
    6. 
						
  6. [ZJOI2006]超级麻将
			
    7. 
						
  7. 如何嗅闻交换网络和ARP骗子-ARP解释的原则
			
    8. 
						
  8. 请写一个函数，实现以下功能： 字符串“open_door” 转换成 “OpenDoor”、”make_by_id” 转换成 ”MakeById”...
			
    9. 
						
  9. NHibernate学习之基础配置
			
    10. 
						
  10. 法拍房数量激增数百倍！来看看这里面的数据...
			
    11.