# Misskey-flavored Markdown syntax and cheat sheet

this document acts as the canonical source of information about MFM implemented
by `marked-mfm`. if you are looking for the implementation used in Misskey, refer
to [this page on
`mfm.js`](https://github.com/misskey-dev/mfm.js/blob/develop/docs/syntax.md).

## Markdown-to-HTML parser

all MFM elements are parsed to HTML like so:

```html
<span class="mfm _mfm_tag_" data-param1 data-param2>text</span>
```

refer to the rest of the document for information on tags and parameters.

## MFM tags

| MFM              | summary                                    |
|------------------|--------------------------------------------|
| `$[tada text]`   | "tada!"-like animation                     |
| `$[jelly text]`  | squashing and stretching animation         |
| `$[twitch text]` | stuttering animation                       |
| `$[shake text]`  | stuttering and rotating animation          |
| `$[spin text]`   | spinning animation                         |
| `$[jump text]`   | jumping animation                          |
| `$[bounce text]` | jumping and squashing animation            |
| `$[flip text]`   | mirrors the element                        |
| `$[x2 text]`     | big text                                   |
| `$[x3 text]`     | bigger text                                |
| `$[x4 text]`     | even bigger text                           |
| `$[font text]`   | sets a font do display the content in      |
| `$[rotate text]` | rotates the element by a number of degrees |

## optional parameters

some MFM elements allow specifying additional attributes in the tag. this is
done by adding a `.` to the tag name, followed by a comma-separated list of
attributes.

example: `$[spin.alternate,speed=3s text]`

- **`speed`**  
  *valid in: `jelly`, `twitch`, `shake`, `spin`*  
  a number, in seconds, that defines the duration of the animation  
  example: `$[jelly.speed=2s text]`
- **`h`, `v`**  
  *valid in: `flip`*  
  defines the axis the element is flipped upon; horizontally, vertically, or
  both  
  example: `$[flip.h.v text]`
- **`x`, `y`**  
  *valid in: `spin`*  
  defines the axis on which to spin the element  
  example: `$[spin.x text]`
- **`alternate`, `left`**  
  *valid in: `spin`*  
  defines whether to run the spinning animation in reverse, or to alternate it  
  example: `$[spin.left text]`
- **`serif`, `monospace`, `cursive`, `fantasy`, `emoji`, `math`**  
  *valid in: `font`*  
  sets the font inside the font element; if unset, the element does nothing  
  example: `$[font.fantasy text]`
* **`deg`**  
  *valid in: `rotate`*  
  a number of degrees to rotate the element; if unset, 30° is used  
  example: `$[rotate.deg=120 text]`