Formatting options on the devforum that you should know!

Resources Community Resources
#1

hi! I made this for me but I thought I’d share this. I was hesitant about which category to post to (tutorials or resources) but I decided on this one. tell me if you think I could improve something, and don’t forget to bookmark this post!

happy copy pasting!

text styling

Highlighting

Header text — # Text (supports 6 #)

Big text. — <big>text</big>
Bold text. — **text**
Italic text. — *text*
struckthrough text. — ~~text~~
small text. — <small>text</small>

Differential text

deleted text. — <del>text</del>
marked text. — <mark>text</mark>
inserted text. — <ins>text</ins>

Information

This is an abbr or a definition. (hover the … text to see info) — <abbr title=“ADDITIONAL INFO”>WORD</abbr>

Numbers idk what to call this

O2, CO2 --------------- 2 is a <sub>subscript</sub>

E=MC2, √a2, b2 ------- 2 is a <sup>superscript</sup>

Input

keyboard key like CTRL, kinda has duolingo’s style – <kbd>key</kbr>

Separation

---, or *** — adds a horizontal line that separates text

cool badges

examples:

Modd.io badge's source 
<p><a href="https://modd.io">
<img src="upload://pLg0omLve6hzmpeZsS6GVa5FWDr.svg" alt="DESCRIPTION">
</a>--- base64 encoded image</p>

DESCRIPTION --- base64 encoded image

Roblox badge's source 
<p><a href="https://modd.io">
<img src="upload://pLg0omLve6hzmpeZsS6GVa5FWDr.svg" alt="DESCRIPTION">
</a>--- base64 encoded image</p>

DESCRIPTION --- SimpleIcons slug

Example badge's source 
<a href="https://EXAMPLE.COM">
	<img src="upload://8bQjmmcr2B7K6A41Q05FVIbVKuE.svg" alt="DESCRIPTION">
</a>

<!- change EXAMPLE.COM with your link, or remove <a></a> if not needed -->
<!- switch CAPITALIZED text with appropriate values, including DESCRIPTION.-->
DESCRIPTION
to write spaces, slashes, exclamation marks, and many other characters in your badges, you need to use their encoded writings for the badge to work properly. so here's their encoded versions.

shields.io-specific encoding

character encoding
' ' _
'_' __
'-' --

percent-coding, for every badge provider

character encoding
':' %3A
'/' %2F
'?' %3F
'#' %23
'[' %5B
']' %5D
'@' %40
'!' %21
'$' %24
'&' %26
"'" %27
'(' %28
')' %29
'*' %2A
'+' %2B
',' %2C
';' %3B
'=' %3D
'%' %25
' ' %20

more info at Shields.io | Documentation

data

table of bug reports --- using HTML tables because more user-friendly imo.
username title description
biillyyy123 hello Lorem ipsum, io buonasera de la baguette.
bombingcutie78 crash when dancing I danced then crashed. This is very serious.
27 Likes
Image caching modifies code blocks
#2

How? Quoting does not work for me, the thing is not displayed.
This is an abbr or a definition. (hover the … text)

1 Like
#3

I added the tags next to it so that it works. Thanks for the feedback!

1 Like
#4

Does that work?
When I say: How to make a space
It comes: How
How to make spaces?

1 Like
#5

To make spaces, you just put a space… Could I see the source of your formatting please?
(edit > copy > paste in code blocks)

#6

Sure:

<abbr title=How to make a space>Does that work?</abbr>
1 Like
#7

Did you try adding “” around the abbr title?

(<abbr title="multiple things">text</abbr>)

3 Likes
#8

Information example needs a quote at the beginning of “ADDITIONAL INFO”

other than that, thanks alot for these formatting options.

3 Likes
#9

Why isn’t this documented anywhere in the forum??? I always create footnotes whenever needed to reference something

yes, just testing.

Nope.

#10

10 december 2023, 17:05

  • fixed & improved badge examples
    • fixed shields URL and hyperlink of the roblox creator hub badge
    • included every badge’s source
  • added table of special character’s encoding

note: can’t fix badge icons, devforum-specific bug

#11

how do i use the badges? i wanna do a download button for a thing.

#12

this is howwwwwwwwwwwwwwwxxwwandujj