Markdeck is a software that turns Markdown text documents into beautiful presentations that are displayed in the web browser. The two presentation frameworks impress.js and reveal.js are at the basis of this functionality.
These frameworks come with methods for customizing the visual presentation. Markdeck extends these methods and offers two approaches for customization:
- Themes that can be reused across multiple presentations, e.g. a theme and style for an organization
- Melodies, styling changes that only affect the current presentation, e.g. a changed font size or color
Melodies are styling changes that only affect the current presentation. They are made by altering the stylesheet file assets/css/styles.scss. See the Sass documentation for details about the syntax.
Mardeck automatically compiles the stylesheet into CSS and integrates it into the presentation. The styling of the currently active theme is overridden by the melody.
Themes are comprehensive styles that are made to be reused across multiple markdeck presentations. For example, organizations usually create themes so that presentations are visually linked to it. In addition common styling, they often include specific fonts, background images, and additional elements like logos and banners.
In mardeck, themes are inspired by and compatible with reveal.js themes, see reveal.js theming and Creating a Theme.
The following conventions exist for creating a markdeck theme:
- Themes are stored in the folder
assets/css/theme/ - Each theme is fully contained in its own subfolder that is named according to the theme's name that consists of the following characters
[a-zA-Z0-9], e.g.mytheme/ - Each theme contains a Sass file that has the same name as the theme with the extension
.scss, e.g.mytheme.scss - All assets are stored in the subfolder
assets/ - Plain HTML can optionally be included in by creating files
include-before-bodyand/orinclude-after-body
Example file hierarchy for a theme:
.
├── assets
│ └── css
│ └── theme
│ └── mytheme
│ ├── assets
│ │ ├── fonts
│ │ │ ├── myfont.css
│ │ │ └── myfont.ttf
│ │ └── images
│ │ ├── background.png
│ │ └── logo.png
│ ├── include-after-body
│ ├── include-before-body
│ └── mytheme.scss
└── slides.md