[OUT OF DATE] Text For(u)matting; or, How To Create Spoiler Tags

general
1

Ironically I really have no idea how to format this post, so mods feel free to edit the heck out of it.

These are the things I've been able to figure out. I googled BBCode commands, which seem to work, though in some formatting cases there are simpler shortcuts which I was able to guess. There are also of course buttons at the bottom of the comment window for Header text, Bold text, Italics, Quotes, Links, Code, Bulleted Lists, Numbered Lists, and Tags, but I'll include the perhaps redundant BBCode formatting here for the sake of being thorough.

___

[size=20][color=#9432f7]**ESSENTIAL**[/color][/size]

||spoilers|| = double pipes ( || ) on either side of text, spaces OK; e.g. `||text||`; alternate formatting `>!text!<`

expandable "details" tab = put `>!` in front of some text (click below for example); great for spoiler-tagging large blocks of text and images, especially as it conserves space in threads

>!

Thanks @"Kez"#448

>!

For multiple paragraphs under one Details tab, double line break and </s>&gt;!<e> before every paragraph (this will not create multiple Details tabs). Thanks @“saddleblasters”#300

___

[size=20][color=#9432f7]**FUN**[/color][/size]

**bold** = double asterisks ( ** ) on either side of text, no spaces (** text **)
—>alt. **bold** = [ b ]text[ /b ] (spaces within brackets are for examples only; not case-sensitive)

_italics_ = single underscore ( _ ) on either side of text, no spaces (_ text _)
—>alt. _italics_ = [ i ]text[ /i ] (follows bold formatting rules)

[u]underline[/u] = [ u ]text[ /u ] (" ")

[s]strikethrough[/s] = [ s ]text[ /s ] (" ")

en dash = two hyphens `--`, em dash = three hyphes `---`

___

[size=20][color=#9432f7]**EXTRA FUN**[/color][/size]

^superscript = caret ( ^ ) before text, no spaces; can be applied to a string of paranthetical text `^(like so)`

~subscript = tilde ( ~ ) before text, no spaces; text strings work with parenthesis; can be stacked to achieve frighteningly small text ||`~(~(~(~(~(~(~(like this))))))`||

size = [ size=x ]text[ /size ], no spaces within brackets, 0 ≤ x ≤ 39

[color=#9432f7]**color**[/color] = [ color=x ]text[ /color ], no spaces within brackets, color names or hex code

>!

[upl-image-preview url=//i.imgur.com/GGyZC24.png]

[link to list of colors](https://absitomen.com/index.php?topic=331.0)

direct tagging = @username

quote = >text, angle bracket must be at the margin, nothing to the left of it; line break _twice_ to end quote
—> alt. quote (quote & reply) = highlight user's text with cursor, small button saying "Quote" will appear; click to format highlighted text as quote within comment

fractions = x/y, where x and y are both single-digit integers or y is 10, x is less than y, and x and y do not share a common denominator; x can be negative.
Known auto-format fractions: 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6, 1/7, 1/8, 3/8, 5/8, 7/8, 1/9, 1/10
don't work: 2/7, 3/7, 5/7, 6/7, 2/9, 4/9, 5/9, 7/9, 8/9

horizontal bar = three underscores ( ___ ) at left margin

___

[size=20][color=#9432f7]**SO MUCH FUN THEY TAKE UP MORE SPACE**[/color][/size]

hyperlink = [ text in brackets ]( link in parentheses )

bulleted list = at beginning of line: hyphen, space, TEXT

  • - TEXT
    line breaks stay within bullet margins

    • double line break to return to original margin

    —

    numbered list = at beginning of line: number, period, space, text

    —

    header text = text, line break, hyphen at margin
    TEXT
    -
    becomes

    TEXT -

    ___
    2

    someone help me figure out what the exact color code is for insert credit's hyperlink text

    also couldn't figure out how to add more than one line of blank space between two text bodies

    3

    [“Text For(u)matting”,“Text For(u)matting; or, How To Create Spoiler Tags”]

    4

    >

    @captain#29933 someone help me figure out what the exact color code is for insert credit’s hyperlink text

    [s]I belive it is [color=#9532f7]#9532f7[/color]
    [color=#9532f7][u]This is not a link[/u][/color]
    [This is a link](https://en.wikipedia.org/wiki/Hyperlink)
    Looks the same colour to me.[/s]

    edit - I checked the html and it is [color=#9432f7]#9432f7[/color]

    5

    I never knew [color=mediumspringgreen]c[/color][color=cyan]o[/color][color=gold]l[/color][color=magenta]o[/color][color=red]u[/color][color=coral]r[/color] was possible. This is dangerous info!

    6

    @captain#29932 this is a real service to all! Thanks @captain. Getting ending U was a real pain, but it helps your fellow forum members. Too bad it deletes your account after posting.

    8

    Here's two good examples of how to format text

  • * The formatter flarum uses https://s9etextformatter.readthedocs.io/Bundles/Forum/#bbcodes

  • * Some more examples https://freeflarum.com/docs/how-to/extensions/bbcode/
    • 9

    @CidNight#29969 lol I'm trying so hard to resist buying Nier

    10

    you could also format lists in a table like this:

    >

    list 1

    >list 2

    >list 3

    just use this symbol ">" before what you are listing

    11

    If you put </s>&gt;!<e> in front of some text you can create a “Details” button that lets you toggle all of its content, like so:


    >!

    </s><e>
    12

    @“Kez”#p58149 NNNNNICE!

    13

    Something that I don't see mentioned here that I had to figure out for myself just now is that if you want multiple paragraphs in the expandable details tab, you need to put a new >! in front of each double-line-break separated block of text. This will put all of the paragraphs in the same details tab, not in separate ones, which is what I was worried would happen.

    14

    #### How to do tables

    ([link to docs](https://s9etextformatter.readthedocs.io/Plugins/PipeTables/Syntax/))

    Syntax:

    `|Header 1 (left aligned) | Header 2 (center aligned) | Header 3 (right aligned) |
    |:--- | :-------:| ------------:|
    | Cell 1 | Cell 2 | Cell3 |
    | cell 3 | cell 4 | cell 6 |`

    Example:

    | | | | |:-- | :--:| --:|| | | || | | |
    Header 1 (left aligned)Header 2 (center aligned)Header 3 (right aligned)
    Cell 1Cell 2Cell3
    cell 3cell 4cell 6

    #

    The second line defines how the column will be aligned or justified. The number of `-` doesn't matter.

    >

    @“Gaagaagiins”#p74929


    15

    Also as I just learned.

    #### How to Format Code

    Syntax:
    write code with this character: ` at the start and end fo your line

    Example:
    `write code with this character: at the start and end of your line`

    ### or

    Syntax:
    Use `[code]` at the start and `[/code]` at the end of your line.
    Example

    [code] I am writing code

    bool IsUserCool(string _user)
    {
    if (InsertCreditForums.Contains(_user))
    {
    return true;
    }
    printf( “join the forums for a fun time”);
    return false;
    }
    [/code]

    this one is good for doing code blocks and has fancy colours too.

    16

    @“beets”#p74931

    One can also use triple-backticks </s>```<e> to wrap code blocks

    ___

    Also regarding tables, I found that the markdown to html conversion _really_ wanted to squash columns together, so I had to add a dummy column with an `XX` in the last row, using forum formatting to make it the same colour as the background (` [color="#1a1a1a"]XX[/color] `). This was especially noticeable in cases where the headings were longer than any value in their column (such as in your example above)

    eg:

    ` | Long heading name | | Other heading |
    |:-- |:-- | --:|
    | value | | 3 |
    | thing | | 5 |
    | | [color="#1a1a1a"]XX[/color] | | `

    produces:

    | | | |:-- |:-- | --:|| | || | || | |
    Long heading name| Other heading
    value| 3
    thing| 5
    | [color="#1a1a1a"]XX[/color]

    [Use this easy markdown table generator to help you](https://www.tablesgenerator.com/markdown_tables). It allows you to upload a csv or just paste data in from your clipboard

    [size="10"](tagging @"Gaagaagiins"#p74929 here also just to make sure)[/size]
    17

    #### NEW SKILL: Image Resizing

    Using an image from the '[SHOW](https://insertcredit.com/show/)' page:

    This is it's link `https://i.insertcred.it/assets/signs/TsRFX39b.png`,
    and here is it embedded.
    https://i.insertcred.it/assets/signs/TsRFX39b.png

    We can use the `[img][/img]` to resize it. Example:

    `[img width=100]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]`
    [img width=100]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]
    and
    `[img height=100]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]`
    [img height=100]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]

    If only height or width is used the image will resize while keeping the same aspect ratio.
    If both height and width are used you can change the aspect ratio of the linked image. Example:

    `[img width=600 height=100]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]`
    [img width=600 height=100]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]

    This also allows _hyper posters_ to be able to include images in their words like emojis. [img width=16 height=16]https://i.insertcred.it/assets/signs/TsRFX39b.png[/img]

    18

    >

    [color=#FFD700]If you use all the abilities you were designed with, you should become hyper…[/color]

    >

    [color=#00FFFF]▼[/color]

    19

    @“connrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr”#p87831 holy shit

    [img width=400]https://i.imgur.com/rL1g4Rk.png[/img]

    20

    This is revolutionary

    21

    Events have transpired ominously to imbue @Gaagaagiins with much power.