GitHub 標(biāo)星 54K + 2K！這才是程序員寫逼格滿滿的 PPT 的正確姿勢！

作者：夜盡天明 2020-12-08 10:23:42

新聞前端

作為程序員，特別是前端，有沒有更簡結(jié)與高逼格幻燈片實(shí)現(xiàn)方式呢？肯定是有的啊！

前言

相信大家都有過 PPT 分享的經(jīng)歷，超級(jí)貓一直覺得用 powerpoint 寫幻燈片太麻煩，效率太低了。

作為程序員，特別是前端，有沒有更簡結(jié)與高逼格幻燈片實(shí)現(xiàn)方式呢？肯定是有的啊！

今天給大家?guī)淼氖鞘褂?Markdown 和 HTML 寫逼格滿滿的 PPT 的正確姿勢！

[[356306]]

reveal-md

reveal-md 是使用 Markdown 來做 PPT 展示的開源項(xiàng)目，標(biāo)星 2.1K 。

安裝

npm install -g reveal-md

使用

reveal-md path/demo.md

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

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

## 前端GitHub 
 
* 大前端集合 
* GitHub 優(yōu)秀開源項(xiàng)目推薦 
 
--- 
 
## 內(nèi)容 
 
> 專注于挖掘優(yōu)秀的前端開源項(xiàng)目，抹平你的前端信息不對(duì)稱。 
 
涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等！ 
 
 
--- 
 
## 前端資源合集 
 
* 收集、整理、推薦業(yè)界高品質(zhì)前端資源合集 
* 優(yōu)秀的工具、庫、好的教程 
* 了解業(yè)界更優(yōu)秀的代碼、工具、業(yè)界最新的技術(shù)

在終端運(yùn)行命令： reveal-md ./demo.md

效果如圖：

主題使用

包含的主題有以下幾種：

beige
black
blood
league
moon
night
serif
simple
sky
solarized
white

比如指定 league 主題使用：

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

效果如圖：

還可以指定自己寫的主題，也就是自己寫的 css 樣式，使用自定義主題后，會(huì)覆蓋默認(rèn)的主題。

比如自定義文件位于 ./theme/my-custom.css 中時(shí)，指定對(duì)應(yīng)的路徑即可。

reveal-md slides.md --theme theme/my-custom.css

項(xiàng)目地址：

https://github.com/webpro/rev...

reveal.js

這是一個(gè)基于 CSS 的 3D 幻燈片工具，標(biāo)星 54K。

Reveal.js 做 PPT 的優(yōu)點(diǎn)是可以使用 markdown 語言直接寫靜態(tài)的文本，并可以加入各種 html 語言支持的交互動(dòng)畫，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。

reveal.js 是一個(gè)開放源代碼 HTML 表示框架。它使使用 Web 瀏覽器的任何人都可以免費(fèi)創(chuàng)建功能齊全且美觀的演示文稿。

該框架具有廣泛的功能，包括嵌套幻燈片，Markdown 支持，自動(dòng)動(dòng)畫，PDF 導(dǎo)出，演講者注釋，LaTeX 支持，語法突出顯示的代碼等等。

reveal.js 有一下幾個(gè)特點(diǎn)：

支持標(biāo)簽來區(qū)分每一頁幻燈片
可以使用 markdown 來寫內(nèi)容
支持 pdf 的導(dǎo)出
支持演說注釋
提供 JavaScript API 來控制頁面
提供了多個(gè)默認(rèn)主題和切換方式
自適應(yīng)移動(dòng)端和 PC 端

使用

使用分為基本使用、完整安裝、npm 方式安裝 3 種方式。

基本使用

下載最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
解壓縮并將 index.html 中的示例內(nèi)容替換為您自己的內(nèi)容
在瀏覽器中打開 index.html 進(jìn)行查看

完整安裝

安裝：

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

直接導(dǎo)入使用

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 樣式和主題 .

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

使用

幻燈片的內(nèi)容需要包含在 <div class="reveal"> <div class="slides"> 的標(biāo)簽中。

一個(gè) section 是一頁幻燈片。當(dāng) section 包含在 section 中時(shí)，是一個(gè)縱向的幻燈片。

