examples/markdown.html - master - githubmirror/reveal.js

examples/markdown.html
175 строк4 KB
Hakim El Hattab
fix math rendering in md examples
26 фев 2026, 00:02
26 фев 2026, 00:02f20893c
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>reveal.js - Markdown Example</title>

		<link rel="stylesheet" href="../dist/reveal.css" />
		<link rel="stylesheet" href="../dist/theme/white.css" id="theme" />

		<link rel="stylesheet" href="../dist/plugin/highlight/monokai.css" />
	</head>

	<body>
		<div class="reveal">
			<div class="slides">
				<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
				<section
					data-markdown="markdown.md"
					data-separator="^\n\n\n"
					data-separator-vertical="^\n\n"
				></section>

				<!-- Slides are separated by three dashes (the default) -->
				<section data-markdown>
					<script type="text/template">
						## Demo 1
						Slide 1
						---
						## Demo 1
						Slide 2
						---
						## Demo 1
						Slide 3
					</script>
				</section>

				<!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
				<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
					<script type="text/template">
						## Demo 2
						Slide 1.1

						--

						## Demo 2
						Slide 1.2

						---

						## Demo 2
						Slide 2
					</script>
				</section>

				<!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
				<section data-markdown data-separator="$x">
					<script type="text/template">
						A

						---

						B

						---

						C
					</script>
				</section>

				<!-- Slide attributes -->
				<section data-markdown>
					<script type="text/template">
						<!-- .slide: data-background="#000000" -->
						## Slide attributes
					</script>
				</section>

				<!-- Element attributes -->
				<section data-markdown>
					<script type="text/template">
						## Element attributes
						- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
						- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
					</script>
				</section>

				<!-- Code -->
				<section data-markdown>
					<script type="text/template">
						```php [1|3-5]
						public function foo()
						{
						    $foo = array(
						        'bar' => 'bar'
						    )
						}
						```
					</script>
				</section>

				<!-- add optional line count offset, in this case 287 -->
				<section data-markdown>
					<script type="text/template">
						## echo.c

						```c [287: 2|4,6]
						/* All of the options in this arg are valid, so handle them. */
						p = arg + 1;
						do {
						    if (*p == 'n')
						        nflag = 0;
						    if (*p == 'e')
						        eflag = '\\';
						} while (*++p);
						```
						[source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
					</script>
				</section>

				<!-- Images -->
				<section data-markdown>
					<script type="text/template">
						![Sample image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
					</script>
				</section>

				<!-- Math, prettier-ignore -->
				<!-- prettier-ignore -->
				<section data-markdown>
					## The Lorenz Equations
					$$\begin{aligned}
					\dot{x} &amp; = \sigma(y-x) \\
					\dot{y} &amp; = \rho x - y - xz \\
					\dot{z} &amp; = -\beta z + xy
					\end{aligned}$$
				</section>

				<!-- Smartypants -->
				<section data-markdown>
					Turn quotation marks into "curly" 'quotes' with smartypants.
					```javascript
					Reveal.initialize({
						markdown: {
							smartypants: true,
						},
					});
					```
				</section>
			</div>
		</div>

		<script src="../dist/reveal.js"></script>
		<script src="../dist/reveal.js"></script>
		<script src="../dist/plugin/markdown.js"></script>
		<script src="../dist/plugin/highlight.js"></script>
		<script src="../dist/plugin/notes.js"></script>
		<script src="../dist/plugin/math.js"></script>

		<script>
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				markdown: {
					smartypants: true,
				},

				plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX],
			});
		</script>
	</body>
</html>