Help – Markdown Guide

By far the quickest way to build a presentation. Don’t think about design, think about what you want to say instead.

Use basic keys like #,*,(),[],!,-,~, to tell us when you want a heading to be bigger, a link to be created, or a list to be styled. We make sure it looks great on any sized screen.

What is Markdown?

Markdown is a a simple syntax to write rich formatted text on the web. It lets you set headlines, create lists, insert images just with your keyboard. Use basic symbols – #, *, (), [], !, -, ~ – we’ll focus on making it look good on any screen and any device. You can write Markdown inside Swipe or in your favourite text editor.

We love Markdown for its simplicity and sheer quickness. Writing your content in Markdown can save tons of time, and it can be much faster than messing around with text boxes and visually cumbersome editors.

Markdown editors

You can create rich text slides in Swipe using our built-in text editor. Just press the Markdown option in the content bar. Use our syntax helper and preview to create presentations even faster.

Markdown

You can also upload an .md file that you wrote elsewhere. Here are some text editors that we’ve tried and recommend. Some cost money, some are free and we don‘t officially endorse any of these. All you really need is something basic to write in and the ability to save it with the file extension .md.

Markdown in Swipe

The way Markdown works in Swipe is really simple and it’s by far the quickest way to build a presentation.

Write the content of your slides down without worrying about the layout, then use simple commands to add structure, emphasis, and divide it into slides. Tell us when you want a new slide, what background color the slide should have, what color should the text be. Set fonts, insert images and links. Then just press Save or upload your .md file written elsewhere and we do all the magic behind the scenes, instantly.

Watch the video below for a quick overview of Markdown in Swipe.

Syntax helper

We’ve built a simple syntax helper to help you use Markdown quicker. When in the Markdown editor, notice the toolbar at the top has loads of options in it, such as B, Image, Slide, etc. You can scroll within it to see them all. Press on any of those options to instantly make your text bold, insert an image, or create a new slide. Notice how this will add some symbols to your text.

If you press any of the options in the syntax helper with a word or a sentence selected, we will use the command you want only on the selection. For example, if you select a word in the middle of a sentence and press B in the syntax helper, we will make that word bold. Similarly, if you pasted an image link into your text and selected it – press Image in the syntax helper to display it in the presentation.

Markdown

Preview

Your slides are rendered as you type on the right of the Markdown editor. Play with the sizing and layout while staying focused. See how your colors fit together and how much space your content takes.

Markdown

Templates

We have a great default look, but you can customize the look of your slides as much as you want. You can change the background color, text color, as well as the typeface. There are 15 fonts to choose from and all the colors you can use on the web, as long as they are in the familiar HEX format.

We have prepared a selection of templates for you to choose from – combinations of colors and typefaces that look good and can make your slides stand out even more. To see them, press Templates from the syntax helper in our Markdown editor. Scroll horizontally across the lists to browse, then press Insert when you’ve picked a favourite.

Markdown

Syntax – Slides

Markdown is a human way to write HTML. It converts to HTML easily and lets you write HTML without worrying about remembering symbols and what they stand for. The following few sections cover most of the Markdown syntax you can use in Swipe.

To separate your presentation into slides, let’s start with a long text such as this:

SIR ISAAC NEWTON 
By: Nathaniel Hawthorne

On Christmas day, in the year 1642, Isaac Newton was born at the small village of Woolsthorpe, in England. Little did his mother think, when she beheld her newborn babe, that he was destined to explain many matters which had been a mystery ever since the creation of the world.

Isaac‘s father being dead, Mrs. Newton was married again to a clergyman, and went to reside at North Witham. Her son was left to the care of his good old grandmother, who was very kind to him and sent him to school.

To make a new slide, you use three stars * * * with spaces between them in a new line. Using the text above, this is how we’d tell Swipe to break it into three slides.

SIR ISAAC NEWTON
By: Nathaniel Hawthorne

* * *

On Christmas day, in the year 1642, Isaac Newton was born at the small village of Woolsthorpe, in England. Little did his mother think, when she beheld her newborn babe, that he was destined to explain many matters which had been a mystery ever since the creation of the world.

* * *

Isaac‘s father being dead, Mrs. Newton was married again to a clergyman, and went to reside at North Witham. Her son was left to the care of his good old grandmother, who was very kind to him and sent him to school.

Here‘s how that would look inside of Swipe:

Tip: You don‘t need to put three stars at the beginning or the end. It will create empty slides. If you do want an empty slide somewhere, add three stars in a new line.

Syntax – Templates

The templates syntax uses HTML comments to specify a background color, text color, and a typeface. You don’t have to use all three – feel free to set one of them and inherit the rest from the previous slide.

<!-- background: #fff4e3 -->
<!-- color: #2d2422 -->

The first background attribute is for the slide background. The color attribute is for the font color. You just have to fill it in with a color hash, and we‘ll make sure to apply it. To have it apply for the whole presentation, put it in the top of your Markdown file. It would look something like this:

<!-- background: #fff4e3 -->
<!-- color: #2d2422 --> 	

