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

Embeddable Social Media Examples

Vimeo

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

Instagram

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

CSS for this guide