怎么理解呢？可以這樣理解：橫向的幻燈片代表一章，縱向的幻燈片代表一章中的一節(jié)。那么橫向的幻燈片在播放時(shí)是左右切換的，而縱向的幻燈片是上下切換的。

For example:

<div class="reveal"> 
    <div class="slides"> 
        <section>Single Horizontal Slide</section> 
        <section> 
            <section>Vertical Slide 1</section> 
            <section>Vertical Slide 2</section> 
        </section> 
    </div> 
</div>

html 實(shí)現(xiàn)

標(biāo)題和正文

section 中的內(nèi)容就是幻燈片的內(nèi)容，你可以使用 h2 標(biāo)簽標(biāo)示 title ， p 表示內(nèi)容。需要紅色的字體可以直接設(shè)置 style 的 color 為 red 。

當(dāng)某一頁需要特殊背景色，可以使用 data-background 在 section 上設(shè)置, data-background-transition 表示背景的過渡效果。

For example:

<section data-background-transition="zoom" data-background="#dddddd">

如果需要正文一段一段出現(xiàn)。可以使用 fragment 。

For Example:

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

代碼

reveal.js 使用 highlight.js 來支持代碼高亮。可以直接寫 code 標(biāo)簽來實(shí)現(xiàn), data-trim 表示去除多余的空格。

For Example:

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

注釋

在演說時(shí)，會(huì)用到注釋，對(duì)于注釋，可以通過 <aside class="notes"> 來實(shí)現(xiàn)。

For Example:

<aside class="notes"> 
  這里是注釋。 
</aside>

在幻燈片頁面，按下 s 鍵，就可以調(diào)出注釋頁面，注釋頁面包含了當(dāng)前幻燈片，下一章幻燈片，注釋，以及幻燈片播放時(shí)間。

markdown 實(shí)現(xiàn)

reveal.js 不僅支持 html 表示來實(shí)現(xiàn)內(nèi)容，還可以通過 markdown 來實(shí)現(xiàn)內(nèi)容。使用 markdown 實(shí)現(xiàn)內(nèi)容時(shí)，需要對(duì) section 標(biāo)示添加 data-markdown 屬性，然后將 markdown 內(nèi)容寫到一個(gè) text/template 腳本中。

For Example:

<section data-markdown> 
    <script type="text/template"> 
        ## Page title 
 
        A paragraph with some text and a [link](http://hakim.se). 
    </script> 
</section> 
背景色，fragment功能的實(shí)現(xiàn)，可以通過注釋來實(shí)現(xiàn)。For Example: 
 
<section data-markdown> 
    <script type="text/template"> 
    <!-- .slide: data-background="#ff0000" --> 
        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> 
        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> 
    </script> 
</section>

外置 md 文件

reveal.js 可以引用一個(gè)外置的 markdown 文件來解析。

For Example:

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

分頁實(shí)現(xiàn)

一個(gè) markdown 文件中可以連續(xù)包含多個(gè)章內(nèi)容。可以在 section 中通過屬性 data-separator, data-separator-vertical 來劃分章節(jié)。

For Example:

<section data-separator="---" data-separator-vertical="--"  > 
  <script type="text/template"> 
    # 主題1 
    - 主題1-內(nèi)容1 
    - 主題1-內(nèi)容2 
    -- 
    ## 主題1-內(nèi)容1 
    內(nèi)容1-細(xì)節(jié)1 
    -- 
    ## 主題1-內(nèi)容2 
    內(nèi)容1-細(xì)節(jié)2 
    --- 
    # 主題2 
  </script> 
</section>

注釋

對(duì) section 添加 data-separator-notes="^Note:" 屬性，就可以指定 Note: 后面的內(nèi)容為當(dāng)前幻燈片的注釋。

For Example:

# Title 
## Sub-title 
 
Here is some content... 
 
Note: 
This will only display in the notes window.

導(dǎo)出 PDF

在瀏覽器打開文件的 url 上添加 print-pdf 即可以，比如： http://localhost:8000/demo.html/?print-pdf ，你可以測試一下官方的 revealjs.com/demo?print-pdf
打開瀏覽器的保存為 pdf 的彈框，快捷鍵為：CTRL/CMD + P
邊距設(shè)置為無
勾上背景圖形
點(diǎn)擊保存即可