Gingko Guide


? to see shortcuts.


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 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
  1. numbered lists too
  2. including **formatting**
- Want a [fancier link](

Or an image? ![leaf](

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


# 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:
Named Link: [LinkName](

Quotations (also called blockquotes)

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

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


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


Image Tools

FilePicker: DropBox etc. Integration

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

LoremPixel: Random Image


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

Tag Galaxy

Images free for commercial purposes with attribution.


[ ] Unchecked
[X] Checked


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)


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.

#card55c55cce66fd9c8c649117b0 {
  background-color: #000000;
  color: #FFFFFF;

Custom Styles for Exports

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

article.html-export {
    /* CSS, fonts etc. here */

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

Embeddable Social Media Examples


<iframe src="" width="400" height="170" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


City Oasis: Pony Rides

A photo posted by Rob Gibson (@flowscape) on



<iframe width="400" height="300" src="" frameborder="0" allowfullscreen></iframe>

PasteBin: Paste Plain Text

Paste plain text publicly for free for ever.


<iframe src="" style="border:none;width:400px;height:200px"></iframe>


Desmos Graphing calculator: only pastes images for now.

Charts with



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.


CSS for this guide