Add syntax document

docs/syntax.md

@@ -0,0 +1,69 @@
+# 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]`
+