前端大神都用什麼做 PPT？

01-11

之前參加360前端星計劃時，月影老師的ppt著實顛覆了我對ppt的認識。前一段時間有用過reveal.js給同事做過分享，之後又知道nodeppt也可以。但由於最近還要給同事做一次分享，需要再做一次ppt，另外也比較好奇，想知道前端大神都是用什麼做ppt的？

一般需求用 http://slides.com 的服務應該能滿足大部分場景。但如果需要內嵌腳本之類的，可能就不太夠用了。可以手寫 HTML/Markdown 然後用 reveal.js 來展示。

PS. 說實話看到 @月影前輩發的回答，感覺很失望，因為至少編輯界面和多數功能在設計上基本是直接抄的 slides.com。內部使用也就算了，發出來推廣我覺得不妥。

不是大神。

但是強烈推薦演說IO。完美契合個人需求。

網址： http://yanshuo.io

我不是前端大神，但我確實是幻燈片大神。

簡單的（內部培訓用的）幻燈片用 http://Slides.com。這個網站提供的幻燈片製作功能恰到好處，簡單的需求能 hold 得住，操作也足夠簡單直觀。所以簡單的小分享不妨用它來試試。

複雜的（出去得瑟用的）必須是 Keynote。你的演講需要有複雜的動畫？豐富的交互？那必須請出 Keynote！「最好的幻燈片製作軟體」已經不足以形容 Keynote 了，它已經成為一個功能強大、界面友好的多媒體製作平台。除了演講幻燈片，我還可以用 Keynote 來製作教學視頻、產品交互原型、音樂相冊、舞台劇排練腳本……

（附：以前出去得瑟的演講，用微信或微博賬號登錄即可觀看視頻：重拾CSS的樂趣-慕課網）

居然被邀了，其實我只是一隻小鳥，不是大嬸啊。

雖然不是大嬸，不過小鳥兒也寫過幾個 PPT，然而並沒有用那些所謂的 nodePPT 什麼的東西，太高端了，玩不來，就簡單用用 PowerPoint 或者 keynote 就好了。

之前沒有 Mac 的時候，我用的 PowerPoint，有了 Mac 之後，我發覺 keynote 的效果其實很贊啊，當然，後來的 PowerPoint 也很贊，各有千秋。

說白了，用什麼東西都無所謂，無非是一個工具而已，完全憑個人喜好。再說了，一個 PPT 的好壞，屌不屌，跟用什麼工具無關，只要能夠清晰表達主題以及相對應的提供論證就好了。

但話說回來，作為一名前端，如果 PPT 中的內容包含了一些 demo，並且又不想切換界面到瀏覽器中的話，用 nodePPT 未嘗不是一件好事，可以直接演示代碼效果。而且如果涉及到的是 CSS 樣式上的 demo 的話，還可以給 style 標籤加上一些樣式，並且加上 contenteditable="true" 這個屬性，然後直接寫樣式，我想說，這個逼格是滿滿的。畢竟這些事情在 PowerPoint 或者 keynote 中是無法滿足的。

那麼最後到底應該選擇什麼方式來做 PPT 呢，其實我也不知道，還是選擇自己所需要的吧。反正就目前我個人感覺，用 keynote 很舒服，拿著手機不僅可以看自己的備註，還是可以直接當遙控器（如果中途連接出現問題那就裝逼失敗了），最後這個 PPT 可以直接導出 PDF 分享給他人。關鍵是用 PowerPoint 或者 keynote 可以增加很多動畫以及換場切換效果，視覺衝擊力強的不要不要的，這些效果在 nodePPT 這樣的頁面層面的 PPT 展示上還是比較難實現的。

https://docs.google.com

謝邀~我以前用過power point，自從用了 mac 之後，最初是 keynote 和 power point 都用的。

但是後來，我覺得離線的 PPT 比較麻煩，就想找個在線的 PPT 工具來用。在這裡我不得不說 https://github.com/hakimel/reveal.js 是個好東西，這個開源的 web ppt 功能強大，不過這只是工具，自己製作完之後還需要上傳到伺服器上，而且還得自己維護。

