Skip to content

Instantly share code, notes, and snippets.

@reinhrst

reinhrst/reveal-js.html

Created March 21, 2023 08:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save reinhrst/40dd413517c5ec391d913e9215581175 to your computer and use it in GitHub Desktop.
Save reinhrst/40dd413517c5ec391d913e9215581175 to your computer and use it in GitHub Desktop.
Download ZIP
One page bowser-only solution to make a Reveal presentation in Markdown, with Mermaid diagrams (no Node, in-browser)
Raw
reveal-js.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>reveal.js</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reset.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reveal.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/theme/beige.min.css"
/>
<!-- Theme used for syntax highlighted code -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/highlight/monokai.min.css"
/>
</head>
<body>
<div class="reveal">
<div class="slides">
<section></section>
</div>
</div>
<script type="module">
import Reveal from "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/reveal.esm.min.js";
import RevealMarkdown from "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/markdown/markdown.esm.min.js";
import RevealHighlight from "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/highlight/highlight.esm.min.js";
import RevealNotes from "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.4.0/plugin/notes/notes.esm.min.js";
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
const searchParams = new URL(document.location).searchParams;
if (!searchParams.has("markdown-url")) {
alert("Make sure to call this page with ?markdown-url=...");
throw new Error("Make sure to call this page with ?markdown-url=...");
}
const markdownUrl = new URL(document.location).searchParams.get(
"markdown-url"
);
document
.querySelector(".reveal section")
.setAttribute("data-markdown", markdownUrl);
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
await Reveal.initialize({
hash: true,
slideNumber: "c/t",
width: 960,
height: 700,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
});
mermaid.initialize({ startOnLoad: false });
await mermaid.run();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment