Slide Syntax

Learn how to build presentation slides

About Slide MaTeS Pretty presentations for the web age

Slides

MaTeS syntax for slides. The syntax is very lean and requires much less typing than comparable hand-crafted HTML or even beamer-TeX. MaTeS includes support for tables, CSS-styling, colored code samples using Prettify[1], image galleries, bibliography management and mathematical formulas using MathJax[3].

Presentations

Slides can automatically adapt to the size of the screen which makes them ideal for beamer presentations. Skip between slides with the cursor keys of by clicking on a slide. The presentation engine is an extension of Fathom[4].

MaTeS for slides

First you should read all about MaTeS syntax here. The only section that does not apply is the section about the grid, rows, and spans. Slides have different layout requirements that are not met by Bootstrap's[2] grid system. This document describes only the differences introduced by slide MaTeS.

Building slide decks with MaTeS

MaTeS Slides is the easy way to produce impressive presentation slides for the web. The compiler turns the MaTeS document into an HTML document that can be shown in any state-of-the-art web browser. The HTML document supports two modes:

Browsing mode: Useful when hosting the slides on a web servers for others.
Presentation mode: Useful when presenting the slides with a beamer. In this mode the slides are automatically scaled to fit the size of the browser window. Just open the slide, turn your browser into fullscreen mode and start your presentation. You can always switch between both modes by pressing the f-key.

Getting started Rock the slide deck

Meta-data

Use meta-data to mark the document as being a slide deck, specify a page template and specify the title to show in the browser tab.

Document schema

The MaTeS compiler must know which output you want to have. By default, this is a normal web page. To produce slides, add schema:slides to the meta-data. A typical slide deck starts like this:

 schema:slides
 title:An introduction to slide MaTeS

Note that you cannot simply take a MaTeS document for web pages and turn it into slides since slides do not support the grid system. The compiler will do it nonetheless, but the output will look broken.

Page Template

Usually pages follow some template, i.e. they display a logo and your name on the bottom together with the current slide number. For this purpose you can link to a template file that contains the HTML, imags and CSS to achieve the desired page look. This is optional, however. The structure of page templates is explained later in this document since it is not essential to getting started.

Title

As with web pages you should specify a title with the title: property. Unlike web pages there is no short-title: property for slides.

Example

Here is a complete example for a slide deck with two slides

 schema:slides
 title:Example
 
 #title Slides Example
 #author
 Torben Weis
 University of Duisburg-Essen
 torben.weis@uni-due.de

 ## What is MaTeS?
 - MaTeS is like Wiki syntax
 - MaTeS is simpler than XML markup

Pretty easy, right? Click here to see the generated slide. Press f to switch between presentation and browsing mode. Use the left and right cursor keys to navigate between slides. The MaTeS compiler automatically recognizes that this are two slides. Whenever it encounters a #title or a top-level heading ## it assumes that a new slide starts. You can control this manually in places where you need it, but most of the time that automatism works fine and saves typing.

Of course you can use all the MaTeS styles (i.e. CSS) in the MaTeS document. Most of the time it is preferable to make changes to your CSS file instead. This way you have to type less and all slides look consistently. Furthermore, this way it is very easy to adapt your changes to the latest corporate layout. Just change the CSS and template file and you are done.

Page layout Arranging text on a slide

Layout options

MaTeS has special tags to arrange text and images on a slide. Currently there is support for title pages and content pages with one or two columns.

Title slide

A title slide shows the title of the presentation and the author. A title slide has a layout that is different from that of content slide. The following example illustrates the usage of the #title and author sections.

 #title Slides Example
 #author
 Torben Weis
 University of Duisburg-Essen
 torben.weis@uni-due.de

Note that the #author section respects newlines, i.e. the above example produces an author section with three lines. Note as well, that leading white-space is preserved as well.

Slides with one column