如果想要方便一些，不妨試試 Slides – Create and share presentations online，這貨真心不錯，在線製作 PPT 的神器。但是這個必須要翻牆才能用（原因你懂的），速度不快，所以有時候製作起來也挺讓人糾結。

後面我自己基於 reveal.js 開發了一個開源項目叫做 akira-cn/matrix 相當於給 reveal.js 加了一個管理後台，並且增加了對 Markdown 的支持。有興趣的童鞋可以去看一下。這個是一個基於 Node.js 的服務，依然需要自己部署。

用它製作出來的 PPT 大概長這個樣子：動畫原理與實現

接下來要說的平台利益相關，為避免廣告嫌疑，先聲明下面這個平台是我們的同學開發的。

由於 matrix 要自己部署，依然比較麻煩，直到最近，我換成使用聲享 - 在線製作有聲PPT ，這是一個國內的平台，速度很快，功能也不比 Slides.com 弱，而且它的特色是還有語音錄製和播放功能。

好用的編輯器：

風格模板：

切換動畫：

錄音功能：

這款 slides 編輯器基本滿足我目前的需求，更高級的功能在設計中。需要寫 ppt 的同學不妨試用一下聲享 - 在線製作有聲PPT，我相信你會愛上它。

這是我最近用聲享製作的幾個 PPT：

前端動畫原理與實現-聲享

前端工程師的自我修鍊-聲享

我是前端「攻城獅」-聲享

跟月影學 JavaScript 系列（一）

寫給程序員看的圍棋教程（一）-聲享

寫給程序員看的圍棋教程（二）-聲享

我也來打個醬油，以上大神們的工具我用過部分，作為一個前端er，推薦一個更方便的輕量級工具。

Atom+Markdown Preview Enhanced(markdown-preview-enhanced)+Language GFM Enhanced(language-gfm-enhanced)

這個插件基本把寫markdown的常用不常用的功能都加上了，其中一個功能當然就是用markdown寫slide。

寫好了，在瀏覽器運行就可以了。

點擊右下角可以切換，或者是方向鍵。只需要簡單的開圖就可以開始寫slide。當然了，我們經常要面臨演示代碼的需求，所以就在要slide中運行代碼，這個插件就有這個功能。

這功能必須要加上Language GFM Enhanced這個插件，才能正確運行。其實支持的語言不少，只需電腦的環境裝好，Python都可以的。

使用教程在這裡presentation-intro ，如果不需要運行代碼，這個工具可以滿足大部分需求，有了這個插件後，我把atom之前所有的markdown插件都刪了，因為感覺這個工具太強大了。

列一下它的功能：

編輯與預覽滑動同步
Code Chunks (beta)
pandoc
ebook
Presentation Writer
支持擴展
數學編輯支持
你可以選擇 MathJax 或者 KaTeX 來渲染數學表達式
導出 PDF, PNG, and JPEG 文件
導出 HTML （完美支持移動端設備）
自定義 Markdown Preview 樣式（css）
TOC 自動生成 (beta)
Flowchart / Sequence 等各種圖
Task List 任務列表 (Github Flavored)
圖片助手
Footnotes
Front Matter
以及更多特性...

你們是不是應該點個贊了&>&>&>(￣▽￣)~*

我不是大神，我用的工具很多，有用Keynote,Powerpoint。

現在我們團隊自己在開發聲享：https://ppt.baomitu.com

不過大家可以對比一起，各有各的優勢吧！

我也試過很多 PPT 工具，直到有一天我想通了。

既然我是前端工程師，

為什麼不用一個完全開源、完全免費、完全自定義的 PPT 製作工具呢？

FrankFang/wtf-slides

示例 https://frankfang.github.io/wtf-slides/%E7%A4%BA%E4%BE%8B.html#/

請右鍵查看源代碼。

不準吐槽載入慢，因為你演講前有足夠的時間把頁面載入完呀 O(∩_∩)O~

什麼？居然沒人提hakimel/reveal.js 和 gnab/remark ? 新建一個html文件，往裡面寫一點html或者markdown，就直接轉換成瀏覽器里可以運行的PPT！

