remarkjs slideshow - DrXyzzy/cocalc GitHub Wiki
RemarkJS Slideshow lets you make nice browser-based slideshows using Markdown.
- Create a file named
remark.htmlwith this content:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create({
sourceUrl: 'remark.md'
});
</script>
</body>
</html>
- Create a file
remark.md(in the same directory asremark.html) with this content:
class: center, middle
# Title
---
# Agenda for us!!!!
1. Introduction
2. Deep-dive
3. blah
4. Stuff!
---
# Introduction
-
Go back to the
remark.htmltab; you should show the slideshow on the right. Close the "Source code" frame of remark.html, to show only the rendered iframe. -
Switch to the
remark.mdfile and make some changes. There are some important features beyond just markdown for making slides. -
Switch back to
remark.htmland see the updated version. -
For a presentation, click the checkbox to the left of
remark.htmlin the main listing, then click "Download", and click on the download link. Use "P" to toggle presentation mode.