• s9_938327
  • 1.8MB
  • zip
  • 0
  • VIP专享
  • 0
  • 2022-06-13 20:10
您的GitHub学习实验室存储库,用于介绍GitHub 欢迎你的资料库为您的GitHub学习实验室课程。 我将指导您完成各种活动,以使用此存储库。 看到一个你不懂的单词? 我们加入了表情符号 :open_book: 在一些关键术语旁边。 单击它以查看其定义。 哦! 我还没有自我介绍... 我是GitHub Learning Lab机器人,我在这里可以帮助指导您学习和掌握本课程涵盖的各个主题。 我将使用“问题”和“拉取请求”注释与您交流。 实际上,我已经添加了一个问题供您结帐。 我将在那儿见你,等不及要开始! 本课程使用 :sparkles: 开源项目 。 在某些情况下,我们对历史记录进行了更改,以便在上课时表现良好,因此请转到原始项目存储库,以了解有关该项目背后的好人的更多信息。
# reveal.js [![Build Status](]( <a href="" rel='nofollow' onclick='return false;'><img src="" alt="Slides" width="160" height="20"></a> A framework for easily creating beautiful presentations using HTML. [Check out the live demo]( 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 []( ### Supporting reveal.js 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](—the reveal.js presentation platform that Hakim is building. ## Table of contents - [Online Editor](#online-editor) - [Installation](#installation) - [Basic setup](#basic-setup) - [Full setup](#full-setup) - [Folder Structure](#folder-structure) - [Instructions](#instructions) - [Markup](#markup) - [Markdown](#markdown) - [Element Attributes](#element-attributes) - [Slide Attributes](#slide-attributes) - [Configuration](#configuration) - [Presentation Size](#presentation-size) - [Dependencies](#dependencies) - [Ready Event](#ready-event) - [Auto-sliding](#auto-sliding) - [Keyboard Bindings](#keyboard-bindings) - [Vertical Slide Navigation](#vertical-slide-navigation) - [Touch Navigation](#touch-navigation) - [Lazy Loading](#lazy-loading) - [API](#api) - [Custom Key Bindings](#custom-key-bindings) - [Slide Changed Event](#slide-changed-event) - [Presentation State](#presentation-state) - [Slide States](#slide-states) - [Slide Backgrounds](#slide-backgrounds) - [Parallax Background](#parallax-background) - [Slide Transitions](#slide-transitions) - [Internal links](#internal-links) - [Fragments](#fragments) - [Fragment events](#fragment-events) - [Code syntax highlighting](#code-syntax-highlighting) - [Slide number](#slide-number) - [Overview mode](#overview-mode) - [Fullscreen mode](#fullscreen-mode) - [Embedded media](#embedded-media) - [Stretching elements](#stretching-elements) - [Resize Event](#resize-event) - [postMessage API](#postmessage-api) - [PDF Export](#pdf-export) - [Theming](#theming) - [Speaker Notes](#speaker-notes) - [Share and Print Speaker Notes](#share-and-print-speaker-notes) - [Server Side Speaker Notes](#server-side-speaker-notes) - [Plugins](#plugins) - [Multiplexing](#multiplexing) - [Master presentation](#master-presentation) - [Client presentation](#client-presentation) - [ server](#socketio-server) - [MathJax](#mathjax) - [License](#license) #### More reading - [Changelog]( Up-to-date version history. - [Examples]( Presentations created with reveal.js, add your own! - [Browser Support]( Explanation of browser support and fallbacks. - [Plugins](,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js. ## Online Editor 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 []( ## Installation 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 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. 1. Download the latest version of reveal.js from <> 2. Unzip and replace the example contents in index.html with your own 3. Open index.html in a browser to view it ### 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. 1. Install [Node.js]( (9.0.0 or later) 1. Clone the reveal.js repository ```sh $ git clone ``` 1. Navigate to the reveal.js folder ```sh $ cd reveal.js ``` 1. Install dependencies ```sh $ npm install ``` 1. Serve the presentation and monitor source files for changes ```sh $ npm start ``` 1. 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) ## Instructions ### Markup Here's a barebones example of a fully working reveal.js presentation: ```html <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. 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: ```html <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> ``` ### Markdown It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file. This is based on [data-markdown]( from [Paul Irish]( modified to use [marked]( to support [GitHub Flavored Markdown]( Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). ```html <section data-markdown> <textarea data-template> ## Page title A paragraph with some text and a [link]( </textarea> </section> ``` #### External Markdown You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newli