We have a few pretty powerful markdown extensions, borrowed mostly from MultiMarkdown. Below is a guide on how to use them!
Definition Lists
Definition (or description) lists are a way to describe things like word definitions or properties.
Apple
: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
: An american computer company.
Orange
: The fruit of an evergreen tree of the genus Citrus.
Becomes
- Apple
- Pomaceous fruit of plants of the genus Malus in
the family Rosaceae. - An american computer company.
- Orange
- The fruit of an evergreen tree of the genus Citrus.
Quote Citations
Adding a citation to a quote requres a tiny bit of HTML in the form of a cite element:
> The greatest glory in living lies not in never falling, but in rising every time we fall.
> <cite>Nelson Mandela</cite>
Becomes
The greatest glory in living lies not in never falling, but in rising every time we fall.
Nelson Mandela
Markdown formatting cannot be used inside html, so you’ll have to use HTML to make parts of your citation look different.
Advanced Images
You can do a few extra things with images in Markdown.
Change Image Size
By adding =WIDTHxHEIGHT after the image URL, you can change what size the image is displayed as.
Becomes
You can also omit either the width or the height to scale the image proportionally:
Becomes
While writing
Becomes
Hover Text
You can add hover text (technically title text) to an image by putting some words inside quotes within the parentheses:
![Roleplaying ... It's like that](/roleplaying.jpg "Playing in the woods" =200x)
Becomes
When you use both hover text and a custom size, the size instruction must always come last.
Image Decor
You can use special decor classes to add some flair to an image. The decor-shadow class adds a drop shadow:
{.decor-shadow}
Becomes
The shadow effect is subtle, but can help to make an image stand out slightly when its background otherwise blends into the page.
While the decor-outline class adds an outline:
{.decor-outline}
Becomes
You can also combine the two:
{.decor-shadow .decor-outline}
Becomes
Image Creator Attribution
A neat, but fiddly, addition to images is the ability to add a small attribution link or text. The syntax involves multiple elements and classes, all of which must appear after a newline:
[Talarius](https://wiki.talarius.org){.is-attrib}
{.img-with-attrib}
Creates the following:
While using this format, the size applied to the image is ignored. Instead, you must add one of the built-in size classes to the wrapper, by putting it after img-with-attrib. The size classes are width-400, width-500, and width-600.
.width-400
.width-500
.width-600
Positioning the image works just like normal, except that the class must be placed on the wrapper. Image decor classes can be put on the image as per usual.
Content Tabs
If you have a closely related set of items, you can put them into tabs by using the .tabset class on the parent header. Subsequent headers of a deeper level will be treated as tab titles.
### Section Header {.tabset}
#### Tab 1
Tab 1 contents go here
#### Tab 2
Tab 2 contents go here
#### Tab 3
Tab 3 contents go here
Tab 1 contents go here
Tab 2 contents go here
Tab 3 contents go here
Notes
Once a header is marked as the start of a tab set, everything afterwards is considered part of the tabs until the next header of equal or lower level to the parent. I.e. a tabset that begins with ### Tabset will end at the next header with three, two, or one hash marks. That’s why this section is under a header called Notes. Otherwise, it would be part of Tab 3.
While writing, a tabset’s contents are shown serially. The full set of tabs is only generated when the page is saved.
The header that begins a tabset is not rendered and will not appear in the page’s TOC.
Tables
Markdown can do tables! Here’s the basic syntax:
| First Header | Second Header | Third Header |
| ------------ | :------------: | -----------: |
| Content | *Center Cell* | Right-cell |
| Content | **Bold Cell** | Cell |
| New section | More | Data |
Becomes
| First Header | Second Header | Third Header |
|---|---|---|
| Content | Center Cell | Right-cell |
| Content | Bold Cell | Cell |
| New section | More | Data |
Pay attention to the colons on either side of the lines just under the headers. These control whether the contents of the cells will be left-justified, centered, or right-justified.
Titles
You can add a title (technically caption) to your table by putting in square brackets after the table:
| First Header | Second Header | Third Header |
| ------------ | :------------: | -----------: |
| Content | *Center Cell* | Right-cell |
| Content | **Bold Cell** | Cell |
| New section | More | Data |
[Basic Example Table]
Becomes
| First Header | Second Header | Third Header |
|---|---|---|
| Content | Center Cell | Right-cell |
| Content | Bold Cell | Cell |
| New section | More | Data |
Appearance Tweaks
Tables have a few formatting classes you can use to change their appearance. First, you can shade every other row and column using .shaded-table:
| First Header | Second Header |
|---|---|
| content | data |
| content | data |
| content | data |
{.shaded-table}
Appears like:
| First Header | Second Header |
|---|---|
| content | data |
| content | data |
| content | data |
If you have a table with lots and lots of data, you can shrink it down so it’s easier to see more at once using the .dense class:
| last_name | first_name | player_id | attempts | avg_hit_angle | anglesweetspotpercent | max_hit_speed | avg_hit_speed | fbld | gb | max_distance | avg_distance | avg_hr_distance | ev95plus | ev95percent | barrels | brl_percent | brl_pa |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Semien | Marcus | 543760 | 547 | 19.9 | 32.4 | 110.1 | 87.3 | 91.3 | 84.2 | 430 | 186 | 394 | 191 | 34.9 | 37 | 6.8 | 5.1 |
| Rosario | Amed | 642708 | 530 | 5 | 31.1 | 110.8 | 88.4 | 92.1 | 86.9 | 450 | 138 | 407 | 203 | 38.3 | 24 | 4.5 | 3.6 |
| Ramírez | José | 608070 | 528 | 20.7 | 33.7 | 114.2 | 87.7 | 91.2 | 86.9 | 422 | 179 | 392 | 195 | 36.9 | 35 | 6.6 | 5.1 |
| Turner | Trea | 607208 | 527 | 10.2 | 35.3 | 112.5 | 88.9 | 92.1 | 86.3 | 439 | 163 | 402 | 219 | 41.6 | 40 | 7.6 | 5.6 |
| Guerrero | Vladimir | 665489 | 526 | 4.3 | 27.9 | 118.4 | 92.8 | 98.2 | 90.3 | 467 | 144 | 407 | 265 | 50.4 | 59 | 11.2 | 8.4 |
| Freeman | Freddie | 518692 | 517 | 13.6 | 42.9 | 112.3 | 91.3 | 94.5 | 87.5 | 446 | 185 | 407 | 247 | 47.8 | 51 | 9.9 | 7.2 |
| Verdugo | Alex | 657077 | 513 | 8.4 | 37.8 | 111 | 89.1 | 93.1 | 85.9 | 447 | 162 | 399 | 196 | 38.2 | 31 | 6 | 4.8 |
| Kwan | Steven | 680757 | 509 | 11.8 | 34.6 | 107.1 | 85.1 | 87.4 | 83.9 | 400 | 155 | 381 | 106 | 20.8 | 7 | 1.4 | 1.1 |
| Arraez | Luis | 650333 | 507 | 12.9 | 38.7 | 107.3 | 88.9 | 90.8 | 87.5 | 403 | 169 | 381 | 153 | 30.2 | 18 | 3.6 | 3 |
| Lindor | Francisco | 596019 | 504 | 13.8 | 29.2 | 110.7 | 89.3 | 93.5 | 86.7 | 440 | 163 | 394 | 208 | 41.3 | 42 | 8.3 | 5.9 |
If that’s not small enough, there’s also the .very-dense class:
| last_name | first_name | player_id | attempts | avg_hit_angle | anglesweetspotpercent | max_hit_speed | avg_hit_speed | fbld | gb | max_distance | avg_distance | avg_hr_distance | ev95plus | ev95percent | barrels | brl_percent | brl_pa |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Semien | Marcus | 543760 | 547 | 19.9 | 32.4 | 110.1 | 87.3 | 91.3 | 84.2 | 430 | 186 | 394 | 191 | 34.9 | 37 | 6.8 | 5.1 |
| Rosario | Amed | 642708 | 530 | 5 | 31.1 | 110.8 | 88.4 | 92.1 | 86.9 | 450 | 138 | 407 | 203 | 38.3 | 24 | 4.5 | 3.6 |
| Ramírez | José | 608070 | 528 | 20.7 | 33.7 | 114.2 | 87.7 | 91.2 | 86.9 | 422 | 179 | 392 | 195 | 36.9 | 35 | 6.6 | 5.1 |
| Turner | Trea | 607208 | 527 | 10.2 | 35.3 | 112.5 | 88.9 | 92.1 | 86.3 | 439 | 163 | 402 | 219 | 41.6 | 40 | 7.6 | 5.6 |
| Guerrero | Vladimir | 665489 | 526 | 4.3 | 27.9 | 118.4 | 92.8 | 98.2 | 90.3 | 467 | 144 | 407 | 265 | 50.4 | 59 | 11.2 | 8.4 |
| Freeman | Freddie | 518692 | 517 | 13.6 | 42.9 | 112.3 | 91.3 | 94.5 | 87.5 | 446 | 185 | 407 | 247 | 47.8 | 51 | 9.9 | 7.2 |
| Verdugo | Alex | 657077 | 513 | 8.4 | 37.8 | 111 | 89.1 | 93.1 | 85.9 | 447 | 162 | 399 | 196 | 38.2 | 31 | 6 | 4.8 |
| Kwan | Steven | 680757 | 509 | 11.8 | 34.6 | 107.1 | 85.1 | 87.4 | 83.9 | 400 | 155 | 381 | 106 | 20.8 | 7 | 1.4 | 1.1 |
| Arraez | Luis | 650333 | 507 | 12.9 | 38.7 | 107.3 | 88.9 | 90.8 | 87.5 | 403 | 169 | 381 | 153 | 30.2 | 18 | 3.6 | 3 |
| Lindor | Francisco | 596019 | 504 | 13.8 | 29.2 | 110.7 | 89.3 | 93.5 | 86.7 | 440 | 163 | 394 | 208 | 41.3 | 42 | 8.3 | 5.9 |
Cells spanning multiple columns
You can have a table with cells which span multiple columns:
| | Grouping ||
| First Header | Second Header | Third Header |
| ------------ | :-----------: | -----------: |
| Content | *Long Cell* ||
| Content | **Cell** | Cell |
Becomes
| Grouping | ||
|---|---|---|
| First Header | Second Header | Third Header |
| Content | Long Cell | |
| Content | Cell | Cell |
Cells spanning multiple rows
You can also have cells which span multiple rows by replacing the cell contents with ^^:
| Stage | Direct Products | ATP Yields |
| ----: | --------------: | ---------: |
| Glycolysis | 2 ATP ||
| ^^ | 2 NADH | 3--5 ATP |
| Pyruvaye oxidation | 2 NADH | 5 ATP |
| Citric acid cycle | 2 ATP ||
| ^^ | 6 NADH | 15 ATP |
| ^^ | 2 FADH2 | 3 ATP |
| **30--32** ATP |||
[Net ATP yields per hexose]
Becomes:
| Stage | Direct Products | ATP Yields |
|---|---|---|
| Glycolysis | 2 ATP | |
| 2 NADH | 3–5 ATP | |
| Pyruvaye oxidation | 2 NADH | 5 ATP |
| Citric acid cycle | 2 ATP | |
| 6 NADH | 15 ATP | |
| 2 FADH2 | 3 ATP | |
| 30–32 ATP | ||
Multiple Sections
You can make tables with multiple sections that all share the same columns:
| | Grouping ||
| First Header | Second Header | Third Header |
| ------------ | :-----------: | -----------: |
| Content | *Long Cell* ||
| Content | **Cell** | Cell |
| New section | More | Data |
| And more | With an escaped '\\|' ||
[Prototype table]
Becomes
| Grouping | ||
|---|---|---|
| First Header | Second Header | Third Header |
| Content | Long Cell | |
| Content | Cell | Cell |
| New section | More | Data |
| And more | With an escaped ‘\|’ | |
Since this feature works by adding a blank line between two parts of a table, two logically separate tables will be incorrectly combined if there is no text separating them. To prevent this, add a bit of text in-between tables.
Headerless Tables
You can make a table that has no header text. Very useful for certain things, like stat blocks:
|--|--|--|--|--|--|
| Intelligence | ●○○○○ | Strength | ●○○○○ | Presence | ●○○○○ |
| Wits | ●○○○○ | Dexterity | ●○○○○ | Manipulation | ●○○○○ |
| Resolve | ●○○○○ | Stamina | ●○○○○ | Composure | ●○○○○ |
Becomes
| Intelligence | ●○○○○ | Strength | ●○○○○ | Presence | ●○○○○ |
| Wits | ●○○○○ | Dexterity | ●○○○○ | Manipulation | ●○○○○ |
| Resolve | ●○○○○ | Stamina | ●○○○○ | Composure | ●○○○○ |
It’s also useful for some diagrams:
|--|--|--|--|--|--|--|--|
|♜| |♝|♛|♚|♝|♞|♜|
| |♟|♟|♟| |♟|♟|♟|
|♟| |♞| | | | | |
| |♗| | |♟| | | |
| | | | |♙| | | |
| | | | | |♘| | |
|♙|♙|♙|♙| |♙|♙|♙|
|♖|♘|♗|♕|♔| | |♖|
Becomes
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
Footnotes
If you want to use footnotes, add the footnote somewhere in the document using the syntax [^refname]: Footnote text. Then, you can reference the footnote by typing [^refname]. The footnotes themselves will always appear at the very bottom of the page.
Example:
Here is a footnote reference,[^1] and another.[^longnote]
[^1]: Here is the footnote.
[^longnote]: Here's one with multiple blocks.
Subsequent paragraphs are indented to show that they belong to the previous footnote.
Becomes
Here is a footnote reference,[1] and another.[2]
Footnotes are automatically numbered, so you can use meaningful names instead of keeping track of indexes.
Abbreviations
You can add expansions for common abbreviations. They’ll be underlined wherever used, and hovering over the abbreviation will show its expanded form. Use the syntax *[abbr]: Abbreviation definition on its own line to define an abbreviation.
Example:
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.
Becomes
The HTML specification is maintained by the W3C.
Abbreviations don’t work well on mobile devices. The definition is never shown, thanks to the lack of hover state.
Keep in mind that once you’ve defined an abbreviation on a page, every instance of that abbreviation text will show the definition. So on this page, every single instance of HTML will show “Hyper Text Markup Language” on hover.
Emoji
Emojis are natively supported! Type them using the syntax :emoji-name: and the named emoji will be inserted.
Example:
:smile:
Becomes
There are also some shortcuts that replace common text expressions, like ;-) becomes 
.
For a full list of supported emojis, check out the Emoji List.
Marked / Highlighted Text
You can highlight a word or phrase by wrapping it in double equal signs:
Here's a sentence with ==two highlighted== words.
Here’s a sentence with two highlighted words.
You can change the color of the highlight by adding a class to the highlight:
A word ==highlighted=={.marker-blue} in blue.
A word highlighted in blue.
| Class | Appearance |
|---|---|
| marker-yellow | yellow (default) |
| marker-blue | blue |
| marker-pink | pink |
| marker-green | green |
Highlighted text also supports two pen colors: red and green:
==red=={.pen-red} and ==green=={.pen-green}
The highlighter markup is intended for drawing attention to specific bits of text, not for general-purpose formatting. See Text Coloring below for more.
Text Coloring
You can change the background or foreground color of text by putting it in square brackets and adding one of the classes below:
This text is [colored red]{.font-red}.
Becomes
This text is colored red.
The class names and their exact colors might change as this feature develops.
There are a bunch of colors available:
| Background | Foreground | ||
|---|---|---|---|
| Class | Color | Class | Color |
| .bg-white | white | .font-white | white |
| .bg-light-gray | light-gray | .font-light-gray | light-gray |
| .bg-gray | gray | .font-gray | gray |
| .bg-dim-gray | dim-gray | .font-dim-gray | dim-gray |
| .bg-black | black | .font-black | black |
| .bg-red | red | .font-red | red |
| .bg-orange | orange | .font-orange | orange |
| .bg-yellow | yellow | .font-yellow | yellow |
| .bg-aqua | aqua | .font-aqua | aqua |
| .bg-green | green | .font-green | green |
| .bg-light-green | light-green | .font-light-green | light-green |
| .bg-turquoise | turquoise | .font-turquoise | turquoise |
| .bg-blue | blue | .font-blue | blue |
| .bg-light-blue | light-blue | .font-light-blue | light-blue |
| .bg-purple | purple | .font-purple | purple |
LaTeX Formulas
If you need to insert a math formula, for some reason, you can do so using the $$ block. Formulas are rendered using Katex.
$$
c = \pm\sqrt{a^2 + b^2}
$$
Becomes
Complex Diagrams
Talarius natively supports a bunch of diagram drawing backends, thanks to Kroki. See the Kroki website to find out which languages are supported.
Example:
```kroki
mermaid
graph TD
A[ Anyone ] -->|Can help | B( Go to github.com/yuzutech/kroki )
B --> C{ How to contribute? }
C --> D[ Reporting bugs ]
C --> E[ Sharing ideas ]
C --> F[ Advocating ]
`` `
Becomes
Kroki diagrams are created after saving the page and do not show up in the markdown editor’s preview pane.
Timelines
Talarius has its very own custom syntax for creating fancy timelines in markdown.
They take up a lot of room, though, so you can read about them in the Timeline Guide.