Revealjs

发表于 分类于 评论数： 阅读次数：

Revealjs 是一个只做 Web 幻灯片的工具。本文分为两部分，一部分为 vscode-reveal，已经足够日常使用。另一部分原生 Revealjs，可以进一步阅读。

vscode-reveal

VSCode extension evilz.vscode-reveal简化了 Revealjs(说简化可能不准确，但是从 vscode-reveal 了解起来轻松很多)，只需要一个 md 文件就可以生成一个 slides。

See my revealjs-template for live demo/guide.

Tips

  • Slides can be nested inside of each other as Vertical Slides. Use the Space key to navigate through all slides.
  • Press ESC to enter the slide overview.
  • Alt + Click: Zoom in. Repeat to zoom back out.
  • Press the S key to show speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.
  • Press . on your keyboard to pause the presentation.
  • Press B or click on the pencil button to open and close your chalkboard.
    • Click the left mouse button to write on the chalkboard
    • Click the right mouse button to wipe the chalkboard
    • Click the DEL key to clear the chalkboard, for MacOS, fn + del
  • By pressing C or clicking the button you can start and stop the notes taking mode allowing you to write comments and notes directly on the slide.
    • Click the left mouse button to write on the chalkboard
    • Click the right mouse button to wipe the chalkboard
    • Click the DEL key to clear the chalkboard, for MacOS, fn + del
  • Press M to open or close the menu.
  • CTRL + SHIFT + F handles finding a text string anywhere in the slides.

Revealjs

Installation

  1. Download the latest version of reveal.js from https://github.com/hakimel/reveal.js/releases
  2. Unzip and replace the example contents in index.html with your own
  3. Open index.html in a browser to view it

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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:

1
2
3
4
5
6
7
8
9
<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).

1
2
3
4
5
6
7
8
<section data-markdown>
	<textarea data-template>
		## Page title

		A paragraph with some text and a [link](http://hakim.se).
	</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 newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide’s speaker notes (defaults to notes?:, so it will match both “note:” and “notes:”). The data-charset attribute is optional and specifies which charset to use when loading the external file.

When used locally, this feature requires that reveal.js runs from a local web server. The following example customises all available options:

1
2
3
4
5
6
7
8
9
10
11
12
<section
	data-markdown="example.md"
	data-separator="^\n\n\n"
	data-separator-vertical="^\n\n"
	data-separator-notes="^Note:"
	data-charset="iso-8859-15"
>
	<!--
        Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
        For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
    -->
</section>

Element Attributes

Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.

1
2
3
4
5
6
<section data-markdown>
	<script type="text/template">
		- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
		- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
	</script>
</section>

Slide Attributes

Special syntax (through HTML comments) is available for adding attributes to the slide <section> elements generated by your Markdown.

1
2
3
4
5
6
<section data-markdown>
	<script type="text/template">
		<!-- .slide: data-background="#ff0000" -->
			Markdown content
	</script>
</section>

Configuring marked

We use marked to parse Markdown. To customise marked’s rendering, you can pass in options when configuring Reveal:

1
2
3
4
5
6
7
Reveal.initialize({
	// Options which are passed into marked
	// See https://github.com/chjj/marked#options-1
	markdown: {
		smartypants: true
	}
});

Configuration

At the end of your page you need to initialize reveal by running the following code. Note that all configuration values are optional and will default to the values specified below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
Reveal.initialize({
	// Display presentation control arrows
	controls: true,

	// Help the user learn the controls by providing hints, for example by
	// bouncing the down arrow when they first encounter a vertical slide
	controlsTutorial: true,

	// Determines where controls appear, "edges" or "bottom-right"
	controlsLayout: "bottom-right",

	// Visibility rule for backwards navigation arrows; "faded", "hidden"
	// or "visible"
	controlsBackArrows: "faded",

	// Display a presentation progress bar
	progress: true,

	// Display the page number of the current slide
	slideNumber: false,

	// Push each slide change to the browser history
	history: false,

	// Enable keyboard shortcuts for navigation
	keyboard: true,

	// Enable the slide overview mode
	overview: true,

	// Vertical centering of slides
	center: true,

	// Enables touch navigation on devices with touch input
	touch: true,

	// Loop the presentation
	loop: false,

	// Change the presentation direction to be RTL
	rtl: false,

	// Randomizes the order of slides each time the presentation loads
	shuffle: false,

	// Turns fragments on and off globally
	fragments: true,

	// Flags whether to include the current fragment in the URL,
	// so that reloading brings you to the same fragment position
	fragmentInURL: false,

	// Flags if the presentation is running in an embedded mode,
	// i.e. contained within a limited portion of the screen
	embedded: false,

	// Flags if we should show a help overlay when the questionmark
	// key is pressed
	help: true,

	// Flags if speaker notes should be visible to all viewers
	showNotes: false,

	// Global override for autoplaying embedded media (video/audio/iframe)
	// - null: Media will only autoplay if data-autoplay is present
	// - true: All media will autoplay, regardless of individual setting
	// - false: No media will autoplay, regardless of individual setting
	autoPlayMedia: null,

	// Number of milliseconds between automatically proceeding to the
	// next slide, disabled when set to 0, this value can be overwritten
	// by using a data-autoslide attribute on your slides
	autoSlide: 0,

	// Stop auto-sliding after user input
	autoSlideStoppable: true,

	// Use this method for navigation when auto-sliding
	autoSlideMethod: Reveal.navigateNext,

	// Specify the average time in seconds that you think you will spend
	// presenting each slide. This is used to show a pacing timer in the
	// speaker view
	defaultTiming: 120,

	// Enable slide navigation via mouse wheel
	mouseWheel: false,

	// Hides the address bar on mobile devices
	hideAddressBar: true,

	// Opens links in an iframe preview overlay
	// Add `data-preview-link` and `data-preview-link="false"` to customise each link
	// individually
	previewLinks: false,

	// Transition style
	transition: "slide", // none/fade/slide/convex/concave/zoom

	// Transition speed
	transitionSpeed: "default", // default/fast/slow

	// Transition style for full page slide backgrounds
	backgroundTransition: "fade", // none/fade/slide/convex/concave/zoom

	// Number of slides away from the current that are visible
	viewDistance: 3,

	// Parallax background image
	parallaxBackgroundImage: "", // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

	// Parallax background size
	parallaxBackgroundSize: "", // CSS syntax, e.g. "2100px 900px"

	// Number of pixels to move the parallax background per slide
	// - Calculated automatically unless specified
	// - Set to 0 to disable movement along an axis
	parallaxBackgroundHorizontal: null,
	parallaxBackgroundVertical: null,

	// The display mode that will be used to show slides
	display: "block"
});

The configuration can be updated after initialization using the configure method:

1
2
3
4
5
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });
感谢支持，让我安静的做蚂蚁梦！