-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
169 lines (152 loc) · 10.2 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A brief demonstration of minislides</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-ThssJ7YtjywV52Gj4JE/1SQEDoMEckXyhkFVwaf4nDSm5OBlXeedVYjuuUd0Yua+" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-Bi8OWqMXO1ta+a4EPkZv7bYGIes7C3krGSZoTGNTAnAn5eYQc7IIXrJ/7ck1drAi" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
<style type="text/css" media="all">
@import url('https://fonts.googleapis.com/css2?family=Gentium+Basic:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
:root{--background-light: #fdfdfd;--text-dark: #101010;--blue: #4271ae;--green: #718c00;--orange: #f5871f;--gray-light: #bbbbbb;}*{margin: 0;padding: 0;}body{background: gray;}.slides section{position: relative;box-sizing: border-box;background: var(--background-light);margin: 16px auto 8px auto;padding: 2rem;height: calc(100vh - 16px);width: calc((100vh - 16px) * 1.414);max-width: calc(100vw - 16px);display: flex;flex-direction: column;justify-content: center;align-items: center;font-family: 'Gentium Basic', serif;}.slides section:nth-child(1){margin-top: 8px;}@media (max-width: 600px), (max-height: 500px) {.slides section { height: auto;min-height: calc(100vh - 16px);}}.slides.numbered{counter-reset: section;}.slides.numbered section::after{position: absolute;bottom: 1rem;right: 1.5rem;counter-increment: section;content: counter(section);font-size: 1rem;color: var(--text-dark);opacity: 0.7;}.slides.numbered section:nth-child(1)::after{counter-increment: none;content: '';}@media print {body { background: var(--background-light);} .slides section{margin: 0 !important;height: 100vh !important;width: 100% !important;page-break-after: always;page-break-inside: avoid;}}.slides h1,.slides h2,.slides h3,.slides p,.slides ul,.slides ol,.slides blockquote{text-align: left;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;width: 70%;max-width: 70%;color: var(--text-dark);}@media (max-width: 500px) {.slides h1, .slides h2, .slides h3, .slides p, .slides ul, .slides ol, .slides blockquote { width: 90%;max-width: 90%;}}.slides.centered h1, .slides section.centered h1,.slides.centered h2, .slides section.centered h2,.slides.centered h3, .slides section.centered h3,.slides.centered p, .slides section.centered p,.slides.centered ul, .slides section.centered ul,.slides.centered ol, .slides section.centered ol,.slides.centered blockquote, .slides section.centered blockquote{text-align: center;width: auto;}.slides section .centered{text-align: center;}.slides h1{padding: 0 0 1rem 0;font-size: 3rem;opacity: 0.85;box-shadow: inset 0 -3px var(--orange);}.slides .subtitle{margin: 1rem 0;font-size: 1.5rem;opacity: 0.7;}.slides .author{margin: 4rem 0 0 0;font-size: 1.9rem;font-style: italic;}.slides .affiliation{margin: 0.1rem 0;font-style: italic;opacity: 0.7;}.slides h2{font-size: 2rem;margin: 1.5rem 0;}.slides h3{font-size: 1.7rem;margin: 1rem 0 0.5rem 0;}.slides p{font-size: 1.5rem;margin: 0.5rem 0;line-height: 1.4em;}.slides ul,.slides ol{font-size: 1.5rem;margin: 0.3rem 0;line-height: 1.2em;}.slides blockquote{margin: 1rem 0;box-shadow: inset 8px 0 var(--gray-light);}.slides blockquote p{width: auto;padding-left: 6ch;opacity: 0.9;font-style: italic;}.slides i,.slides em{color: var(--green);}.slides b,.slides strong{color: var(--orange);}.slides a{text-decoration: none;color: var(--blue);}.slides code,.slides pre{font-family: 'Fira Code', monospace;font-size: 1.2rem;background: none;}.slides p code,.slides ul code,.slides ol code{color: var(--blue);}.slides pre{text-align: left;max-width: 100%;}.slides pre code{margin: 1rem 0;overflow-x: scroll;}.slides img{max-width: 70%;max-height: 80%;margin: 1rem 0;}.slides img.large{max-width: 100%;max-height: 100%;}.slides table{font-size: 1.5rem;margin: 1rem 0;overflow: scroll;border-collapse: collapse;}.slides th,.slides td{padding: 0.2rem 0.5rem;}.slides thead{border-bottom: 2px solid var(--text-dark);}.katex{font-size: 1.07em !important;}
</style>
</head>
<body>
<div class="slides numbered">
<section>
<h1>A brief demonstration of minislides</h1>
<p class="subtitle">Simple presentations using HTML/CSS</p>
<p class="author">Satvik Saha</p>
<p class="affiliation">Indian Institute of Science Education and Research, Kolkata</p>
</section>
<section>
<h2>Basic text</h2>
<p>This is a sentence.</p>
<p>This is another sentence, with <strong>bold</strong> and <em>italics</em>.</p>
<blockquote>
<p>This is a blockquote!</p>
</blockquote>
<p><del>This sentence has been struck off.</del></p>
<h3>Subheading</h3>
<p>This is a <a href="https://github.com/sahasatvik/minislides">hyperlink</a> to the GitHub repository of this project.</p>
</section>
<section>
<h2>Displaying code</h2>
<p>This slide contains a block of python code.</p>
<pre><code class="language-python">import marko
with open("markdown.md", "r") as f:
text = f.read()
html = marko.convert(text)
</code></pre>
<p>The <code>with open(...) as f</code> construct ensures that the file is closed after reading from it.</p>
</section>
<section>
<h2>Math expressions</h2>
<p>This slide demonstrates the use of math expressions, supported by $\KaTeX$.</p>
<h3>Cauchy's Integral Formula</h3>
<p>Let $U$ be an open subset of the complex plane, and let $D$ be a closed disk completely contained in $U$.
Let $f$ be a holomorphic function on $U$, and let $\gamma$ be the circle oriented counter-clockwise forming the boundary of $D$.
Then for every $z_0$ in the interior of $D$, \[
f(z_0) = \frac{1}{2\pi i}\oint_\gamma \frac{f(z)}{z - z_0}\:dz.
\]</p>
</section>
<section>
<h2>Centering</h2>
<p>You can use the <code>center</code> keyword <em>immediately</em> after beginning a slide in your markdown to center all content within it, like in the "Images" slide.</p>
<pre><code class="language-markdown">---
center
# Centered slide
Everything is centered here.
</code></pre>
<p>Alternatively, use raw tags with the <code>centered</code> class to center individual headings, paragraphs, and lists within a slide.</p>
<pre><code class="language-html"><p class="centered">This is centered text</p>
</code></pre>
<p>Note that markdown syntax does not work within raw HTML tags!</p>
</section>
<section>
<h2>Lists</h2>
<p>This is an unordered list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<br>
<p>This is an ordered list</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</section>
<section>
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>Left aligned</th>
<th align="center">Centered</th>
<th align="right">Right aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td align="center">Item 2</td>
<td align="right">Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td align="center">Item 5</td>
<td align="right">Item 4</td>
</tr>
<tr>
<td>Item 5</td>
<td align="center">Item 6</td>
<td align="right">Item 7</td>
</tr>
</tbody></table></section>
<section class='centered'>
<h2>Images</h2>
<p>This is a random image from <a href="https://source.unsplash.com">unsplash</a>.</p>
<img src="https://source.unsplash.com/featured/?nature" alt="Nature" />
</section>
<section>
<p>The next slide shows a large image. Do this by using a raw image tag with the <code>large</code> class.</p>
<pre><code class="language-html"><img class="large"
src="https://source.unsplash.com/featured/?space"
alt="This is a large image">
</code></pre>
</section>
<section>
<img class="large" src="https://source.unsplash.com/featured/?space" alt="">
</section>
</div>
<script type="text/javascript" charset="utf-8">
hljs.highlightAll();
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
throwOnError : false
});
});
var slides=document.getElementsByTagName("section");var totalSlides=slides.length;var prev=[37,75,72];var next=[39,74,76,13];var start=[48];var end=[57];function percentageVisible(element){const viewHeight=(window.innerHeight||document.documentElement.clientHeight);const bounds=element.getBoundingClientRect();if(bounds.bottom<0||bounds.top>viewHeight){return 0;}
if(bounds.top<0&&bounds.bottom>viewHeight){return bounds.height*100/viewHeight;}else if(bounds.top<0){return bounds.bottom*100/viewHeight;}else if(bounds.bottom>viewHeight){return(viewHeight-bounds.top)*100/viewHeight;}
return 100;}
function getCurrentSlide(){var index=0;var maxPercent=0;for(var i=0;i<totalSlides;i++){let p=percentageVisible(slides[i]);if(p>maxPercent){index=i;maxPercent=p;}}
return index;}
function navigate(nextSlide){let target=nextSlide;if(nextSlide<0){target=0;}else if(nextSlide>=totalSlides){target=totalSlides-1;}
window.scrollTo(0,slides[target].offsetTop-8);}
document.addEventListener("keydown",event=>{let code=event.keyCode;let currentSlide=getCurrentSlide();if(prev.includes(code)){navigate(currentSlide-1);}else if(next.includes(code)){navigate(currentSlide+1);}else if(start.includes(code)){navigate(0);}else if(end.includes(code)){navigate(totalSlides-1);}});
</script>
</body>
</html>