Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Gingko Guide

TL;DR

? to see shortcuts.

Markdown

Markdown is the simple, readable formatting markup used by Gingko. It’s quite common all over the web.

Get a MarkDown cheatsheet with Ctrl+M.

Markdown

Markdown Example

# This is a heading!

A sentence or two. This is in plain text, and this is *italic text*.

We need some **bold** text:

- You can also make lists quite easily
- With links http://bbc.co.uk
  1. numbered lists too
  2. including **formatting**
- Want a [fancier link](http://c2.com)?

Or an image? ![leaf](https://gingkoapp.com/p/images/leaf.png)

This is a heading!

A sentence or two. This is in plain text, and this is italic text.

We need some bold text:

Or an image? leaf

Markdown Syntax

Headings

# Heading One
## Heading Two
###### Heading Six

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

p, strong, emphasis

Normal, *Italic*, **Bold**, ***BoldItalic***

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Regular link: http://duckduckgo.com
Named Link: [LinkName](https://link.com)

Quotations (also called blockquotes)

> "Not everything worth measuring can be measured."
> *-- Albert Einstein*

“Not everything worth measuring can be measured.”
— Albert Einstein

Images

![Optional Label](http://image.jpg)

Che(r)

Image Tools

FilePicker: DropBox etc. Integration

FilePicker allows you to auto-upload images from DropBox and link to your Gingko Tree.

LoremPixel: Random Image

![](http://lorempixel.com/400/200/)

(You have to edit the card to get a new one.)

Tag Galaxy

Images free for commercial purposes with attribution.



Checkboxes

[ ] Unchecked
[X] Checked

Tables

Header 1       | Header 2
-------------- | -------------
A table cell!  | What's this?
Another cell   | More cell!
Header 1 Header 2
A table cell! What’s this?
Another cell More cell!

Standard HTML & CSS

Gingko can also do standard HTML & CSS.

HTML & CSS are big topics. Here are a couple of short introductions:

Standard HTML & CSS

Show Key Presses

<span class="key">Shift</span><span class="key">Cmd</span><span class="key">S</span>

(No Line Breaks)

ShiftCmdS

This is “CUSTOM card”.

Its HTML ID is: card55c55cce66fd9c8c649117b0

Pop up the menu and choose Inspect Element to find its ID.

THIS card sets the style for “CUSTOM card”

This style code can be anywhere in the tree.

<style>
#card55c55cce66fd9c8c649117b0 {
  background-color: #000000;
  color: #FFFFFF;
}
</style>

Custom Styles for Exports

When exporting to HTML, you can customise the the style by adding a card with:

<style>
article.html-export {
    /* CSS, fonts etc. here */
}
</style>

You can change margins, borders, images, colours, fonts, and logos.

Very handy for styling output for different projects, customers or workshops.

Other Embeddable Content

You can embed loads of content into Gingko.

Embeddable Content

Embeddable Social Media Content

Youtube, Facebook, Twitter, Pinterest, Slideshare, Instagram, and most other sites

  • Select the post you’re interested in
  • There will be an “embed” link somewhere in the page
  • Copy the embed HTML
  • Paste it in your Gingko

Embeddable Social Media Examples

Vimeo

<iframe src="https://player.vimeo.com/video/24247978" width="400" height="170" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Instagram

  • Click the 3 dots
  • Click the embed button
  • Copy the HUGE Instagram embed code, and paste it into Gingko

City Oasis: Pony Rides

A photo posted by Rob Gibson (@flowscape) on

SoundCloud

Youtube

<iframe width="400" height="300" src="https://www.youtube.com/embed/egCKZHsICm8" frameborder="0" allowfullscreen></iframe>

PasteBin: Paste Plain Text

Paste plain text publicly for free for ever.

CURRENTLY BROKEN In PASTEBIN

<iframe src="http://pastebin.com/embed_iframe.php?i=7jqTJVrn" style="border:none;width:400px;height:200px"></iframe>

Desmos

Desmos Graphing calculator: only pastes images for now.

Charts with Plot.ly

Equations/LaTeX?

CURRENTLY BROKEN

Just add $...$ for inline equations ($\tau \equiv 2\pi$), and $$...$$ for display equations:

$$f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a}\, dz$$

If note displaying correctly, click Enable LaTeX in the gear menu.

Tools

  • Press ? for help.

CSS for this guide