Fuck Around And Find Out

___

# [General](https://www.markdownguide.org/cheat-sheet/) [Apersand](https://codeberg.org/Ampersand/app/wiki/Markdown)

This is not a full 100% guide to what you can do; this is mostly to show generally what is possible with markdowns. the Ampersand markdown wiki (linked ^) has links to more resources. I also encourage experimentation!

'colour' can be replaced with hexcodes or [named colours](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/named-color), and you can use [colour mixing](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix).

[bt=thick solid #ec6073]Animations & marquee have been put at the end due to risk of seizures. If you are at risk please disable animations in the accessibility settings.[/bt]

___

[fs=2]++TEXT++[/fs]

# heading 1

## heading 2

### heading 3

**bold** *italic* ` code ` ~~strikethrough~~ ==highlight== ~subscript~

^superscript^ ||spoiler|| #blurred# ++underlined++

<#1BA376> (generate coloured dot)

:::- {grey} markdown:

1x:# heading 1

2x:# heading 2

3x:# heading 3

** bold ** [fg=grey]remove the spaces between the * and the text.[/fg]

* italic * [fg=grey]remove the spaces between the * and the text.[/fg]

~~ strikethrough ~~ [fg=grey]remove the spaces between the ~~ and the text.[/fg]

~ subscript ~ [fg=grey]remove the spaces between the ~ and the text.[/fg]

superscript: ^ on each side of the text.

highlight: == on each side of the text.

code: ` on each side of the text.

<colour> (generate coloured dot)

:::

[fs=1.5]Scaled Text[/fs] [fs=1.5:0.5]Scaled text[/fs] [rot=180deg]Rotated text[/rot] [pos=1.25:1.25]Shifted text[/pos] [ff=handwritten]Font[/ff]

:::- {grey} markdown:

[fs=n]scaled text[/fs] [fg=grey]Where n is a number.[/fg]

[fs=x:y]scaled text[/fs] [fg=grey]Where x is the width and y is the height.[/fg]

[rot=n]rotated text[/rot] [fg=grey]Where n is a number specified in degrees, turns or radiants (ex. 134deg, 0.5turn, 3.1rad).[/fg]

[pos=x:y]shifted text[/pos]

[fg=grey]- Where x is the horizontal position and y is the vertical position.[/fg]

[fg=grey]- Can be used on images.[/fg]

[ff =font-name]Different font[/ff] [fg=grey]Remove the space between the f and =.[/fg]

[fg=grey]Put a @ infront of the font-name if the font was uploaded to the asset manager.[/fg]

[ff =@font-name: axis1 number: axis2 number]Different font[/ff] [fg=grey]Remove the space between the f and =.[/fg]

:::

:::- Default font types:

++FONT-NAME:++

[fs=2][ff=cursive]Cursive[/ff][/fs] [fs=2][ff=pixel]Pixel[/ff][/fs] [fs=2][ff=dots]Dots[/ff][/fs] [fs=2][ff=digital]Digital[/ff][/fs] [fs=2][ff=handwritten]Handwritten[/ff][/fs] [fs=2][ff=serif]Serif[/ff][/fs] [fs=2][ff=monospace]Monospace[/ff][/fs] [fs=2][ff=playful]Playful[/ff][/fs] [fs=2][ff=holy]Holy[/ff][/fs] [fs=2][ff=]bubbly]Bubbly[/ff][/fs] [fs=2][ff=marker]Marker[/ff][/fs] [fs=2][ff=metal]Metal[/ff][/fs] [fs=2][ff=cutesy]Cutesy[/ff][/fs] [fs=2][ff=gothic]Gothic[/ff][/fs] [fs=2][ff=stencil]Stencil[/ff][/fs] [fs=2][ff=mystery]Mystery[/ff][/fs] [fs=2][ff=western]Western[/ff][/fs] [fs=2][ff=deco]Deco[/ff][/fs] [fs=2][ff=indie]Indie[/ff][/fs] [fs=2][ff=glitch]Glitch[/ff][/fs] [fs=2][ff=stripes]Stripes[/ff][/fs] [fs=2][ff=thin]Thin[/ff][/fs] [fs=2][ff=italian]Italian[/ff][/fs] [fs=2][ff=atkinson]Atkinson[/ff][/fs] [fs=2][ff=dyslexic]Dyslexic[/ff][/fs] [fs=2][ff=lexend]Lexend[/ff][/fs] [fs=2][ff=comic]Comic[/ff][/fs] [fs=2][ff=inter]Inter[/ff][/fs]

:::

:::- {blank} More info on fonts:

[fg=grey]You can use any font (files ending in .ttf, .otf, .woff, .woff2) added into the asset manager.[/fg]

[fg=grey]Modern fonts can have variable axes and those can be specified within the font-family syntax. Disabled: editing the italic, optical size, slant, weight axes (as it'd conflict with other Markdown syntax) but allow everything else.[/fg]

[fg=grey]Only two of the preset fonts have editable variable axes: handwritten (shantell hans) and dots (bitcount single). You can look at their sources linked to see which axes can be edited.[/fg]

:::

[fg=#1BA376]Colored text[/fg] [bg=#1ba376]Coloured background[/bg] [bg=#1ba376:grey]Gradient example[/bg]

:::- {grey} markdown

++BASIC MARKDOWN:++

[fg =colour]Coloured text[/fg] [fg=grey]Remove the space between g and =.[/fg]

[bg =colour]Coloured background[/bg] [fg=grey]Remove the space between the g and =.[/fg]

[fg=grey]- you can add more that 1 colour; just put a : between them.[/fg]

++COMPLICATED MARKDOWN:++

[fg =direction:color start_n% end_n%: tint%: color2 start_n% end_n%]Colored text[/fg] [fg=grey]Remove the space between g and =.[/fg]

[bg =direction:color start% end%: tint%: color2 start% end%]Colored background[/bg] [fg=grey]Remove the space between g and =.[/fg]

[fg=grey]- you can specify the direction of the gradient using left, right, top, bottom, top left, top right, bottom left, bottom right, or specified in degrees, turns or radiants (ex. 186deg, 0.5turn, 2.4rad). This can be left out.[/fg]

[fg=grey]- You can specify where a color should start and end in the gradient with start_n% and end_%. This can also be left out.[/fg]

[fg=grey]- Tint can be left out.[/fg]

:::

:::- Gradient examples:

++DIRECTION:++ (the green is colour1, the grey is colour2)

[bg=top:#1BA376:grey]Top[/bg] [bg=top left:#1ba376:grey]Top left[/bg] [bg=top right:#1ba376:grey]Top right[/bg]

[bg=bottom:#1ba376:grey]Bottom[/bg] [bg=bottom left:#1ba376:grey]Bottom left[/bg] [bg=bottom right:#1ba376:grey]Bottom right[/bg]

[bg=left:#1ba376:grey]Left[/bg] [bg=right:#1ba376:grey]Right[/bg]

++OTHER SPECIFICATIONS:++

[bg=#1ba376 0% 25%:grey 25% 100%]Percentages example[/bg] [fg=grey]Green 0% to 25% and grey 25% to 100%[/fg]

[bg=#1ba376:5%:grey]Tint example[/bg] [fg=grey]tint at 5%.[/fg]

:::

[td=underline solid auto #1ba376]Text decoration[/td] [sh=5px 5px 1px #1ba376]Text shadow[/sh] [bt=medium solid #1ba376]Text border[/bt]

:::- {grey} markdown:

[td =decoration style thickness color]Text decoration[/td] [fg=grey]Remove the space between the d and =.[/fg]

[fg=grey]- thickness is in px[/fg]

[sh =Xpx Ypx Bpx color]Text shadow[/sh] [fg=grey]Remove the space between the h and =.[/fg]

[fg=grey]- The X and Y are where the shadow is in relation to the text.[/fg]

[fg=grey]- B is the blur of the shadow.[/fg]

[bt =thickness style color]Text border[/bt] [fg=grey]Remove the space between the t and =.[/fg]

[fg=grey]- thickness can be in px or thin, medium, thick.[/fg]

[fg=grey]- 1 value specified: applies the same style to all 4 sides.[/fg]

[fg=grey]- 2 values specified: 1st style applies to the top and bottom, the 2nd to the left and right.[/fg]

[fg=grey]- 3 values specified: 1st style applies to the top, the 2nd to the left and right, the 3rd to the bottom.[/fg]

[fg=grey]- 4 values specified: applies the 1st to the top, 2nd to the right, 3rd to the bottom & 4th to the left.[/fg]

:::

:::- Decoration examples:

++DECORATION:++

[td=underline solid auto #1ba376]Underline[/td] [td=overline solid auto #1ba376]Overline[/td] [td=line-through solid auto #1ba376]Line-through[/td]

[fg=grey]These two don't need style, thickness or colour:[/fg]

[td=spelling-error]Spelling-error[/td] [td=grammar-error]Grammar-error[/td]

++STYLE:++

[td=underline solid auto #1ba376]Solid[/td] [td=underline double auto #1ba376]Double[/td] [td=underline dotted auto #1ba376]Dotted[/td] [td=underline dashed auto #1ba376]Dashed[/td] [td=underline wavy auto #1ba376]Wavy[/td]

:::

:::- Border examples:

++THICKNESS:++

[bt=thin solid #1ba376]Thin[/bt] [bt=medium solid #1ba376]Medium[/bt] [bt=thick solid #1ba376]Thick[/bt]

++STYLE:++

[bt=medium solid #1ba376]Solid[/bt] [bt=medium double #1ba376]Double[/bt] [bt=medium dotted #1ba376]Dotted[/bt] [bt=medium dashed #1ba376]Dashed[/bt] [bt=medium groove #1ba376]Groove[/bt] [bt=medium ridge #1ba376]Ridge[/bt] [bt=medium inset #1ba376]Inset[/bt] [bt=medium outset #1ba376]Outset[/bt]

++APPLYING MULTIPLE:++ [fg=grey]1st style: solid, 2nd style: double, 3rd style: dotted, 4th style: dashed.[/fg]

[bt=medium solid #1ba376]1 value[/bt] [bt=medium solid #1ba376:medium double #1ba376]2 values[/bt] [bt=medium solid #1ba376:medium double #1ba376:medium dotted #1ba376]3 values[/bt] [bt=medium solid #1ba376:medium double #1ba376:medium dotted #1ba376:medium dashed #1ba376]4 values[/bt]

:::

<|aligned left<|

|>alighned right|>

|>aligned middle<|

<|aligned left<|

|>aligned middle<|

|>aligned right|>

|>aligned middle<|

:::- {grey} markdown:

aligned left: <| either side

alighned right: |> either side

|>aligned middle<|

[fg=grey]If you want the example to be as shown above, copy the markdown in that exact order with spaces between each line and any before/after it.[/fg]

[fg=grey]You can also play around with order to see how they interact with each other & other text. If other text is being caught up in the alignment, you can link an image that doesn't actually exist (I put a . where the image name would be) and this will act as a non-visible buffer for other text.[/fg]

:::

> blockquote (1 level)

>

>> blockquote (2 levels)

>>

>>> blockquote (3 levels)

>>>

:::- {grey} markdown:

> blockquote (1 level)

>

>> blockquote (2 levels)

>>

>>> blockquote (3 levels)

>>>

:::

1. ordered list

2. ordered list item 2

- unordered list

- unordered list

- [x] checked task

- [ ] unchecked task

:::- {grey} markdown:

1. ordered list

2. ordered list item 2

- unordered list

- unordered list

- [x] checked task

- [ ] unchecked task

:::

[link](https://www.markdownguide.org/cheat-sheet/)

<IMAGE>

<mention>

:::- {grey} markdown:

++LINK:++

[title] (https://www.example.com) [fg=grey]remove the spaces between the ] and (.[/fg]

++IMAGE:++

! [alt text] (image.jpg) [fg=grey]remove the spaces between the ! and [ & the ] and (.[/fg]

++CHANGE IMAGE SIZE:++ [fg=grey](again, remove the spaces)[/fg]

! [asset alt text] (@asset_name#Xx-1) [fg=grey]The -1 keeps the aspect ratio.[/fg]

! [asset alt text] (@asset_name#XxY) [fg=grey]for if you want to change the X and Y values seperately.[/fg]

++MENTIONS:++

Systems: @<s:long-id-here>

Members: @<m:long-id-here>

Journals: @<j:long-id-here>

Tags: @<t:long-id-here>

[fg=grey]You can easily get the ID and markdown syntax by scrolling at the end of a member/journal page while in editing mode and click on the Member/Post ID:long-string-here part.[/fg]

:::

:::- {blank} additional info:

[fg=grey]Images can only be used if it is available in the asset manager or if the "allow Ampersand to use the internet to query content" setting in privacy is turned on.[/fg]

:::

| heading column 1 | heading column 2 | heading column 3 |

| :--- | :---: | ---: |

| left sided | middle sided | right sided |

::: {#1BA376} Callout

text inside callout.

:::

:::- {grey} markdown:

++TABLE:++

| heading column 1 | heading column 2 | heading column 3 |

| :--- | :---: | ---: |

| left sided | middle sided | right sided |

[fg=grey] the --- doesn't need the :, but the : indicated which side the text is aligned with.[/fg]

++CALLOUT:++

::: {colour} Callout title

text inside callout.

[put 3 : here]

[fg=grey]- This type of callout will be auto-open. If you want it to be auto-closed, add a - after the first :::.[/fg]

[fg=grey]- {colour} can be omitted, if so it will be the app accent colour.[/fg]

[fg=grey]- Images work inside the callout.[/fg]

:::

[fs=2]++Timestamps++[/fs]

[this website will give you time codes for any time](https://pokemonworkshop.neocities.org/timestamp/)

| Example | markdown |

| ---: | :-- |

| <t:946684800:t> | <t:timecode:t> |

| <t:946684800:T> | <t:timecode:T> |

| <t:946684800:d> | <t:timecode:d> |

| <t:946684800:D> | <t:timecode:D> |

| <t:946684800:f> | <t:timecode:f> |

| <t:946684800:F> | <t:timecode:F> |

| <t:946684800:s> | <t:timecode:s> |

| <t:946684800:S> | <t:timecode:S> |

| <t:946684800:g> | <t:timecode:g> |

| <t:946684800:G> | <t:timecode:G> |

| <t:946684800:m> | <t:timecode:m> |

| <t:946684800:M> | <t:timecode:M> |

| <t:946684800:y> | <t:timecode:y> |

| <t:946684800:Y> | <t:timecode:Y> |

| <t:946684800:k> | <t:timecode:k> |

| <t:946684800:K> | <t:timecode:K> |

| <t:946684800:R> | <t:timecode:R> |

___

[fs=2]++Marmaid Diagrams++[/fs]

[Mermaid website](https://mermaid.ai/open-source/intro/getting-started.html) [Marmaid online editor](https://mermaid.live/edit)

[fg=grey]The flowchart is not the only thing you can do with mermaid but for the sake of space I'll only show the flowchart. You can look at the online editor for the other diagrams.[/fg]

```mermaid

flowchart LR

A[Alter a] --> B(Alter b)

B(alter b) -->|split| C{alter c}

A[alter a] -->|⭐️| D(alter d)

```

:::- {grey} markdown

[fg=grey](put 3 ` there the (x) are)[/fg]

