Remark.js is a web based slideshow presentation platform with some great features that is comparable to powerpoint or google slides except you can write your presentations entirely in markdown. You can see a demo of remark.js in action here.
Puppet automates away the challenges, complexity, and risk of securing and running global hybrid and cloud-native infrastructure, so you can focus on delivering the next great thing. Remark is a Markdown processor powered by plugins part of the unified collective. The project parses and compiles Markdown, and lets programs process Markdown without ever compiling to HTML (it can though).
#Useful features
- Presenter mode
- Markdown formatting
- Supports code/syntax highlighting
- Responsive
- Touch support (swipe to change slide)
- No special software required, just a browser
- Can be styled with CSS
- Is a portable, self-contained html document
- Works offline (with some caveats - more on this later)
#Focus on your content
Writing your presentation in a simple markdown document means you are freed from battling with the UI and layouts of individual slides and can focus entirely on writing your content.
#Demo
By way of example, I wrote this post in markdown and converted it to remark.js. There's a demo below but it's probably better to open the example in a new tab to get the full effect.
You can change slides with your arrow keys, space bar or mouse wheel (or swipe on your tablet/phone). Press p to see presenter mode and c to see the cloned presentation for your viewers.
Here's a further example of the same presentation in a branded theme with custom fonts and the company logo on every page.
#How to convert markdown into a presentation
#1. Install markdown-to-slides via npm
#2. Create a custom CSS theme or use an existing one
Here's an example of a basic remark.js theme that I created. You can use this as it is or edit it to your preference. Or you could skip this step entirely and just use the remark.js defaults which look fine. If you're using a custom CSS theme just store the CSS file somewhere handy on your computer because we'll be using it later when we convert our markdown file to a presentation.
#3. Write your presentation in markdown.
You can write your presentation naturally like you would any other document in markdown but please take into consideration how your slides will be created.
#Manually define new slides
You can manually insert horizontal lines which denote a new slide
#Use headings to denote new slides
You can use document-mode when converting your markdown document (more on this in the next step) which splits slides based on heading structure:
#Combination of lines and headings
You can also combine the two approaches for finer control. Simply use appropriate headings and insert lines in between larger blocks of text to break up slides.
Remarkjs Github
#Slide notes
To write slide notes (visible in presenter mode) format your markdown like so:
#4. Convert markdown to presentation
#Document mode
Add the -d flag for document mode
Please note that when using document mode your headings must include a space after the markdown heading syntax otherwise it won't count as a heading and won't be converted into a new slide:
#Custom CSS theme
Add the -s flag to use a custom CSS theme
#5. Open the resulting html file in your browser to see the results
p opens presenter mode which shows you a preview of the next slide, a timer, and any slide notes you have written.
c will clone the slideshow in a separate tab for your viewers. The cloned slideshow changes slides along with you in presenter mode.
#More info
#Remark.js markdown extensions
Todoist alternatives. There is a lot of useful markdown syntax specific to remark.js found on their wiki
#Offline images
Any images in your presentation that are hosted remotely will require an internet connection. you can get around this by placing any images in the same folder and referencing them locally in your markdown file e.g.
#Offline javascript
You need to cache the JavaScript in your browser by viewing your presentation with a working internet connection, then your presentation will work offline as long as that file is still cached.
To make it fully offline without depending on browser caching you can grab the minified js, store it in the same directory as your remark.js presentation and edit your presentation html document to replace
With a reference to the local file
#Custom css themes
Here's an example of a basic remark.js theme which you can change to match your requirements.
Here's another example of a CSS theme that contains a custom font and a company logo on every slide.
#Custom fonts
You can use custom fonts in remark.js hosted on a remote CDN (such as google web fonts for example) or locally (stored in the same folder as the presentation perhaps) but in order to try and make the theme as self contained as possible it's probably a good idea to convert your custom font to base64 using a service like font squirrel.
In the font squirrel tool you'll need to choose expert then go down to the CSS section and tick Base64 encode. The zip file you download will contain a stylesheet.css file and all you need to do is copy the css the @font-face declaration into your remark.js theme file
Then reference that font-family elsewhere in your css e.g.
#Using images in your theme
One possible use for images in your theme is to display your brand logo in a corner of every slide.
Again, I suggest base64 encoding this image to make your theme truly portable and self-contained and avoid having to store image files alongside your presentation file. Encode your images using a service like base64 image. How to see synced contacts in gmail. The resulting base64 encoded string can be used in your theme like so
This will place the image in the bottom right corner of every slide. You can tweak the positional and size values to position it elsewhere.
#Conclusion
Remarkjs Image
This way of creating presentations has turned something that used to be a chore into a process that is as easy as writing any document and really allows you to focus entirely on what you want to say rather than how each individual slide looks. Give it a try!
We have introduced a few HTML5 presentation formats in Chapter 4. The xaringan package (Xie 2021e) is an R Markdown extension based on the JavaScript library remark.js (https://remarkjs.com) to generate HTML5 presentations of a different style. See Figure 7.1 for two sample slides.
Remarkjs Table
FIGURE 7.1: Two sample slides created from the xaringan package.
The name “xaringan” came from Sharingan (http://naruto.wikia.com/wiki/Sharingan) in the Japanese manga and anime “Naruto.” The word was deliberately chosen to be difficult to pronounce for most people (unless you have watched the anime), because its author (me) loved the style very much, and was concerned that it would become too popular.8 The concern was somewhat naive, because the style is actually very customizable, and users started to contribute more themes to the package later.
The xaringan package is based on the JavaScript library remark.js (https://remarkjs.com); remark.js only supports Markdown, and xaringan added the support for R Markdown as well as other utilities to make it easier to build and preview slides.
Remarkjs Wiki
You can learn more about the background stories and the usage of the xaringan package from the documentation at http://slides.yihui.name/xaringan/, which is actually a set of slides generated from xaringan. You may also read a potentially biased blog post of mine to know why I preferred xaringan / remark.js for HTML5 presentations: https://yihui.name/en/2017/08/why-xaringan-remark-js/.