日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

前言

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

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

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

今天給大家?guī)?lái)的是使用 Markdown 和 HTML 寫(xiě)逼格滿(mǎn)滿(mǎn)的 PPT 的正確姿勢(shì)！

reveal-md

reveal-md 是使用 Markdown 來(lái)做 PPT 展示的開(kāi)源項(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)秀開(kāi)源項(xiàng)目推薦 
  
  
  
  
 
  
  
  
  
--- 
  
  
  
  
 
  
  
  
  
## 內(nèi)容 
  
  
  
  
 
  
  
  
  
> 專(zhuān)注于挖掘優(yōu)秀的前端開(kāi)源項(xiàng)目，抹平你的前端信息不對(duì)稱(chēng)。 
  
  
  
  
 
  
  
  
  
涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等！ 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
--- 
  
  
  
  
 
  
  
  
  
## 前端資源合集 
  
  
  
  
 
  
  
  
  
* 收集、整理、推薦業(yè)界高品質(zhì)前端資源合集 
  
  
  
  
* 優(yōu)秀的工具、庫(kù)、好的教程 
  
  
  
  
* 了解業(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 
 
 
 

效果如圖：

還可以指定自己寫(xiě)的主題，也就是自己寫(xiě)的 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 語(yǔ)言直接寫(xiě)靜態(tài)的文本，并可以加入各種 html 語(yǔ)言支持的交互動(dòng)畫(huà)，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。

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

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

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

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

使用

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

基本使用

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

完整安裝

安裝：

 
 
 
 
  
  
  
  
git clone https://github.com/hakimel/reveal.js.git 
  
  
  
  
cd reveal.js && npm install 
  
  
  
  
npm start 
 
 
 

打開(kāi) 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)某一頁(yè)需要特殊背景色，可以使用 data-background 在 section 上設(shè)置, data-background-transition 表示背景的過(guò)渡效果。

For example:

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

For Example:

代碼

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

For Example:

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

注釋

在演說(shuō)時(shí)，會(huì)用到注釋?zhuān)瑢?duì)于注釋?zhuān)梢酝ㄟ^(guò) 

在幻燈片頁(yè)面，按下 s 鍵，就可以調(diào)出注釋頁(yè)面，注釋頁(yè)面包含了當(dāng)前幻燈片，下一章幻燈片，注釋?zhuān)约盎脽羝シ艜r(shí)間。

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

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

For Example:

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

外置 md 文件

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

For Example:

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

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

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

For Example:

注釋

對(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

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

多主題

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

總結(jié)

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

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

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

最后

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

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

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