(x)mermaid

flowchart LR

A[Alter a] --> B(Alter b)

B(alter b) -->|split| C{alter c}

A[alter a] --> D(alter d)

(x)

[fg=grey]- LR (left right) can be replaced with RL (right to left), TB (top to bottom) or BT (bottom to top).[/fg]

:::

___

[fs=2]++Animations & marquee++[/fs]

[bt=thick solid #ec6073]Note: due to animation's risk of causing seizures, they will not be shown here. The animations in the examples callout have had their time set to 5s and are in spoiler text. The marquee have similarly have time set to 10s for top & bottom & 20s for left & right.[/bt]

:::- {grey} markdown:

[ani =name:duration]Animated text[/ani] [fg=grey]Remove the space between the i and =.[/fg]

[fg=grey]Duration is in s, but the s is not part of the markdown. It can be left out and will default to 1 if so.[/fg]

[mq =direction duration bouncy]Marquee text[/mq] [fg=grey]Remove the space between the q and =.[/fg]

[fg=grey]- duration is required and is in s, the s is part of the markdown.[/fg]

[fg=grey]- bouncy is optional.[/fg]

:::

Direction examples:

[mq=top 10s]Top[/mq]

[mq=bottom 10s]Bottom[/mq]

[mq=left 20s]Left[/mq]

[mq=right 20s]Right[/mq]

Bouncy examples:

[mq=top 10s bouncy]Top bouncy[/mq]

[mq=bottom 10s bouncy]Bottom bouncy[/mq]

[mq=left 20s bouncy]Left bouncy[/mq]

[mq=right 20s bouncy]Right bouncy[/mq]

:::- Animations examples:

Genral animations:

||[ani=rubberband:5]Rubberband[/ani]|| ||[ani=tada:5]Tada[/ani]|| ||[ani=blink:5]Blink[/ani]|| ||[ani=bounce:5]Bounce[/ani]|| ||[ani=jump:5]Jump[/ani]|| ||[ani=twitch:5]Twitch[/ani]|| ||[ani=wobble:5]Wobble[/ani]|| ||[ani=jelly:5]Jelly[/ani]|| ||[ani=beat:5]Beat[/ani]|| ||[ani=swing:5]Swings[/ani]|| ||[ani=fall:5]Fall[/ani]||

Spin:

||[ani=spin:5]Spin[/ani]|| ||[ani=aspin:5]Aspin[/ani]|| ||[ani=rspin:5]Rspin[/ani]||

||[ani=spinX:5]SpinX[/ani]|| ||[ani=aspinX:5]AspinX[/ani]|| ||[ani=rspinX:5]RspinX[/ani]||

||[ani=spinY:5]SpinY[/ani]|| ||[ani=aspinY:5]AspinY[/ani]|| ||[ani=rspinY:5]RspinY[/ani]||

Shake:

||[ani=shake:5]Shake[/ani]|| ||[ani=shake-v:5]Shake-v[/ani]|| ||[ani=shake-h:5]Shake-h[/ani]||

Expand & shrink:

||[ani=expand:5]Expand[/ani]|| ||[ani=shrink:5]Shrink[/ani]||

:::