gnab / remark
A simple, in-browser, markdown-driven slideshow tool.
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing gnab/remark in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
Previewremark
A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
- Markdown formatting, with smart extensions
- Presenter mode with markdown formatted speaker notes and cloned slideshow view
- Syntax highlighting, supporting a range of languages
- Slide scaling, thus similar appearance on all devices / resolutions
- Simple markdown templates for customized slides
- Touch support for smart phones and pads, i.e. swipe to navigate slides
Check out this remark slideshow for a brief introduction.
To render your Markdown-based slideshow on the fly, checkout Remarkise.
Getting Started
It takes only a few, simple steps to get up and running with remark:
- Create an HTML file to contain your slideshow (see boilerplate below)
- Open the HTML file in a decent browser
- Edit the Markdown and/or CSS styles as needed, save and refresh!
- Press
Cto clone a display; then pressPto switch to presenter mode. Open help menu withh.
See any of the boilerplate-*.html files (the -local one requires building remark first), or just copy the boilerplate HTML below to start:
<!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>
<textarea id="source">
class: center, middle
# Title
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
---
# Introduction
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
How To Use remark
The wiki pages contain all the how-to, templating, and API help.
Real-world remark slideshows
On using remark:
Other interesting stuff:
- gnab.github.com/editorjs
- judoole.github.com/GroovyBDD
- bekkopen.github.com/infrastruktur-som-kode
- ivarconr.github.com/Test-Driven-Web-Development/slides
- havard.github.com/node.js-intro-norwegian
- mobmad.github.com/js-tdd-erfaringer
- roberto.github.com/ruby-sinform-2012
- http://asmeurer.github.io/python3-presentation/slides.html
- Lecture notes using remark
- Time series analysis: theory and practice (a course using Remark)
- sinedied.github.com/backslide
Printing
Converting to PDF is primarily supported via Chrome's Print to PDF feature. Note that the styling is not exact; See #50 for some recommended CSS to add to your styles.
Alternatively, you can use DeckTape, a PDF exporter for HTML presentation frameworks that provides support for remark.
Contributors
Thanks goes to these people for their contributions:
- Aaron Meurer
- Adam Obeng
- Adam Strzelecki
- Aleksandar Trifunovic
- Alexander Brett
- Alex Claman
- Alex Y. Wagner
- Allan Jiang
- Amin Bandali
- Andrea Georgieva
- Andrew Gaul
- Andrey Ustyuzhanin
- Antonin Stefanutti
- Axel Rauschmayer
- Baron Schwartz
- Bastian Venthur
- Bengt Lüers
- Benjamin Stigsen
- Bernát Kalló
- bobappleyard
- Brandon Keepers
- Breno Polanski
- Bruno Fagundez
- bugdone
- Cameron Daigle
- Chris Kanich
- Christian Dreier
- Christopher McClellan
- Christoph Gnip
- cjwit
- Claudio Bley
- Daan van Berkel
- Daniel Stankiewicz
- Daniel Wang
- Danny Tuppeny
- Dan Steingart
- datamike
- Dave Henderson
- David Richards
- derickfay
- Dirk Husemann
- Erwann Mest
- Fabian
- Felix C. Stegerman
- Florian Rathgeber
- follower
- Gerard Capes
- gnab
- Grégoire Pineau
- Gurjeet Singh
- Hadrien Frank Cardinal de Cuzey
- Hiroshi Fukada
- Hubert Chen
- Hunter-Github
- hydroid7
- Ivo Wever
- J_4lexander
- Jason
- Jason Underhill
- Jérôme Petazzoni
- Jimmy Merrild Krag
- Joe Beda
- Joel Porquet
- Johannes Wienke
- Julien Wajsberg
- kellyoconor
- kerim
- kernc
- Kim Joar Bekkelund
- Lauro Caetano
- Loreia
- Marcel Schilling
- Markus Schanz
- Martin
- Martin 'Hasan' Bramwell
- Mathias Bynens
- Matthew
- Mears-UFL
- mhor
- Michael Byrne
- Michael Grosser
- Michael Mol
- Michael Sanford
- Mike Pennisi
- Morton Fox
- mrbald
- Nicolas Hart
- Oleksiy Syvokon
- Ole Petter Bang
- Ozan K
- Pavel Boldyrev
- Pedro
- Pedro Martin
- Peter Jausovec
- petitviolet
- Pi-Hsun Shih
- pille1842
- piranha
- pospi
- Psychos-Yi
- punkish
- Radovan Bast
- Rahul Bansal
- Rasmus Vestergaard Hansen
- rasmusvhansen
- Renato Alves
- rglepe
- Rich Trott
- Roberto Soares
- Robert Perce
- Robert Szmurło
- Robin Berjon
- Rolf
- Rostyk
- Russell Keith-Magee
- Ryan Thomson
- Sarah Binney
- Scott Hewitt
- Sebastian Pipping
- Sequoia McDowell
- Shane Curcuru
- Shaun Hammill
- siba prasad samal
- Simon Hengel
- Stian Mathiassen
- stu-b-doo
- Sylvain Abélard
- Takashi Kanemoto
- Tej Chajed
- Thomas Ballinger
- Tobias Løfgren
- Todd Brannam
- Todd Gureckis
- Tome Tanasovski
- Tom Kraak
- Torgeir Thoresen
- tripu
- vdepabk2t
- William Ghelfi
- Willi Rath
- Wouter Sioen
- Yihui Xie
- Yinhe Zhang
- Yohan Lasorsa
- Yoshiya Hinosawa
License
remark is licensed under the MIT license. See LICENSE for further details.