Skip to content

Commit d39f1fc

Browse files
committed
Update to make slide mode support all extra syntax and change it's rendering engine
1 parent 160b51d commit d39f1fc

7 files changed

Lines changed: 376 additions & 87 deletions

File tree

lib/response.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,8 @@ var md = require('reveal.js/plugin/markdown/markdown');
2222

2323
//reveal.js
2424
var slideOptions = {
25-
template: fs.readFileSync(config.slidepath).toString(),
26-
theme: 'css/theme/black.css',
27-
highlightTheme: 'zenburn',
2825
separator: '^(\r\n?|\n)---(\r\n?|\n)$',
29-
verticalSeparator: '^(\r\n?|\n)----(\r\n?|\n)$',
30-
revealOptions: {}
26+
verticalSeparator: '^(\r\n?|\n)----(\r\n?|\n)$'
3127
};
3228

3329
//public
@@ -544,11 +540,9 @@ function showPublishSlide(req, res, next) {
544540
url: origin,
545541
title: meta.title || title,
546542
description: meta.description,
547-
theme: slideOptions.theme,
548-
highlightTheme: slideOptions.highlightTheme,
549543
slides: slides,
550-
options: JSON.stringify(slideOptions.revealOptions, null, 2),
551-
GA: meta.GA
544+
GA: meta.GA,
545+
useCDN: config.usecdn
552546
};
553547
return renderPublishSlide(data, res);
554548
}).catch(function (err) {

public/css/extra.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@
5050
width: auto;
5151
top: 50%;
5252
left: 50%;
53-
margin-top: -40px;
54-
margin-left: -40px;
53+
transform: translate(-50%, -50%);
5554
color: white;
5655
opacity: 0.3;
5756
-webkit-transition: opacity 0.2s; /* Safari */

public/css/html.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/css/slide.css

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,241 @@
66
.reveal h5,
77
.reveal h6 {
88
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
9+
text-transform: none;
910
}
11+
1012
.reveal pre,
1113
.reveal code {
1214
font-family: "Source Code Pro", Consolas, monaco, "Microsoft JhengHei", Meiryo, "MS ゴシック", "MS Gothic", monospace;
1315
letter-spacing: 0.025em;
1416
line-height: 1.25;
1517
-webkit-overflow-scrolling: touch;
1618
}
19+
20+
.vimeo,
21+
.youtube {
22+
position: relative !important;
23+
cursor: pointer;
24+
display: table;
25+
width: 100% !important;
26+
text-align: center;
27+
background-position: center center;
28+
background-repeat: no-repeat;
29+
background-size: contain;
30+
background-color: black;
31+
overflow: hidden;
32+
font-size: 24px !important;
33+
}
34+
35+
36+
/* youtube always use 16:9 aspect ratio video */
37+
38+
.vimeo,
39+
.youtube {
40+
position: relative;
41+
width: 100%;
42+
padding-bottom: 56.25% !important;
43+
}
44+
45+
.vimeo > img,
46+
.youtube > img {
47+
max-width: 100%;
48+
max-height: 100%;
49+
margin: 0 !important;
50+
border: 0 !important;
51+
width: 100%;
52+
height: 100%;
53+
object-fit: cover;
54+
position: absolute;
55+
top: 0;
56+
left: 0;
57+
z-index: 0;
58+
}
59+
60+
.vimeo > iframe,
61+
.youtube > iframe {
62+
max-width: 100%;
63+
max-height: 100%;
64+
}
65+
66+
.slideshare .inner,
67+
.speakerdeck .inner {
68+
padding-bottom: 62% !important;
69+
}
70+
71+
.pdfobject {
72+
height: 85vh !important;
73+
}
74+
75+
.task-list-item-checkbox {
76+
font-size: inherit;
77+
height: 1em;
78+
margin: 0.2em 0 0.2em -0.65em !important;
79+
}
80+
81+
pre code .wrapper {
82+
display: -webkit-inline-flex;
83+
display: -moz-inline-flex;
84+
display: -ms-inline-flex;
85+
display: -o-inline-flex;
86+
display: inline-flex;
87+
}
88+
89+
pre code .gutter {
90+
float: left;
91+
overflow: hidden;
92+
-webkit-user-select: none;
93+
user-select: none;
94+
}
95+
96+
pre code .gutter.linenumber {
97+
text-align: right;
98+
position: relative;
99+
display: inline-block;
100+
cursor: default;
101+
z-index: 4;
102+
padding: 0 8px 0 0;
103+
min-width: 20px;
104+
box-sizing: content-box;
105+
color: #afafaf !important;
106+
border-right: 3px solid #6ce26c !important;
107+
}
108+
109+
pre code .gutter.linenumber > span:before {
110+
content: attr(data-linenumber);
111+
}
112+
113+
pre code .code {
114+
float: left;
115+
margin: 0 0 0 16px;
116+
}
117+
118+
.gist .line-numbers {
119+
border-left: none;
120+
border-top: none;
121+
border-bottom: none;
122+
}
123+
124+
.gist .line-data {
125+
border: none;
126+
}
127+
128+
.gist table {
129+
border-spacing: 0;
130+
border-collapse: inherit !important;
131+
}
132+
133+
code[data-gist-id] {
134+
background: none;
135+
padding: 0;
136+
}
137+
138+
code[data-gist-id]:before {
139+
content: ''
140+
}
141+
142+
code[data-gist-id]:after {
143+
content: ''
144+
}
145+
146+
.alert {
147+
border-radius: 4px;
148+
}
149+
150+
.alert h4 {
151+
margin-top: 0;
152+
color: inherit;
153+
}
154+
155+
.alert > p {
156+
padding: 5px !important;
157+
}
158+
159+
.alert-success {
160+
color: #3c763d;
161+
background-color: #dff0d8;
162+
border-color: #d6e9c6;
163+
}
164+
165+
.alert-success hr {
166+
border-top-color: #c9e2b3;
167+
}
168+
169+
.alert-success .alert-link {
170+
color: #2b542c;
171+
}
172+
173+
.alert-info {
174+
color: #31708f;
175+
background-color: #d9edf7;
176+
border-color: #bce8f1;
177+
}
178+
179+
.alert-info hr {
180+
border-top-color: #a6e1ec;
181+
}
182+
183+
.alert-info .alert-link {
184+
color: #245269;
185+
}
186+
187+
.alert-warning {
188+
color: #8a6d3b;
189+
background-color: #fcf8e3;
190+
border-color: #faebcc;
191+
}
192+
193+
.alert-warning hr {
194+
border-top-color: #f7e1b5;
195+
}
196+
197+
.alert-warning .alert-link {
198+
color: #66512c;
199+
}
200+
201+
.alert-danger {
202+
color: #a94442;
203+
background-color: #f2dede;
204+
border-color: #ebccd1;
205+
}
206+
207+
.alert-danger hr {
208+
border-top-color: #e4b9c0;
209+
}
210+
211+
.alert-danger .alert-link {
212+
color: #843534;
213+
}
214+
215+
pre.flow-chart,
216+
pre.sequence-diagram,
217+
pre.graphviz,
218+
pre.mermaid {
219+
text-align: center;
220+
background-color: white;
221+
border-radius: 0;
222+
white-space: inherit;
223+
}
224+
225+
pre.flow-chart > code,
226+
pre.sequence-diagram > code,
227+
pre.graphviz > code,
228+
pre.mermaid > code {
229+
text-align: left;
230+
}
231+
232+
pre.flow-chart > svg,
233+
pre.sequence-diagram > svg,
234+
pre.graphviz > svg,
235+
pre.mermaid > svg {
236+
max-width: 100%;
237+
height: 100%;
238+
}
239+
240+
.emoji {
241+
margin: 0 !important;
242+
background: transparent !important;
243+
border: none !important;
244+
box-shadow: none !important;
245+
margin-bottom: -.25em !important;
246+
}

public/js/reveal-markdown.js

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,15 @@
55
*/
66
(function( root, factory ) {
77
if( typeof exports === 'object' ) {
8-
module.exports = factory( require( './marked' ) );
8+
module.exports = factory();
99
}
1010
else {
1111
// Browser globals (root is window)
12-
root.RevealMarkdown = factory( root.marked );
12+
root.RevealMarkdown = factory();
1313
root.RevealMarkdown.initialize();
1414
}
15-
}( this, function( marked ) {
16-
17-
if( typeof marked === 'undefined' ) {
18-
throw 'The reveal.js Markdown plugin requires marked to be loaded';
19-
}
20-
21-
if( typeof hljs !== 'undefined' ) {
22-
marked.setOptions({
23-
highlight: function( lang, code ) {
24-
return hljs.highlightAuto( lang, code ).value;
25-
}
26-
});
27-
}
28-
15+
}( this, function() {
16+
2917
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
3018
DEFAULT_NOTES_SEPARATOR = 'note:',
3119
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
@@ -364,10 +352,10 @@
364352
var notes = section.querySelector( 'aside.notes' );
365353
var markdown = getMarkdownFromSlide( section );
366354

367-
var rendered = marked( markdown );
368-
rendered = preventXSS(rendered);
369-
370-
section.innerHTML = rendered;
355+
var rendered = md.render(markdown);
356+
rendered = preventXSS(rendered);
357+
var result = postProcess(rendered);
358+
section.innerHTML = result[0].outerHTML;
371359
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
372360
section.parentNode.getAttribute( 'data-element-attributes' ) ||
373361
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,

public/js/slide.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
var body = $(".slides").html();
2+
$(".slides").html(S(body).unescapeHTML().s);
3+
4+
function extend() {
5+
var target = {};
6+
for (var i = 0; i < arguments.length; i++) {
7+
var source = arguments[i];
8+
for (var key in source) {
9+
if (source.hasOwnProperty(key)) {
10+
target[key] = source[key];
11+
}
12+
}
13+
}
14+
return target;
15+
}
16+
17+
// Optional libraries used to extend on reveal.js
18+
var deps = [{
19+
src: serverurl + '/vendor/reveal.js/lib/js/classList.js',
20+
condition: function() {
21+
return !document.body.classList;
22+
}
23+
}, {
24+
src: serverurl + '/js/reveal-markdown.js',
25+
condition: function() {
26+
return !!document.querySelector('[data-markdown]');
27+
}
28+
}, {
29+
src: serverurl + '/vendor/reveal.js/plugin/notes/notes.js',
30+
async: true,
31+
condition: function() {
32+
return !!document.body.classList;
33+
}
34+
}];
35+
36+
// default options to init reveal.js
37+
var defaultOptions = {
38+
controls: true,
39+
progress: true,
40+
slideNumber: true,
41+
history: true,
42+
center: true,
43+
transition: 'none',
44+
dependencies: deps
45+
};
46+
47+
// options from URL query string
48+
var queryOptions = Reveal.getQueryHash() || {};
49+
50+
var options = extend(defaultOptions, queryOptions);
51+
Reveal.initialize(options);
52+
53+
viewAjaxCallback = function () {
54+
Reveal.layout();
55+
};
56+
57+
function renderSlide() {
58+
var title = document.title;
59+
finishView($(event.currentSlide));
60+
document.title = title;
61+
Reveal.layout();
62+
}
63+
64+
Reveal.addEventListener('ready', renderSlide);
65+
Reveal.addEventListener('slidechanged', renderSlide);

0 commit comments

Comments
 (0)