- Notifications
You must be signed in to change notification settings - Fork861
A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS.
It takes only a few, simple steps to get up and running with remark:
- Create a HTML file to contain your slideshow (like boilerplate below)
- Open the HTML file in a decent browser
- Edit the Markdown and/or CSS styles as needed, save and refresh!
- Press C to clone a display; then press P to switch to presenter mode
Below is a boilerplate HTML container to get you started:
<!DOCTYPE html><html><head><title>Title</title><metacharset="utf-8"><style>@importurl(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);@importurl(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);@importurl(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><textareaid="source">class: center, middle# Title---# Agenda1. Introduction2. Deep-dive3. ...---# Introduction</textarea><scriptsrc="https://remarkjs.com/downloads/remark-latest.min.js"></script><script>varslideshow=remark.create();</script></body></html>
Calling thecreate function triggers the creation of a new slideshow:
varslideshow=remark.create();
When called without any arguments, the source Markdown used to create the slideshow is expected to be located inside a text area present somewhere in the DOM looking like this:
<textareaid="source"> Markdown source</textarea>
Alternatively, an arguments object may be passed tocreate. If that object contains asource field, its value will be used instead of looking for the above text area:
varslideshow=remark.create({source:'Markdown source'});
Depending on your preference, you might want to keep the Markdown source in a separate file. Using thesourceUrl field, a URL may be specified which will get loaded synchronously and used instead of the two former options:
varslideshow=remark.create({sourceUrl:'markdown.md'});
When working locally, with your slideshow HTML opened directly from disk, using thesourceUrl won't work out of the box. This requires hosting your files using a web server, which can be accomplished inmultiple ways, e.g. by runningpython3 -m http.server in the directory of yourindex.html file. With a web server up and running, say on port 8000, you should be able to access your files viahttp://localhost:8000.
For simple cases, you can start with the boilerplate-local.html file, and include the remark.js file in the script src element at the bottom. boilerplate-single.html includes the entire JS inline with the HTML.
For more advanced use offline:
- https://github.com/gnab/remark/issues/194#issuecomment-77531008
- https://github.com/gnab/remark/issues/222
- https://github.com/gnab/remark/issues/234#issuecomment-106193838
- https://github.com/gnab/remark/blob/develop/boilerplate-local.html
- https://github.com/gnab/remark/blob/develop/boilerplate-single.html
- https://github.com/BenTearzz/RemarkPortable
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>Code:
defadd(a,b)a +bend
name
</textarea><script src="https://remarkjs.com/downloads/remark-latest.min.js"></script><script> var slideshow = remark.create();</script>