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:

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).

![alt](url){size:size}

Here's a quick example:

Tetratto bunny by @rotters

![Tetratto bunny by @rotters](https://tetratto.com/public/tetratto_bunny.webp){24:24}

Pages

You can include multiple pages within the same entry.

Each page is denoted with two at symbols, followed by the name of the page. The page can also have an optional second argument (separated by a semicolon) which accepts the “visible” value; marking the page as visible by default.

To close a page (after you’re done with the page’s content), just put two at symbols with nothing else on the line.

You’re able to put content AFTER the page closing line. This allows you to have persistant content which is shared between every page. Only content within pages is hidden when navigating to another page. This means everything in the entry that isn’t part of a page will remian throughout navigations.

@@ home; visible
this is the homepage which is shown by default!
@@

@@ about
this is the about page which is NOT shown by default! a link with an href of "#/about" will open this page
@@

Details

You can use details to include expandable elements to hide longer content by default.

Details are written in essentially the same way as pages, just with ampersands instead. The opening line includes the element's summary (what is shown BEFORE expanding).

&& other summary
this element starts closed, but can be expanded
&&