# Table of Contents
- [Table of Contents](#table-of-contents)
- [How do you use ttcMD?](#how-do-you-use-ttcmd)
  - [Enhanced Standard Elements](#enhanced-standard-elements)
    - [Links](#links)
  - [Custom Elements](#custom-elements)
    - [Pop-outs](#pop-outs)
  - [Block-level Elements](#block-level-elements)
    - [Accordions](#accordions)

# How do you use ttcMD?

ttcMD is a flavor of markdown that has been specifically designed to use with [ttcQuery](/help/ttcQuery.md). It has all of the basic syntax of [markdown](https://www.markdownguide.org/cheat-sheet/), but also includes Tables, basic Fenced Code Blocks and a slew of custom elements and styling annotations.

## Enhanced Standard Elements

This section will cover all of the enhancements that are added for basic markdown elements

### Links

You can use the typical link syntax: `[link name](/link/location)`, but there are a few presets that allow you to style them to look a bit nicer.

**Primary Button:**

Prefix the link name with ````button` to create a button.
`[```button link name](#links)` produces:

[```button link name](#links)

**Call to Action:**

Prefix the link name with ````cta` to create a modestly styled button/call to action.
`[```cta link name](#links)` produces:

[```cta link name](#links)

## Custom Elements

This section will cover the specific elements custom built for Tabletop Commander.

### Pop-outs

Pop-outs, or popovers, are the little cards that "pop out" when you hover over an item.

The syntax is thus: `^[pop-out title]<<pop-out content>>`. The pop-out title will be rendered inline, just like a link, and the content will be included in the pop-out itself. Content can also include inline markdown elements as well, so you can format the content within as well.

Example:

This syntax `^[goofy!]<<This is my *favorite* picture: ![goofy](https://yt3.ggpht.com/a/AATXAJwbIW0TwEhqdT2ZPeSB1AtdtWD2ZXam80oijg=s900-c-k-c0xffffffff-no-rj-mo)>>` will produce this element: ^[goofy!]<<This is my *favorite* picture: ![goofy](https://yt3.ggpht.com/a/AATXAJwbIW0TwEhqdT2ZPeSB1AtdtWD2ZXam80oijg=s900-c-k-c0xffffffff-no-rj-mo)>>

Note: currently, only inline elements are available, so formatting is limited

## Block-level Elements

Block-level elements have a slightly different syntax than the single-line and inline elements we've seen so far. In order to use block-level elements, they *must* be formatted correctly, including the empty lines. As a general rule, you cannot nest block-level elements within themselves, but you can nest different block-level elements within it.

### Accordions

Accordions are when you can click an item to expand it to show additional information.

Syntax: 

[][][]
```
[accordion title]

whatever markdown you desire, including non-accordion block elements

[/accordion]
```

[accordion this is what an accordion looks like]

This is the body of the accordion.

As you can see, I can do normal markdown in here.

I can include a [link](#accordions), or *italic* and **bold** text.

[[
I can even include a card, like this one
]]
[/accordion]
/[]