SIR ISAAC NEWTON 
By: Nathaniel Hawthorne

* * *

On Christmas day, in the year 1642, Isaac Newton was born at the small village of Woolsthorpe, in England. Little did his mother think, when she beheld her newborn babe, that he was destined to explain many matters which had been a mystery ever since the creation of the world. 

* * *

Isaac‘s father being dead, Mrs. Newton was married again to a clergyman, and went to reside at North Witham. Her son was left to the care of his good old grandmother, who was very kind to him and sent him to school.
			

Here‘s how that would look in Swipe:

You can get started using one of our templates. You can find them here: Markdown Templates.

You can use the exact same command as above on any number of slides in the deck. You can set a different background color for every single slide if you‘d like to. Here‘s how that would work:

<!-- background: #fff4e3 -->
<!-- color: #2d2422 --> 	

SIR ISAAC NEWTON 
By: Nathaniel Hawthorne

* * *
<!-- background: #2d2422 -->
<!-- color: #fff4e3 -->

On Christmas day, in the year 1642, Isaac Newton was born at the small village of Woolsthorpe, in England. Little did his mother think, when she beheld her newborn babe, that he was destined to explain many matters which had been a mystery ever since the creation of the world. 

* * *
<!-- background: #5A0000  -->
<!-- color: #fff -->

Isaac‘s father being dead, Mrs. Newton was married again to a clergyman, and went to reside at North Witham. Her son was left to the care of his good old grandmother, who was very kind to him and sent him to school.
			

This is how that would look like inside of Swipe:

Tip: If you don‘t specify a new background color, the current one will carry on until you tell it to change to a new one. So if you want 10 slides to have the same color, you only need to tell it at the first slide, and it will apply until you get to slide 11 when you specify a new color.

You can currently choose between a selection of 15 great fonts for your Markdown slides. If you do not set a custom font, we use our default font, which is Frutiger Next. Fonts work much like colors, all you need to know is the name of the font you want to use and define it on the slides that you want it to be active on. You can see the full preview of how each font looks here.

Here is the list of all of the fonts we currently support, along with their command. Copy paste either of these and put them at the beginning of the slides you want it to apply to. If you only specify it at the top of your text file (the beginning), then it will apply for the whole deck.

<!-- font: frutiger -->
<!-- font: tradegothic -->
<!-- font: univers -->
<!-- font: futura -->
<!-- font: din -->
<!-- font: brandon -->
<!-- font: centurygothic -->
<!-- font: rockwell -->
<!-- font: metronova -->
<!-- font: sabon -->
<!-- font: georgia -->
<!-- font: helvetica -->
<!-- font: verdana -->
<!-- font: monaco -->

To use them, just add it like you would the font color and background color tags. The order doesn‘t matter:

<!-- font: verdana -->
<!-- background: #fff4e3 -->
<!-- color: #2d2422 -->

Syntax – Headlines

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
Normal paragraph text

Here‘s how that looks inside Swipe:

Syntax – Lists

You can easily create bullet or number lists with markdown. Just number your points in new lines:

1. Point 1
2. Point 2
3. Point 3

To make a bullet list, you can use one star *, one hyphen -, or one plus + before the item.

* Bullet 1
- Bullet 2
+ Bullet 3

Syntax – Text styles

*Asterisks* or _underscores_ for italic
Two **asterisks** or __underscores__ for bold
Backticks for showing code
> This is a blockquote (quote)

Syntax – Code Blocks

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. Fenced code blocks support syntax highlighting.

# Syntax – Code Blocks

***

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
``` 
***

```python
s = "Python syntax highlighting"
print s
```

***

```
No language indicated, so no syntax highlighting. 
```

***

Inline `code` has `back-ticks around` it.

***

### Supported languages

Language | Alias
--- | ---
Apache | apache, apacheconf
Bash | bash, sh, zsh
C# | cs, csharp
C++ | cpp, c, cc, h, c++, h++, hpp
CSS | css
CoffeeScript | coffeescript, coffee, cson, iced
Diff | diff, patch
HTML, XML | xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist
HTTP | http, https
Ini | ini
JSON | json
Java | java, jsp
JavaScript | javascript, js, jsx
Makefile | makefile, mk, mak
Markdown | markdown, md, mkdown, mkd
Nginx | nginx, nginxconf
Objective-C | objectivec, mm, objc, obj-c
PHP | php, php3, php4, php5, php6
Perl | perl, pl, pm
Python | python, py, gyp
Ruby | ruby, rb, gemspec, podspec, thor, irb
SQL | sql
AsciiDoc | asciidoc, adoc
Clojure | clojure, clj
Erlang | erlang, erl
Elixir | elixir
Go | go, golang
Haskell | haskell, hs
OCaml | ocaml, ml
Swift | swift
Haml | haml
Twig | twig

See how that looks inside Swipe:

Syntax - MathJax

If you know what MathJax is, this is how you use it.

->$$ [ \frac{-b\pm\sqrt{b^2-4ac}}{2a} ] $$<-

See how that looks inside Swipe:

Tip: Center anything in markdown by wrapping it between -> and <-.