• Gingko Guide

    TL;DR

    <span class="key">?</span> to see shortcuts.

  • CSS for this guide

    <style>

    .card h1, .card h2, .card h3, .card h4 {
    font-family: sans-serif;
    font-weight: 900;
    color: #5C6169;
    }

    .card strong {
    font-family: sans-serif;
    font-weight: 900;
    color: #c13814;
    }

    .card em {
    font-family: serif;
    font-style: italic;
    color: #000000;
    }

    .card a {
    font-family: sans-serif;
    font-weight: 900;
    text-decoration: underline;
    color: #0F6490;
    }
    </style>

  • Markdown

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

    Get a MarkDown cheatsheet with <span class="key">Ctrl</span>+<span class="key">M</span>.

  • Standard HTML & CSS

    Gingko can also do standard HTML & CSS.

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

  • Other Embeddable Content

    You can embed loads of content into Gingko.

  • Tools

    • Press <span class="key">?</span> for help.
  • 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

  • Standard HTML & CSS

  • Show Key Presses

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

    (No Line Breaks)

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

  • 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>

    <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.

  • 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
  • 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>

    <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.

    <a title="View with the Desmos Graphing Calculator" href="https://www.desmos.com/calculator/rp8zi6rtqr"> <img src="https://s3.amazonaws.com/calc_thumbs/production/rp8zi6rtqr.png" width="200px" height="200px" style="border:1px solid #ccc; border-radius:5px" /></a>

  • Charts with Plot.ly

    • http://plot.ly

      <div>
      <a href="https://plot.ly/~abtran/14/" target="_blank" title="When San Francisco Meetup Groups were formed" style="display: block; text-align: center;"><img src="https://plot.ly/~abtran/14.png" alt="When San Francisco Meetup Groups were formed" style="max-width: 100%;width: 1137px;" width="1137" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
      <script data-plotly="abtran:14" src="https://plot.ly/embed.js" async></script>
      </div>

  • Equations/LaTeX?

    CURRENTLY BROKEN

    Just add $...$ for inline equations (), and $$...$$ for display equations:

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

  • 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)

  • 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!
  • Embeddable Social Media Examples

  • Vimeo

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

    <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

    <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://instagram.com/p/GpI_9/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_top">City Oasis: Pony Rides</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A photo posted by Rob Gibson (@flowscape) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2011-06-30T02:27:41+00:00">Jun 29, 2011 at 7:27pm PDT</time></p></div></blockquote>

    <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

  • SoundCloud

    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/53888001&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>

  • Youtube

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

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

    • 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.

      <form action="https://www.flickr.com/search/" method="get"><input type="text" name="q"><input type="hidden" name="l" value="commderiv">
      <input type="submit" value="Search Flickr">
      </form>

      {"cards":[{"_id":"55c55cce66fd9c8c649117a3","treeId":"55c55cce66fd9c8c649117a2","seq":3124370,"position":1,"parentId":null,"content":"# Gingko Guide\n\n### TL;DR\n<span class=\"key\">?</span> to see shortcuts."},{"_id":"59b5a40ccd19ab191e000078","treeId":"55c55cce66fd9c8c649117a2","seq":3124051,"position":1,"parentId":"55c55cce66fd9c8c649117a3","content":"# Markdown\n*Markdown is the simple, readable formatting markup used by Gingko. It's quite common all over the web.*\n\nGet a MarkDown cheatsheet with <span class=\"key\">Ctrl</span>+<span class=\"key\">M</span>.\n\n- [More Markdown Info](http://daringfireball.net/projects/markdown/basics)"},{"_id":"59b5b105cd19ab191e00007b","treeId":"55c55cce66fd9c8c649117a2","seq":3124052,"position":0.5,"parentId":"59b5a40ccd19ab191e000078","content":"# Markdown"},{"_id":"59b62ada81fdf7476200004b","treeId":"55c55cce66fd9c8c649117a2","seq":3124153,"position":1.25,"parentId":"59b5a40ccd19ab191e000078","content":"## Markdown Example\n\n```\n# This is a heading!\n\nA sentence or two. This is in plain text, and this is *italic text*.\n\nWe need some **bold** text:\n\n- You can also make lists quite easily\n- With links http://bbc.co.uk\n 1. numbered lists too\n 2. including **formatting**\n- Want a [fancier link](http://c2.com)?\n\nOr an image? ![leaf](https://gingkoapp.com/p/images/leaf.png)\n```\n\n# This is a heading!\n\nA sentence or two. This is in plain text, and this is *italic text*.\n\nWe need some **bold** text:\n\n- You can also make lists quite easily\n- With links http://bbc.co.uk\n 1. numbered lists too\n 2. including **formatting**\n- Want a [fancier link](http://c2.com)?\n\nOr an image? ![leaf](https://gingkoapp.com/p/images/leaf.png)\n"},{"_id":"59b640d281fdf7476200004c","treeId":"55c55cce66fd9c8c649117a2","seq":3124201,"position":1,"parentId":"59b62ada81fdf7476200004b","content":"# Markdown Syntax"},{"_id":"55c55cce66fd9c8c649117b2","treeId":"55c55cce66fd9c8c649117a2","seq":3124206,"position":2,"parentId":"59b62ada81fdf7476200004b","content":"## Headings\n\n```\n# Heading One\n## Heading Two\n###### Heading Six\n```\n\n# Heading One\n## Heading Two\n### Heading Three\n#### Heading Four\n##### Heading Five\n###### Heading Six"},{"_id":"55c55cce66fd9c8c649117b4","treeId":"55c55cce66fd9c8c649117a2","seq":3124210,"position":3,"parentId":"59b62ada81fdf7476200004b","content":"## p, strong, emphasis\n\n```\nNormal, *Italic*, **Bold**, ***BoldItalic***\n```\nLorem ipsum dolor sit amet, **consectetuer** adipiscing elit. *Aliquam hendrerit* mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, ***laoreet vitae***, risus. "},{"_id":"55c55cce66fd9c8c649117b5","treeId":"55c55cce66fd9c8c649117a2","seq":3124213,"position":4,"parentId":"59b62ada81fdf7476200004b","content":"## Links\n\n```\nRegular link: http://duckduckgo.com\nNamed Link: [LinkName](https://link.com)\n```\n\n- **Regular link:** http://duckduckgo.com\n- **Named Link:** [Google Custom Search](https://www.google.com/cse/)"},{"_id":"55c55cce66fd9c8c649117b6","treeId":"55c55cce66fd9c8c649117a2","seq":3124378,"position":5,"parentId":"59b62ada81fdf7476200004b","content":"## Quotations (also called blockquotes)\n\n```\n> \"Not everything worth measuring can be measured.\"\n> *-- Albert Einstein*\n```\n> \"Not everything worth measuring can be measured.\"\n> *-- Albert Einstein*"},{"_id":"55c55cce66fd9c8c649117b7","treeId":"55c55cce66fd9c8c649117a2","seq":3124356,"position":6,"parentId":"59b62ada81fdf7476200004b","content":"## Images\n\n```\n![Optional Label](http://image.jpg)\n```\n\n![Che(r)](http://adsoftheworld.com/sites/default/files/styles/media_retina/public/images/Che.jpeg?itok=b6VYPEJm)"},{"_id":"55c55cce66fd9c8c649117b8","treeId":"55c55cce66fd9c8c649117a2","seq":3124192,"position":1,"parentId":"55c55cce66fd9c8c649117b7","content":"# Image Tools"},{"_id":"55c55cce66fd9c8c649117b9","treeId":"55c55cce66fd9c8c649117a2","seq":3123464,"position":2,"parentId":"55c55cce66fd9c8c649117b7","content":"## FilePicker: DropBox etc. Integration\nFilePicker allows you to auto-upload images from DropBox and link to your Gingko Tree.\n![](https://d12k56if6tn11s.cloudfront.net/9bf2cca/assets/images/branding/logo-default.png)"},{"_id":"55c55cce66fd9c8c649117ba","treeId":"55c55cce66fd9c8c649117a2","seq":3123465,"position":3,"parentId":"55c55cce66fd9c8c649117b7","content":"## LoremPixel: Random Image\n```\n![](http://lorempixel.com/400/200/)\n```\n(You have to edit the card to get a new one.)\n![](http://lorempixel.com/400/200/)\n"},{"_id":"55c55cce66fd9c8c649117bb","treeId":"55c55cce66fd9c8c649117a2","seq":3123466,"position":4,"parentId":"55c55cce66fd9c8c649117b7","content":"# Tag Galaxy\n\n- http://taggalaxy.de/\n- Visual Flickr Search by Tag *(requires flash)* \n![](https://www.filepicker.io/api/file/9Hh7Q5chRT6gBFoUStBt)"},{"_id":"55c55cce66fd9c8c649117bc","treeId":"55c55cce66fd9c8c649117a2","seq":3124091,"position":5,"parentId":"55c55cce66fd9c8c649117b7","content":"## Creative Commons Image Search\n*Images free for commercial purposes with attribution.*\n<form action=\"https://www.flickr.com/search/\" method=\"get\"><input type=\"text\" name=\"q\"><input type=\"hidden\" name=\"l\" value=\"commderiv\">\n<input type=\"submit\" value=\"Search Flickr\">\n</form>"},{"_id":"55c55cce66fd9c8c649117bd","treeId":"55c55cce66fd9c8c649117a2","seq":3124221,"position":7,"parentId":"59b62ada81fdf7476200004b","content":"## Checkboxes\n```\n[ ] Unchecked\n[X] Checked\n```\n\n[X] Type `[X]` to create a checkbox.\n[ ] Clicking on the checkbox toggles it\n [ ] A subtask"},{"_id":"55c55cce66fd9c8c649117be","treeId":"55c55cce66fd9c8c649117a2","seq":3124222,"position":8,"parentId":"59b62ada81fdf7476200004b","content":"## Tables\n\n```\nHeader 1 | Header 2\n-------------- | -------------\nA table cell! | What's this?\nAnother cell | More cell!\n```\n\nHeader 1 | Header 2\n-------------- | -------------\nA table cell! | What's this?\nAnother cell | More cell!"},{"_id":"59b5aa3bcd19ab191e00007a","treeId":"55c55cce66fd9c8c649117a2","seq":3124030,"position":1.5,"parentId":"55c55cce66fd9c8c649117a3","content":"# Standard HTML & CSS\n\n*Gingko can also do standard HTML & CSS.*\n\nHTML & CSS are big topics. Here are a couple of short introductions:\n- [W3 HTML Basics](http://www.w3schools.com/html/html_basic.asp)\n- [W3 Intro to CSS Syntax](http://www.w3schools.com/css/css_syntax.asp)"},{"_id":"55c55cce66fd9c8c649117a4","treeId":"55c55cce66fd9c8c649117a2","seq":3124031,"position":0.5,"parentId":"59b5aa3bcd19ab191e00007a","content":"# Standard HTML & CSS"},{"_id":"55c55cce66fd9c8c649117bf","treeId":"55c55cce66fd9c8c649117a2","seq":3124017,"position":1,"parentId":"59b5aa3bcd19ab191e00007a","content":"## Show Key Presses\n\n```\n<span class=\"key\">Shift</span><span class=\"key\">Cmd</span><span class=\"key\">S</span>\n```\n(No Line Breaks)\n\n<span class=\"key\">Shift</span><span class=\"key\">Cmd</span><span class=\"key\">S</span>\n\n"},{"_id":"55c55cce66fd9c8c649117b0","treeId":"55c55cce66fd9c8c649117a2","seq":3124307,"position":2,"parentId":"59b5aa3bcd19ab191e00007a","content":"## This is \"CUSTOM card\".\n\nIts HTML ID is: `card55c55cce66fd9c8c649117b0`\n\nPop up the menu and choose **Inspect Element** to find its ID."},{"_id":"55c55cce66fd9c8c649117b1","treeId":"55c55cce66fd9c8c649117a2","seq":3124313,"position":3,"parentId":"59b5aa3bcd19ab191e00007a","content":"## THIS card sets the style for \"CUSTOM card\"\n\nThis `style` code can be anywhere in the tree.\n\n```\n<style>\n#card55c55cce66fd9c8c649117b0 {\n background-color: #000000;\n color: #FFFFFF;\n}\n</style>\n```\n\n<style>\n#card55c55cce66fd9c8c649117b0 {\n background-color: #000000;\n color: #FFFFFF;\n}\n</style>"},{"_id":"55c55cce66fd9c8c649117a9","treeId":"55c55cce66fd9c8c649117a2","seq":3124321,"position":4,"parentId":"59b5aa3bcd19ab191e00007a","content":"## Custom Styles for Exports\n\nWhen exporting to HTML, you can customise the the style by adding a card with:\n\n```\n<style>\narticle.html-export {\n /* CSS, fonts etc. here */\n}\n</style>\n```\n\nYou can change margins, borders, images, colours, fonts, and logos.\n\nVery handy for styling output for different projects, customers or workshops."},{"_id":"59b5a7a7cd19ab191e000079","treeId":"55c55cce66fd9c8c649117a2","seq":3124037,"position":2,"parentId":"55c55cce66fd9c8c649117a3","content":"# Other Embeddable Content\n*You can embed loads of content into Gingko.*\n"},{"_id":"55c55cce66fd9c8c649117a6","treeId":"55c55cce66fd9c8c649117a2","seq":3124126,"position":1,"parentId":"59b5a7a7cd19ab191e000079","content":"# Embeddable Content"},{"_id":"55c55cce66fd9c8c649117aa","treeId":"55c55cce66fd9c8c649117a2","seq":3124345,"position":2.5,"parentId":"59b5a7a7cd19ab191e000079","content":"## Embeddable Social Media Content\n\n#### Youtube, Facebook, Twitter, Pinterest, Slideshare, Instagram, and most other sites\n- Select the post you're interested in \n- There will be an \"embed\" link somewhere in the page\n- Copy the embed HTML\n- Paste it in your Gingko"},{"_id":"59b627c181fdf7476200004a","treeId":"55c55cce66fd9c8c649117a2","seq":3124136,"position":0.5,"parentId":"55c55cce66fd9c8c649117aa","content":"# Embeddable Social Media Examples"},{"_id":"55c55cce66fd9c8c649117ac","treeId":"55c55cce66fd9c8c649117a2","seq":3124334,"position":2,"parentId":"55c55cce66fd9c8c649117aa","content":"## Vimeo\n\n- Go to http://vimeo.com or [Vimeo Creative Commons](https://vimeo.com/creativecommons)\n- Find a video. Click `Share`. Choose `embed`.\n- Copy the HTML, paste it into Gingko\n\n```\n<iframe src=\"https://player.vimeo.com/video/24247978\" width=\"400\" height=\"170\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>\n```\n\n<iframe src=\"https://player.vimeo.com/video/24247978\" width=\"400\" height=\"170\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"},{"_id":"59b71041f216411bf500004b","treeId":"55c55cce66fd9c8c649117a2","seq":3124350,"position":3,"parentId":"55c55cce66fd9c8c649117aa","content":"# Instagram\n\n- Click the 3 dots ![](https://www.filepicker.io/api/file/lb76Vr5yTH2z5V45COLR)\n- Click the **embed** button\n- Copy the **HUGE** Instagram embed code, and paste it into Gingko\n\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-version=\"4\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div> <p style=\" margin:8px 0 0 0; padding:0 4px;\"> <a href=\"https://instagram.com/p/GpI_9/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_top\">City Oasis: Pony Rides</a></p> <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\">A photo posted by Rob Gibson (@flowscape) on <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2011-06-30T02:27:41+00:00\">Jun 29, 2011 at 7:27pm PDT</time></p></div></blockquote>\n<script async defer src=\"//platform.instagram.com/en_US/embeds.js\"></script>"},{"_id":"59b73a5af216411bf500004e","treeId":"55c55cce66fd9c8c649117a2","seq":3124376,"position":3.5,"parentId":"55c55cce66fd9c8c649117aa","content":"# SoundCloud\n\n- http://soundcloud.com\n- Click share, click embed, copy the code and paste it in\n\n<iframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/53888001&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true\"></iframe>"},{"_id":"55c55cce66fd9c8c649117ab","treeId":"55c55cce66fd9c8c649117a2","seq":3124352,"position":4,"parentId":"55c55cce66fd9c8c649117aa","content":"## Youtube\n\n```\n<iframe width=\"400\" height=\"300\" src=\"https://www.youtube.com/embed/egCKZHsICm8\" frameborder=\"0\" allowfullscreen></iframe>\n```\n\n<iframe width=\"400\" height=\"300\" src=\"https://www.youtube.com/embed/egCKZHsICm8\" frameborder=\"0\" allowfullscreen></iframe>"},{"_id":"55c55cce66fd9c8c649117ad","treeId":"55c55cce66fd9c8c649117a2","seq":3124372,"position":5,"parentId":"59b5a7a7cd19ab191e000079","content":"## PasteBin: Paste Plain Text\n*Paste plain text publicly for free for ever.*\n- http://pastebin.com/\n\n### `CURRENTLY BROKEN In PASTEBIN`\n\n```\n<iframe src=\"http://pastebin.com/embed_iframe.php?i=7jqTJVrn\" style=\"border:none;width:400px;height:200px\"></iframe>\n```\n\n<iframe src=\"http://pastebin.com/embed_iframe.php?i=7jqTJVrn\" style=\"border:none;width:400px;height:200px\"></iframe>\n"},{"_id":"55c55cce66fd9c8c649117ae","treeId":"55c55cce66fd9c8c649117a2","seq":3124302,"position":6,"parentId":"59b5a7a7cd19ab191e000079","content":"## Desmos\n\n*[Desmos](https://www.desmos.com/) Graphing calculator: only pastes images for now.*\n\n<a title=\"View with the Desmos Graphing Calculator\" href=\"https://www.desmos.com/calculator/rp8zi6rtqr\"> <img src=\"https://s3.amazonaws.com/calc_thumbs/production/rp8zi6rtqr.png\" width=\"200px\" height=\"200px\" style=\"border:1px solid #ccc; border-radius:5px\" /></a>"},{"_id":"55c55cce66fd9c8c649117af","treeId":"55c55cce66fd9c8c649117a2","seq":3124119,"position":7,"parentId":"59b5a7a7cd19ab191e000079","content":"## Charts with Plot.ly\n\n- http://plot.ly\n<div>\n<a href=\"https://plot.ly/~abtran/14/\" target=\"_blank\" title=\"When San Francisco Meetup Groups were formed\" style=\"display: block; text-align: center;\"><img src=\"https://plot.ly/~abtran/14.png\" alt=\"When San Francisco Meetup Groups were formed\" style=\"max-width: 100%;width: 1137px;\" width=\"1137\" onerror=\"this.onerror=null;this.src='https://plot.ly/404.png';\" /></a>\n <script data-plotly=\"abtran:14\" src=\"https://plot.ly/embed.js\" async></script>\n</div>"},{"_id":"55c55cce66fd9c8c649117c0","treeId":"55c55cce66fd9c8c649117a2","seq":3124304,"position":8,"parentId":"59b5a7a7cd19ab191e000079","content":"## Equations/LaTeX?\n\n### `CURRENTLY BROKEN`\n\nJust add `$...$` for inline equations ($\\tau \\equiv 2\\pi$), and `$$...$$` for display equations:\n$$f(a) = \\frac{1}{2\\pi i} \\oint_\\gamma \\frac{f(z)}{z-a}\\, dz$$\n\nIf note displaying correctly, click **Enable LaTeX** in the gear menu."},{"_id":"55c55cce66fd9c8c649117a8","treeId":"55c55cce66fd9c8c649117a2","seq":3124252,"position":3,"parentId":"55c55cce66fd9c8c649117a3","content":"## Tools\n\n- Press <span class=\"key\">?</span> for help."},{"_id":"55c55cce66fd9c8c649117c2","treeId":"55c55cce66fd9c8c649117a2","seq":3449436,"position":3,"parentId":null,"content":"`CSS for this guide`\n\n<style>\n\n.card h1, .card h2, .card h3, .card h4 {\n font-family: sans-serif;\n font-weight: 900;\n color: #5C6169;\n}\n\n.card strong {\n font-family: sans-serif;\n font-weight: 900;\n color: #c13814;\n}\n\n.card em {\n font-family: serif;\n font-style: italic;\n color: #000000;\n}\n\n.card a {\n font-family: sans-serif;\n font-weight: 900;\n text-decoration: underline;\n color: #0F6490;\n}\n</style>"}],"tree":{"_id":"55c55cce66fd9c8c649117a2","name":"flowscape Gingko Guide","publicUrl":"flowscape-gingko-guide","latex":true}}