& & & &Title& & & @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);


      body { font-family: "Droid Serif"; }

      h1, h2, h3 {

        font-family: "Yanone Kaffeesatz";

        font-weight: normal;

      }

      .remark-code, .remark-inline-code { font-family: "Ubuntu Mono"; }

    &
  &

  &

    &</p>
<p>class: center, middle</p>
<p># Title</p>
<p>---</p>
<p># Agenda</p>
<p>1. Introduction<br />
2. Deep-dive<br />
3. ...</p>
<p>---</p>
<p># Introduction</p>
<p>    &</textarea&><br />
    &<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"&><br />
    &</script&><br />
    &<script&><br />
      var slideshow = remark.create();<br />
    &</script&><br />
  &</body&><br />
&</html&><br />
</code></pre>
<p><P style="text-align:center;"><P style="text-align:center;"><img src="//i1.wp.com/pic2.zhimg.com/50/v2-b269f5a1806d0db7bd6784bb22f3b75c_hd.jpg" dw="1359" dh="1016"  w="1359" data-original="https://pic2.zhimg.com/v2-b269f5a1806d0db7bd6784bb22f3b75c_r.jpg"></P></P>關注我的「Node快閃」知乎專欄，15分鐘上手一項Node/前端技能，提供所有源代碼。</P></p>
<hr /><P>https://github.com/yhatt/marp</P><P>一個用markdown寫幻燈片的跨平台軟體，唯一需要了解的規則是用分割線（---）代表分頁。</P><P>作者是個日本小哥，以前有個版本在css裡面寫死了默認日文字體，字形不適合中文語言環境，後來我提了個issue，作者馬上改掉了，還是很勤快的。</P>缺陷是暫時不支持全屏演示。</P></p>
<hr /><P>gnab/remark</P><P>ksky521/nodeppt</P><P>https://github.com/hakimel/reveal.js</P><P>https://github.com/impress/impress.js</P><P>Slides – Create and share presentations online</P></P></p>
<hr />個人經驗總結：找美術畫個好看的模板比什麼都重要。</P></p>
<hr />http://slides.com</P>slides很不錯，乾淨大方，風格也很漂亮，在線編輯瀏覽</P></p>
<hr />impress.js</P></p>
<hr />用Windows版的PowerPoint 2016啊！</P></p>
<hr />用的http://no-ppt.com，今年用作內部分享用。基於webgl做的，他們公司有專門做模版與演講知道的人員。每一套模板會幫你把你思路理清，這是最值得稱讚的地方，因為有專業的場景設計師，效果應該會比其他在線的效果好。也不是沒有糟點，因為用的WEBGL，所以需要好的顯卡。^_^不過現在的硬體和技術都在提高不是</P></p>
<hr /><P>不是大神。但前幾天做了一次內部分享，用了Marp - The simplest markdown presentation writer這個工具，特點是把markdown轉成ppt。</P><P>因為平時筆記習慣markdown，為了分享寫了很多篇零碎的筆記，最後用Marp把這些筆記整理起來做成分享很方便。</P>優點是成本低，轉化快，缺點是主題少，樣式一般，不過感覺內部分享夠用~</P></p>
<hr />據說他們有個模板收藏夾。</P></p>
<hr />nodePPT 不是大神 匿了</P></p>
<hr />PPT就可以</P></p>
<hr /><span style="color:red"><i class="fa fa-paper-plane"></i></span>  推薦閱讀：</div>
<p>※<a target=_blank href=/p20180111339184901/>vuejs的.vue模板中img標籤的圖片如何載入？</a><br />※<a target=_blank href=/p20180111860006933/>為什麼safari不能用Promise獲取數據？</a><br />※<a target=_blank href=/p20180111565176272/>如何看待 Moon.js 幾乎和 Vue.js 一樣？</a><br />※<a target=_blank href=/p20180111023250979/>《Web前端黑客技術揭秘》《白帽子講Web安全》好難，怎麼讀？</a></p>
<p>TAG:<a target=_blank href=/tag/PPT/>PPT</a> | <a target=_blank href=/tag/前端工程師/>前端工程師</a> | </p>
<!-- AddThis Advanced Settings above via filter on the_content --><!-- AddThis Advanced Settings below via filter on the_content --><!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons above via filter on the_content --><!-- AddThis Share Buttons below via filter on the_content --><div class="at-below-post addthis_tool" data-url="https://www.getit01.com/p20180110052896240/"></div><!-- AddThis Share Buttons generic via filter on the_content --></div>
<script src="/ce.js"></script>

				               	<div class="clear"></div>
                
       
 
                             </div>
		</div>
    						
    	

    
    	<div class="clear"></div>
	
	</div>
