Use markdown in Guru cards

There are three ways we can use markdown in guru cards:

1. Make a card whose content is pure markdown. Cards created through our WYSIWYG editor are HTML but you can provide markdown as the card's content when you're importing or using our API directly.
2. Put the markdown content in a Guru "markdown block". Normally people do this through our editor but you can also do this while importing or using our API.
3. Convert the markdown to HTML then create a card with that HTML as its content.

Generally the best results come from the second method. Here is a comparison of each:

✳ means it depends on the capabilities of your markdown converter, which can differ from the capabilities your markdown editor/viewer.

¹ these tables don't have header styling applied to their first row.

² The mouse cursor doesn't change to indicate the image is clickable but clicking it does open the link's URL.

Our markdown blocks have the best capabilities but setting them up isn't entirely intuitive. Also, when you edit those cards in guru you'll be editing them using markdown. The cards created the other ways can be edited using our WYSIWYG features.

Creating a Guru Markdown block

A Guru Markdown Block is what you get when you insert a markdown block in our WYSIWYG editor. If you're importing cards to Guru or using our API to create cards, you'll have to build the HTML for these blocks yourself. This section explains how.

A Guru Markdown Block is a single div that looks like this:

<div class="ghq-card-content__markdown" data-ghq-card-content-type="MARKDOWN" data-ghq-card-content-markdown-content="..."></div>

Its data-ghq-card-content-markdown-content attribute contains the markdown code. Since it's an HTML attribute, this string has to be URL encoded.

Here's some sample markdown content. We recommend wrapping link URLs in <> in case the URL contains spaces or other symbols.

## My Markdown DocumentThis card uses [markdown](<https://app.getguru.com/card/ceE6gnEi/How-to-use-markdown-in-Guru-cards>).

To make a Guru Markdown Block we encode this entire string and put it in the data-ghq-card-content-markdown-content attribute, so resulting HTML is:

<div class="ghq-card-content__markdown" data-ghq-card-content-type="MARKDOWN" data-ghq-card-content-markdown-content="%23%23%20My%20Markdown%20Document%0A%0AThis%20card%20uses%20%5Bmarkdown%5D(%3Chttps%3A%2F%2Fapp.getguru.com%2Fcard%2FceE6gnEi%2FHow-to-use-markdown-in-Guru-cards%3E)."></div>

When a card with this type of HTML is imported, synced, or created via the API, it'll behave just like a Guru Markdown Block you can create in our WYSIWYG editor.