Guide to Markdown on Fluffle.cc
This guide will only mention custom syntaxes that are not standard Markdown. For regular Markdown, the Markdown guide Cheat Sheet should help you.
Fluffle's Markdown conforms to CommonMark and GitHub Flavored Markdown.
Alignment
You can align specific text leafs by surrounding the leaf in arrows. The first arrow should always be pointing right, but the last arrow can point either to the left or right to change direction to center or right, respectively.
Center alignment:
-> center <-
Right alignment:
-> right ->
Notice the change in the closing arrow's direction, as that is the only thing that decides direction.
Text color
You can color individual text leafs by encompassing them in the simple text color syntax. This syntax should feel familiar, but it looks like this:
%color% text %%
You can replace color in the above example with any valid CSS color. This means you can use names such as just red or blue, but you can also use hex codes (#ff0000 or #0000ff for red or blue), and RGB codes (rgb(255, 0, 0) for red and rgb(0, 0, 255) for blue).
Underline
You can underline text leafs using the following syntax:
!~color;style;line;thickness;text~!
Each option is separated by a semicolon (;), and each option is invalid EXCEPT the first option, which denotes color. Each option lines up to a CSS property:
- color: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
- style: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
- line: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
- thickness: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness
You can also use default to use the default value instead of having to specify your value. This is useful if you only want to change a later value (since the options must be in order of the list above).
!~red;default;default;2px;text~!
The above snippet will create a red underline with the default style, default line, and a thickness of 2 pixels.
Image sizing
You can include the image sizing expression onto the end of any image block to control its size. Image sizing should be two CSS sizes, separated by a colon (:) character and enclosed in curly braces ({, }). Not providing a unit will default the unit to pixels (px).
{size:size}
Here's a quick example:
{24:24}