Edit: It's been brought to my attention that I've forgotten credits... The base dividers for the second glitchy set were created by @abyslita, simply edited by me..~ go support them! Apologies for the inconvenience.
hey did ya'll know that ed sheeran is working on a series of 6 albums named after media player buttons and the first one released last year and the last one is to be released posthumously on the day that he dies
I have finally finished my markdown guide! This is the 2nd version, the 1st one is unreleased as I realised I needed to redo it & no longer have the entry for it.
It is designed to be copy/pasted into Ampersand, and should act as a guide to markdown without needing to go into edit mode. However, I 100% encourage you to go into the text and edit it any way you like.
I will note I have left svgs out! This is because I do not feel comfortable making a guide to something I do not understand myself have not gotten working.
I have also put the entire markdown below the cut (it is long and large & I don't encourage you to look at it but if you do want to it is there. I will warn you it is currently lagging my tablet as I am making this post.)
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]
[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 =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)
[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]
[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]
[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]
[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]