</div>
<div class="clear"></div>
<div id="footer">
      <div class="copyright">
  <p> 一點新知 <a href="https://www.getit01.com/"><strong>
    GetIt01    </strong></a>
<div style="display:none"><script src="https://s13.cnzz.com/z_stat.php?id=1270562218&web_id=1270562218" language="JavaScript"></script></div>
<br />    
  </p>
  
  </div>
</div>
</div>
<!--gototop-->
<div id="tbox">
    <a target="_blank" id="fb" href="https://www.facebook.com/sharer.php?u=https://www.getit01.com/p20180110052896240/"></a>
     </div>
<script data-cfasync="false" type="text/javascript">if (window.addthis_product === undefined) { window.addthis_product = "wpp"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpp-6.1.1"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.8.22"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = {"data_track_clickback":true,"ignore_server_config":true,"ui_atversion":"300"}; } if (window.addthis_layers === undefined) { window.addthis_layers = {}; } if (window.addthis_layers_tools === undefined) { window.addthis_layers_tools = [{"share":{"counts":"each","numPreferredServices":5,"mobile":false,"position":"left","theme":"transparent"},"sharedock":{"counts":"each","numPreferredServices":5,"mobileButtonSize":"large","position":"bottom","theme":"transparent"}},{"sharetoolbox":{"numPreferredServices":5,"counts":"each","size":"32px","style":"fixed","shareCountThreshold":0,"elements":".addthis_inline_share_toolbox_vh9e,.at-above-post"}}]; } else { window.addthis_layers_tools.push({"share":{"counts":"each","numPreferredServices":5,"mobile":false,"position":"left","theme":"transparent"},"sharedock":{"counts":"each","numPreferredServices":5,"mobileButtonSize":"large","position":"bottom","theme":"transparent"}}); window.addthis_layers_tools.push({"sharetoolbox":{"numPreferredServices":5,"counts":"each","size":"32px","style":"fixed","shareCountThreshold":0,"elements":".addthis_inline_share_toolbox_vh9e,.at-above-post"}});  } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = {"info_status":"enabled","cms_name":"WordPress","plugin_name":"Share Buttons by AddThis","plugin_version":"6.1.1","plugin_mode":"WordPress","anonymous_profile_id":"wp-465109ee2f0e70a26b602727e258dac0","page_info":{"template":"posts","post_type":""},"sharing_enabled_on_post_via_metabox":false}; } 
                    (function() {
                      var first_load_interval_id = setInterval(function () {
                        if (typeof window.addthis !== 'undefined') {
                          window.clearInterval(first_load_interval_id);
                          if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) {
                            window.addthis.layers(window.addthis_layers);
                          }
                          if (Array.isArray(window.addthis_layers_tools)) {
                            for (i = 0; i < window.addthis_layers_tools.length; i++) {
                              window.addthis.layers(window.addthis_layers_tools[i]);
                            }
                          }
                        }
                     },1000)
                    }());
                </script><script type='text/javascript' src='https://s7.addthis.com/js/300/addthis_widget.js?ver=4.8.22#pubid=wp-465109ee2f0e70a26b602727e258dac0'></script>
<script type='text/javascript' src='https://www.getit01.com/wp-content/themes/Qu/js/loostrive.js?ver=1.0'></script>
<script type='text/javascript' src='https://www.getit01.com/wp-includes/js/wp-embed.min.js?ver=4.8.22'></script>


</body></html>
<!-- Dynamic page generated in 0.150 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2023-08-28 03:48:49 -->

<!-- super cache -->