tabletop-commander/md/help articles/How to use ttcMD.md

87 lines
3.0 KiB
Markdown

# 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]
/[]