forked from bnjmnt4n/reveal-code-focus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
340 lines (291 loc) · 15.8 KB
/
index.html
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal-code-focus demo</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="node_modules/reveal.js/css/reveal.css">
<link rel="stylesheet" href="node_modules/reveal.js/css/theme/solarized.css">
<link rel="stylesheet" href="node_modules/reveal.js/lib/css/zenburn.css">
<style>
.reveal .slides section .fragment.current-only {
opacity: 1;
visibility: visible;
display: none;
}
.reveal .slides section .fragment.current-only.current-fragment {
display: block;
}
/* Solarized Light theme */
.line { display: block; }
.line.focus { background: #fdf6e3; color: #657b83; }
.line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }
.line.focus .hljs-keyword, .line.focus .hljs-selector-tag, .line.focus .hljs-addition { color: #859900; }
.line.focus .hljs-number, .line.focus .hljs-string, .line.focus .hljs-meta .hljs-meta-string, .line.focus .hljs-literal, .line.focus .hljs-doctag, .line.focus .hljs-regexp { color: #2aa198; }
.line.focus .hljs-title, .line.focus .hljs-section, .line.focus .hljs-name, .line.focus .hljs-selector-id, .line.focus .hljs-selector-class { color: #268bd2; }
.line.focus .hljs-attribute, .line.focus .hljs-attr, .line.focus .hljs-variable, .line.focus .hljs-template-variable, .line.focus .hljs-class .hljs-title, .line.focus .hljs-type { color: #b58900; }
.line.focus .hljs-symbol, .line.focus .hljs-bullet, .line.focus .hljs-subst, .line.focus .hljs-meta, .line.focus .hljs-meta .hljs-keyword, .line.focus .hljs-selector-attr, .line.focus .hljs-selector-pseudo, .line.focus .hljs-link { color: #cb4b16; }
.line.focus .hljs-built_in, .line.focus .hljs-deletion { color: #dc322f; }
.line.focus .hljs-formula { background: #eee8d5; }
.line.focus .hljs-emphasis { font-style: italic; }
.line.focus .hljs-strong { font-weight: bold; }
.yellow-slide .line.focus:nth-child(2) { background: yellow; }
</style>
</head>
<body>
<div class="reveal"><div class="slides">
<section id="reveal-code-focus" data-markdown>
# reveal-code-focus
A [Reveal.js](https://github.com/hakimel/reveal.js) plugin that allows focusing
on specific lines of code blocks.
</section>
<section>
<section id="installation" data-markdown>
## Installation
</section>
<section data-markdown>
### Using [npm](https://www.npmjs.com/)
```bash
$ npm install --save reveal-code-focus
```
</section>
<section data-markdown>
### Using [Bower](http://bower.io/)
```bash
$ bower install --save reveal-code-focus
```
</section>
</section>
<section>
<section id="usage" data-markdown>
## Usage
</section>
<section data-markdown><script type="text/template">
### Dependencies
```js
Reveal.initialize({
// Include other options…
dependencies: [
// Include other dependencies…
{ src: 'path/to/highlight.js' },
{
src: 'node_modules/reveal-code-focus/reveal-code-focus.js',
async: true,
callback: function() {
RevealCodeFocus();
}
}
]
});
```
<span class="fragment" data-code-focus="5">Note that the `highlight.js` file mentioned is not the [Reveal.js plugin](https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/highlight.js), but the actual [`highlight.js` library](https://highlightjs.org/).</span>
</script></section>
<section data-markdown><script type="text/template">
### Usage
```html
<section>
<pre><code>
// Useless comment.
alert('hi');
</pre></code>
<p class="fragment" data-code-focus="1">
This focuses on the comment.
</p>
<p class="fragment" data-code-focus="1-2">
Another fragment.
</p>
</section>
```
<span class="fragment current-only" data-code-focus="1-12">This section is a slide.</span>
<span class="fragment current-only" data-code-focus="2-5">This will be highlighted by `highlight.js`.</span>
<span class="fragment current-only" data-code-focus="6-8">This fragment focuses on the first line.</span>
<span class="fragment current-only" data-code-focus="9-11">This fragment focuses on lines 1 and 2.</span>
<span class="fragment current-only" data-code-focus="1-12">See the next slide for a demo with the contents of this code block.</span>
</script></section>
<section data-markdown><script type="text/template">
### Demo
```js
// Useless comment.
alert('hi');
```
<p class="fragment" data-code-focus="1">This focuses on the comment.</p>
<p class="fragment" data-code-focus="1-2">Another fragment.</p>
</script></section>
<section data-markdown style="text-align: left"><script type="text/template">
### How it works
`reveal-code-focus` associates the lines of code to focus on with fragments.
When the fragments are displayed, `reveal-code-focus` will focus on these lines.
Each line of code is wrapped in a `<span>` element with a class of `"line"`.
When lines are focused on, they will also have the `"focus"` class.
Use the `.line.focus` selector for custom styling.
</script></section>
<section data-markdown>
### Gotchas
* Ensure that the actual [`highlight.js` library](https://highlightjs.org/), and
not the [Reveal.js plugin](https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/highlight.js)
is loaded.
* **Do not** initialize code highlighting with `hljs.initHighlightingOnLoad()`.
</section>
<section data-state="yellow-slide" data-markdown><script type="text/template">
### Styling
```css
.line { display: block; }
.line.focus { background: yellow; }
/* include a highlight.js theme and modify it */
/* … */
/* on focused: switch to solarized light */
.line.focus { background: #fdf6e3; color: #657b83; }
.line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }
/* … */
```
<span class="fragment current-only" data-code-focus="1">The most important style is to ensure that lines are set to `display: block`, so that different lines will not be rendered on the same line.</span>
<span class="fragment current-only" data-code-focus="2">To style your code you might first want to set a different background or text colour when highlighted.</span>
<span class="fragment current-only" data-code-focus="3-4">You can also use a specific theme by default…</span>
<span class="fragment current-only" data-code-focus="5-8">…then switch to a different one when lines are focused on.</span>
</script></section>
<section data-markdown><script type="text/template">
### Multiple code blocks
```js
// This also works with multiple code blocks
```
```html
<span class="fragment"
data-code-focus="1-5"
data-code-block="2">
</span>
```
<span class="fragment current-only" data-code-focus="1">To focus on lines on slides with multiple code blocks…</span>
<span class="fragment current-only" data-code-focus="3" data-code-block="2">…add the `data-code-block` attribute to your fragment.</span>
<span class="fragment current-only" data-code-focus="1">By default, all fragments will focus on the first code block, unless otherwise specified.</span>
</script></section>
</section>
<section>
<section id="extras" data-markdown>
## Extras
</section>
<section data-markdown><script type="text/template">
### Configuration
```js
// Configure `reveal-code-focus`.
RevealCodeFocus({
scrollToFocused: false // default: true
});
```
<p class="fragment current-only" data-code-focus="1-4">`reveal-code-focus` can be configured by passing in an `options` object.</p>
<p class="fragment current-only" data-code-focus="3">`scrollToFocused` automatically scrolls `<code>` elements so that the focused code is centered. This is enabled by default.</p>
</script></section>
<section data-markdown><script type="text/template">
### Demo of `scrollToFocused`
```js
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate
// lectus vel laoreet faucibus. Etiam suscipit erat a porta consectetur.
// Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
// inceptos himenaeos. Nullam aliquet luctus orci sed molestie. Vivamus a
// tristique eros. Aenean et quam nec elit lacinia pulvinar eget quis dui.
// Morbi pharetra elit vel metus lobortis bibendum. Vestibulum sit amet
// fringilla turpis, in condimentum arcu. In interdum porttitor elit, ac
// ultricies odio vestibulum ut. Nam non erat tincidunt, ultrices nulla
// eget, sagittis nisi. Morbi sed est commodo nulla elementum iaculis.
// Integer ut mi risus. Sed vitae placerat magna. Interdum et malesuada
// fames ac ante ipsum primis in faucibus.
// Proin laoreet est vitae mattis luctus. Nunc finibus, massa at commodo
// vehicula, ipsum nibh cursus augue, eu facilisis nibh metus non nibh.
// Sed vel aliquet eros. Praesent nibh orci, aliquet quis ligula in,
// vulputate mollis metus. In finibus tortor sed sapien viverra lobortis.
// Nunc ornare sem non elit euismod, quis lobortis purus euismod. Aliquam
// erat volutpat. Ut ornare semper neque, a laoreet turpis vestibulum non.
// Fusce in nibh vitae lorem gravida sagittis sed vitae eros. Nam sagittis
// dapibus mi et fermentum. Nunc arcu dui, rhoncus et venenatis ut, placerat
// vel quam. Integer faucibus ex metus, eleifend luctus nisl vehicula ut.
// Donec eu turpis a justo molestie condimentum. Curabitur fermentum eros ut
// metus iaculis pulvinar. Aenean finibus rutrum auctor. Cum sociis natoque
// penatibus et magnis dis parturient montes, nascetur ridiculus mus.
// Vestibulum fermentum dapibus leo eget efficitur. Sed et sem rhoncus,
// viverra odio nec, luctus sapien. Vestibulum semper ac ante ut efficitur.
// Ut vitae velit ac leo elementum aliquam ut in neque. Praesent vel massa
// vestibulum est bibendum eleifend et nec est. Vestibulum venenatis metus
// sed sapien malesuada, eget tincidunt ante dapibus. Interdum et malesuada
// fames ac ante ipsum primis in faucibus. Morbi sed iaculis dui. Nam
// placerat sed nisl et condimentum. Sed et venenatis elit. Fusce sodales
// consectetur maximus. Vestibulum venenatis dolor sed erat hendrerit, sed
// ullamcorper velit porta. Donec venenatis leo nunc, eget tempor odio
// sodales sed. Vivamus viverra dolor vel fermentum facilisis.
// Cras sit amet eleifend nisl, non egestas magna. Etiam vehicula, purus a
// facilisis fermentum, urna orci fermentum enim, ac finibus nibh nibh ac
// nulla. Donec non orci sed diam pretium lobortis. Quisque sapien justo,
// vulputate nec cursus at, dignissim vitae lacus. Cras elementum molestie
// augue, non fringilla massa efficitur id. Donec mattis arcu felis, ut
// vehicula diam auctor id. Aliquam nisl ligula, feugiat at bibendum sed,
// viverra ac est. Proin iaculis purus eget dapibus dapibus. Aliquam tempor
// vehicula mi, a mattis massa porttitor id. Nam in eleifend tortor.
// Pellentesque mattis felis a mi molestie mattis. Aenean ligula neque,
// efficitur id augue id, feugiat suscipit dui. Proin vel lacus in enim
// facilisis venenatis nec pulvinar justo. Nulla gravida feugiat facilisis.
// Mauris sollicitudin leo non urna dapibus efficitur. Pellentesque habitant
// morbi tristique senectus et netus et malesuada fames ac turpis egestas.
```
<p class="fragment current-only" data-code-focus="1">Some generated text.</p>
<p class="fragment current-only" data-code-focus="20">Let’s scroll to line 20.</p>
<p class="fragment current-only" data-code-focus="1-11">Focus on this paragraph!</p>
</script></section>
<section data-markdown><script type="text/template">
### `data-trim`
```html
<pre><code data-trim>
.line { display: block; }
.line.focus { background: yellow; }
</code></pre>
```
The `data-trim` attribute can be used to indicate that code blocks should have whitespace trimmed from their front and back.
<span class="fragment" data-code-focus="1">Simply set the `data-trim` attribute on the `<code>` element</span>
<span class="fragment" data-code-focus="2-5">of any code blocks</span>
<span class="fragment" data-code-focus="3-4">to have its whitespace trimmed.</span>
</script></section>
<section data-markdown><script type="text/template">
### Custom Fragments
```html
<style>
.reveal .slides section .fragment.current-only {
opacity: 1;
visibility: visible;
display: none;
}
.reveal .slides section .fragment.current-only.current-fragment {
display: block;
}
</style>
<p class="fragment current-only">Some text</p>
<p class="fragment current-only" data-code-focus="1">with highlighting</p>
```
<span class="fragment current-only">If you want to display only the current fragments,</span>
<span class="fragment current-only">without leaving space in the slide for the hidden fragments,</span>
<span class="fragment current-only" data-code-focus="1-10">use these styles…</span>
<span class="fragment current-only" data-code-focus="11-12">…and the `"current-only"` class.</span>
</script></section>
</section>
<section data-markdown>
[reveal-code-focus on GitHub](https://github.com/bnjmnt4n/reveal-code-focus)
</section>
</div></div>
<script src="node_modules/reveal.js/lib/js/head.min.js"></script>
<script src="node_modules/reveal.js/js/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide',
dependencies: [
{ src: 'node_modules/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'node_modules/reveal.js/plugin/markdown/marked.js' },
{ src: 'node_modules/reveal.js/plugin/markdown/markdown.js' },
{ src: 'vendor/highlight.js/highlight.pack.js' },
{ src: 'reveal-code-focus.js', callback: function() { RevealCodeFocus(); } }
]
});
</script>
</body>
</html>