Emma
d0cb74bea8
help pages: adds a way to extract the table of contents to the parent, smoothes out the rough loading on help pages
171 lines
4.2 KiB
Markdown
171 lines
4.2 KiB
Markdown
# Table of Contents
|
|
- [Table of Contents](#table-of-contents)
|
|
- [What even is ttcMD?](#what-even-is-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)
|
|
- [Card](#card)
|
|
- [Grid](#grid)
|
|
|
|
---
|
|
|
|
# What even is 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: >>` will produce this element: ^[goofy!]<<This is my *favorite* picture: >>
|
|
|
|
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]
|
|
/[]
|
|
|
|
### Card
|
|
|
|
Cards are just neat boxes. They can hold any markdown within them, but not other cards (it looks bad).
|
|
|
|
[][][]
|
|
```
|
|
[[
|
|
Card text!
|
|
|
|
This is a real wild thing! Look, an accordion!
|
|
|
|
[accordion Hello, am accordion!]
|
|
super secret! I'll never tell!
|
|
[/accordion]
|
|
]]
|
|
```
|
|
[[
|
|
|
|
Card text!
|
|
|
|
This is a real wild thing! Look, an accordion!
|
|
|
|
[accordion Hello, am accordion!]
|
|
|
|
Never gonna give you up,\n
|
|
Never gonna let you down,\n
|
|
Never gonna run around\n
|
|
And desert you.
|
|
|
|
Never gonna make you cry,\n
|
|
Never gonna say good-bye,\n
|
|
Never gonna tell a lie\n
|
|
And hurt you.
|
|
|
|
[/accordion]
|
|
]]
|
|
/[]
|
|
|
|
### Grid
|
|
|
|
Grid blocks give you access to basic grid layouts. You define the number of columns in the grid by using a number of matching brackets.
|
|
|
|
[][][]
|
|
[[
|
|
|
|
```
|
|
[][][]
|
|
|
|
This will make three columns, just like how this is laid out right now.
|
|
|
|
Each element will get its own cell in the grid.
|
|
|
|
So each of these paragraphs will end up in a separate column.
|
|
|
|
/[]
|
|
```
|
|
|
|
]]
|
|
|
|
[[
|
|
```
|
|
[][]
|
|
|
|
This will make two columns
|
|
|
|
[[
|
|
Each column can use a different element
|
|
]]
|
|
|
|
/[]
|
|
```
|
|
]]
|
|
|
|
[[
|
|
This card will end up in the third column...
|
|
]]
|
|
|
|
[[
|
|
... but since there isn't enough for this one, it will automatically get moved to the next row.
|
|
]]
|
|
|
|
/[] |