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

前言

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

成都创新互联专注于百色企业网站建设,自适应网站建设,商城网站制作。百色网站建设公司,为百色等地区提供建站服务。全流程按需规划网站,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

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

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

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.  
  2.  

使用

幻灯片的内容需要包含在 

 的标签中。

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

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

For example:

 
 
 
 
  1.  
  2.      
  3.         
    Single Horizontal Slide
     
  4.         
     
  5.             
    Vertical Slide 1
     
  6.             
    Vertical Slide 2
     
  7.          
  8.     
 
  •  

    html 实现

    标题和正文

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

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

    For example:

     
     
     
     
    1.  

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

    For Example:

     
     
     
     
    1.  

    代码

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

    For Example:

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

    注释

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

     

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

    markdown 实现

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

    For Example:

     
     
     
     
    1.  
    2.      
    3.         ## Page title 
    4.  
    5.         A paragraph with some text and a [link](http://hakim.se). 
    6.      
    7.  
    8. 背景色,fragment功能的实现,可以通过注释来实现。For Example: 
    9.  
    10.  
    11.      
    12.      
    13.         - Item 1  
    14.         - Item 2  
    15.      
    16.  

    外置 md 文件

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

    For Example:

     
     
     
     
    1.          data-separator="^\n\n\n"   
    2.          data-separator-vertical="^\n\n"   
    3.          data-separator-notes="^Note:"   
    4.          data-charset="iso-8859-15"> 
    5.  

    分页实现

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

    For Example:

     
     
     
     
    1.  
    2.    
    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.    
    15.  

    注释

    对 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 时,你应该就能在众人面前装逼了 ????

    分享标题:GitHub 标星 54K + 2K!这才是程序员写逼格满满的 PPT 的正确姿势!
    标题来源:http://www.shufengxianlan.com/qtweb/news49/196099.html

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

    广告

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