Skip to content

Home

Jump to bottom
Ondřej Žára edited this page May 2, 2020 · 1 revision

MArkdown SLides by Ondras

This wiki documents all relevant features of the maslo presentation system.

The HTML document

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>My presentation</title>
	</head>
	<body>
		<template data-src="content.md" data-skin="light"></template>
		<script src="https://cdn.jsdelivr.net/npm/ma-sl-o@2/maslo.js"></script>
	</body>
</html>

  • Markdown content:

    1. either in a separate markdown file (recommended) and referenced using data-src attribute, or
    2. inlined into the <template> element

  • JS library (maslo.js):

    1. either installed locally via npm install ma-sl-o, or
    2. linked via jsdelivr.net
      • specify version using @major.minor.patch, @major or @latest

  • Skin:

    1. either specify via data-skin attribute (available: "dark", "light", "default"), or
    2. set data-skin="" and provide your own css

Markdown features

  • Inline HTML
  • Syntax highlighting for fenced code blocks
  • HTML attributes (append {#id .class name=value} after your markdown elements)
  • Full reference

CSS Custom Properties

  • --width: projection resolution width (unitless)
  • --height: projection resolution height (unitless)
  • --scale: current scale (computed)
  • --current: current slide index (computed)
  • --total: slide count (computed)
  • --tab-size: tab size
  • --brush: doodle brush thickness (unitless)
  • --highlight: doodle color
  • --overview-scale: size scale for overview mode (fraction)
  • --overview-border: border size for overview mode (length)
  • --fg: default foreground color
  • --bg: default background color
  • --link: default link color
  • --marker: symbol used for <ul> markers
  • --marker-width: width for <ul>/<ol> markers
  • --marker-opacity: opacity for <ul>/<ol> markers

See https://github.com/ondras/maslo/blob/master/css/variables.less for default values.

Keyboard controls

  • Space, PageDown, →, ↓ – next slide
  • Backspace, PageUp, ←, ↑ – previous slide
  • Home – first slide
  • End – last slide
  • Escape – toggle overview
  • Caps Lock - toggle doodling
Clone this wiki locally