日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

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

成都創(chuàng)新互聯(lián)專注于百色企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站制作。百色網(wǎng)站建設(shè)公司,為百色等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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)目，抹平你的前端信息不對稱。 
  
  
  
  
 
  
  
  
  
涵蓋 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 樣式，使用自定義主題后，會覆蓋默認(rèn)的主題。

比如自定義文件位于 ./theme/my-custom.css 中時(shí)，指定對應(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 語言支持的交互動畫，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。

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

該框架具有廣泛的功能，包括嵌套幻燈片，Markdown 支持，自動動畫，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)移動端和 PC 端

使用

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

基本使用

1. 下載最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
2. 解壓縮并將 index.html 中的示例內(nèi)容替換為您自己的內(nèi)容
3. 在瀏覽器中打開 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 樣式 和 主題 .

使用

幻燈片的內(nèi)容需要包含在 

 
 
 
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
        
Single Horizontal Slide
 
  
  
  
  
        
 
  
  
  
  
            
Vertical Slide 1
 
  
  
  
  
            
Vertical Slide 2
 
  
  
  
  
         
  
  
  
  
    

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:

如果需要正文一段一段出現(xiàn)?？梢允褂?nbsp;fragment 。

For Example:

代碼

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

For Example:

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

注釋

在演說時(shí)，會用到注釋，對于注釋，可以通過 

在幻燈片頁面，按下 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í)，需要對 section 標(biāo)示添加 data-markdown 屬性，然后將 markdown 內(nèi)容寫到一個(gè) text/template 腳本中。

For Example:

 
 
 
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
背景色，fragment功能的實(shí)現(xiàn)，可以通過注釋來實(shí)現(xiàn)。For Example: 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
 
 
 

外置 md 文件

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

For Example:

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

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

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

For Example:

注釋

對 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)擊 保存 即可

多主題

reveal.js 提供了多種樣式?？梢酝ㄟ^引用不同的主題來實(shí)現(xiàn)。具體主題查看 reveal.js/css/theme 下的 css 文件。

總結(jié)

用 reveal.js 來實(shí)現(xiàn)幻燈片，可以只關(guān)注內(nèi)容，忽略各種切換效果。

而且可以使用 markdown 來實(shí)現(xiàn)，大大提高了編寫效率。對于最后生成的 html 文件，可以部署到服務(wù)器，這樣只需要網(wǎng)絡(luò)就可以進(jìn)行分享，不需要使用 U 盤拷來拷去了。

https://github.com/hakimel/re...

最后

這兩個(gè)神級項(xiàng)目的功能遠(yuǎn)遠(yuǎn)不止這么點(diǎn)，還有多少呢？

看看 Github 上的 README.md 你就知道了，在現(xiàn)在這樣一個(gè)大前端的時(shí)代，有什么是網(wǎng)頁不能完成的呢？

好了，看到這里，下次演示 PPT 時(shí)，你應(yīng)該就能在眾人面前裝逼了 ????