Skip to content

Latest commit

 

History

History
227 lines (140 loc) · 10.7 KB

revealjs.md

File metadata and controls

227 lines (140 loc) · 10.7 KB

reveal.js

  • hakimel/reveal.js: The HTML Presentation Framework

    • A FRAMEWORK for easily creating beautiful presentations using HTML. Check out the live demo.

      這個專案的星星數有 50.5k，有點誇張!!

    • reveal.js comes with a broad range of features including nested slides, Markdown support, PDF export, speaker notes and a JavaScript API. There's also a fully featured visual editor and platform for sharing reveal.js presentations at slides.com.

    • Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at https://slides.com.

      Markdown 的用法並不是事先用工具轉成 HTML，而是內嵌在 HTML，在 browser 裡動態解析；所以 Slides.com 應該沒有上傳 Markdown 的選項。

    • This project was started and is maintained by @hakimel with the help of many contributions from the community. The best way to support the project is to become a paying member of Slides.com—the reveal.js presentation platform that Hakim is building.

      原來 slides.com 是作者 Hakim 建的商用平台。

新手上路 {: #getting-started }

  • Markup - Instructions - hakimel/reveal.js: The HTML Presentation Framework

    • Here's a BAREBONEs example of a fully working reveal.js presentation:

      <html>
  <head>
    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/white.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="js/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

      The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely.

      這就是所謂的 framework，順著它的安排加上內容、調整設定即可；幾乎都在 HTML 裡進行 ??

    • If you place multiple section elements inside of another section they will be shown as VERTICAL slides.

      The first of the vertical slides is the "ROOT" of the others (at the top), and will be included in the HORIZONTAL SEQUENCE. 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>

      也就是 "Single Horizontal Slide" 往右會看到 "Vertical Slide 1"，接著要往下才看得到 "Vertical Slide 2"。

Markdown

Configuration {: #config }

Hosting

  • 首推 HackMD 的 Slide Mode，它強調了 reveal.js 對 Markdown 的支持，比走向 WYSIWYG 的 Slides.com 讓人更容易專注在內容的撰寫。
  • reveal.js 本身是 HTML (+ CSS + JavaScript)，當然也可以放在 GitHub Pages

參考資料：

Plugin

安裝設置 {: #setup }

  • Installation - hakimel/reveal.js: The HTML Presentation Framework

    • The basic setup is for AUTHORING PRESENTATIONS ONLY. The full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the SOURCE.

      感覺 basic setup 是 reveal.js + 預配置好的設定所產生的結果，所以不能用 Markdown 寫了??

      無論如何，都需要 reveal.js 的 repo。

    Basic setup

    • The CORE of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.

    Full setup

    • Some reveal.js features, like external Markdown and speaker notes, require that presentations RUN FROM A LOCAL WEB SERVER. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js SOURCE CODE.

      為什麼要動到 reveal.js 的原始碼?? 轉成 HTML 後應該就不需要有 local web server 了??

      1. Install Node.js (9.0.0 or later)

      2. Clone the reveal.js repository

      3. Navigate to the reveal.js folder

      4. Install dependencies

        $ npm install

      5. Serve the presentation and MONITOR source files for changes

        $ npm start

      6. Open http://localhost:8000 to view your presentation

        You can change the port by using npm start -- --port=8001.

    Folder Structure

    • css/ - Core styles without which the project does not function
    • js/ - Like above but for JavaScript
    • plugin/ - Components that have been developed as extensions to reveal.js
    • lib/ - All other third party assets (JavaScript, CSS, fonts)

  • Dependencies - hakimel/reveal.js: The HTML Presentation Framework

    • Reveal.js doesn't rely on any third party scripts to work but a few OPTIONAL libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:

      Reveal.initialize({
  dependencies: [
    // Interpret Markdown in <section> elements
    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

    // Syntax highlight for <code> elements
    { src: 'plugin/highlight/highlight.js', async: true },

    // Zoom in and out with Alt+click
    { src: 'plugin/zoom-js/zoom.js', async: true },

    // Speaker notes
    { src: 'plugin/notes/notes.js', async: true },

    // MathJax
    { src: 'plugin/math/math.js', async: true }
  ]
});

    • You can add your own extensions using the same syntax. The following properties are available for each DEPENDENCY OBJECT:

      • src: Path to the script to load

      • async: [optional] Flags if the script should load after reveal.js has started, defaults to false

        引用 plugin 時都要用 async: true ??

      • callback: [optional] Function to execute when the script has loaded

      • condition: [optional] Function which must return true for the script to be loaded

  • jupyter/nbconvert: Jupyter Notebook Conversion 輸出支援 reveal.js #ril

  • Pandoc - About pandoc Pandoc 支援的 slide show format 裡有 reveal.js

參考資料 {: #reference }

工具：

  • reveal-md - 將 Markdown 轉成 reveal.js。

相關：

手冊：