Content slides start with a heading. To simplify the syntax, each occurrence of a level-1 heading, i.e. ## indicates the start of a new slide and the beginning of the title section. The first paragraph, enumeration, media gallery etc. following the title is shown in one column. Here is an example

 ## This is the title

 - This is a list
 - This is the second item in the list

Slides with two columns

To create a box that covers the left half of the remaining space, use the #left section. Non surprisingly, the #right section is used to cover the other side. Here is an example of a slide that uses two column layout:

 ## Title
 #left
 This text is on the left side
 #right
 This text is on the right side

Mixing one- and two-column layout

Once you used #left or #right, the slide is in two column mode. By using the #main section, you can switch back to one column mode. This is useful, if you have a two column slide, but you want to show some literature references at the bottom and this should span the entire slide. Here is an example

 ## Grand research slide
 #left
 First unbelievable result
 #right
 Second unbelievable result
 #main
 Published in 3rd Intl. Conference on unbelievable results

Slides without a title

Sometimes you may want to display no title at all, for example because the slide should show a large image. In this case, a slide can be started with the #slide command, like this

 #slide
 This slide has no title

If you wish to show a title nevertheless, you can do it like this:

 #slide
 ## This is the slide title

The above code is the same in the code example below. The version below is just easier to the eye and less to type.

 ## This is the slide title.

Page Templates Style your slides

Templates

Templates allow you to put some decorative images, the author name, date, or slide number on each slide.

Syntax of template files

A template is defined by a simple MaTeS files that describes the HTML output to show on every page. In addition, it can contains file names of images, css or javascript that are copied to the destination directory by the MaTeS compiler.

Below is an example template. External resources (e.g. images) are listed in the meta-data, just as with normal MaTeS files. A template file can override some builtin HTML templates to customize the HTML output. By default the slide-end template is empty. The example below defines the template and thus this HTML is written to the end of each slide. Usually the top-level HTML tag in this template has the style position:absolute to position it somewhere on the slide, for example relative to the bottom left corner. Words enclosed by {{}} are placeholders. For example, {{.Counters.slide}} will be replaced by the current slide number. Currently this is the only supported placeholder, but this might change in the future.

 image:uni.png
 image:vs.png

 #template:slide-end
 <div style="position:absolute; bottom:12px; left:24px;"><img {{image "uni.png"}} style="height:64px"><img {{image "vs.png"}} style="height:64px"><div style="display:inline-block; margin-left:24px; line-height:160%; color:#a0a0a0; vertical-align:top; font-size:18px">University of Duisburg-Essen<br>Distributed Systems</div><div style="display:inline-block; margin-left:64px; line-height:160%; color:#a0a0a0; vertical-align:top; font-size:18px">Torben Weis</div></div><div style="position:absolute; color:#a0a0a0; bottom:12px; right:24px; font-size:18px">{{.Counters.slide}}</div>

Note that images use a special syntax, e.g. <img {{image uni.png}}> instead of <img src="uni.png">. If inlining is turned on, some special javascript magic is applied to set the image using inlined data. Otherwise the resulting HTML is simply <img src="uni.png">. If you forget using the {{image ...}} syntax, inlining will not work. Note that all images used this way have to be listed in the meta-data using the image: syntax.

Security Warning: By including arbitrary files as images, the MaTeS compiler could be used as an attack vector to publish any files on the hard disk. If the MaTeS file comes from an untrusted source, it must be jailed.

Using template files

To use a template file in one of your slide decks, simply name it in the meta-data section as shown below. In this example the file named template/uni.md has the content shown above. If the file name is relative, then it is treated relative to the path of the slide MaTeS file.

 schema:slides
 title:An introduction to slide MaTeS
 template:template/uni.md

 #title Building Slides with MaTeS
 ...

Bibliography Further reading and related work

[1] Google Code Prettify, http://code.google.com/p/google-code-prettify

[2] Bootstrap, http://twitter.github.com/bootstrap/index.html

[3] MathJax, http://www.mathjax.org

[4] Fathom.js, http://markdalgleish.com/projects/fathom