User's Guide to Sponge Forum's Text Formatting [Guide]

Meta
1

Introduction

Hey there, it’s epicTylev! Here are some few HTML text formatting features that come along with Discourse’s compatibility to HTML formatting :snowman:. And I do realize that some people may know this - but this is for all of you who don’t know and/or want to spice up your posts with some nice extra HTML formatting.

Superscript

98 | How to: <sup>Superscript!</sup>

Subscript

NormalSubscript | How to: <sub>Subscript</sub>

Deleted Text/Strikethrough

Example | How to: <del>Text</del> or <s>this</s>

Over-glorified Bold (Strong)

Example | How to: <strong>Test</strong>

UTF Symbols

Boxes

:ballot_box_with_check: How to: &#9745;
☒ How to: &#9746;
☐ How to: &#9744;

Flags

⚑ | How to: &#9873;
⚐ | How to: &#9872;

Weather

:sunny: | How to: &#9728;
:snowman: | How to: &#9924;
:partly_sunny: | How to: &#9925;

Pointy Arrow

☛ | How to: &#9755;
☚ | How to: &#9754;

Money

€ | How to: &euro;
¢ | How to: &cent;
£ | How to: &pound;
¥ | How to: &yen;

Heading Sizes

Change heading sizes by the amount of #'s you put before and after the text. Like so:
##### Super Small Heading Text ##### (PS: Maximum is 5 #'s)

Quoting Selected Replies####

To quote a reply, select text with your cursor, then hit the tooltip that says "Quote Reply

Emoji Cheat Sheet

Who doesn’t love emoticons? Here’s a cheat sheet for all the emoticons you can possibly think of.
Thanks to @TheE

Adding code blocks

Sometimes you want code to be shown exactly how it is. In order to achieve this, add code marks. Either hit the </> at the top of your text editing bar (after highlighting over the text), or add a ` before and after the word/phrase you intent to modify.

Also, you can use the > symbol (greater than) to create one line of a blockquote. You can then do it in succession to get multiple lines.

Also, you can use the tags <code>Example</code> to achieve the same purpose.

Optional Method for Blockquotes

First, for people that may not know what a blockquote is, here’s an example:

A blockquote.
To get a blockquote, you can add the tag `
` before the text you wish to quote and after the text you wish to quote (just remember to add an end tag, which is **`</`** ) #### Markdown Extras #### Some certain aspects of Markdown may not work. **But**, some aspects of Markdown do work, yet there isn't enough space to cover them here. If you want to learn more, just follow [this link][2]. #### Filtering out Emojis :P#### Just add a html tag that doesn't exist and stick the unfiltered smile in there. Here's an example: `:)` #### Summary #### Want more symbols? [Here's][3] a link to all the UTF symbols you can think of. [Here's][4] also a few more character codes. Ah, hope you enjoyed this post. I had fun compiling it. If you see a feature that's not in the list, just lemme know in the comments below!

Now, I’m gonna go grab a cup of coffee now :coffee: (&#9749;).

11 Likes
2

Just a reminder that <s> this </s> also works for this
:)

2 Likes
3

Hehe, forgot about strikethrough. Thanks octoshrimpy.
Thanks, forgot to include that :slight_smile:

1 Like
4

<q>this</q>
this is also a thing that is completely pointless.

as well as:
<a>this</a> this is a test (highlighted, hoverable, non-clicky)
<b>this</b> this is a test
<i>this</i> this is a test
<u>this</u> this is a test


PS:
<a href=http://youtube.com</a> this takes me to youtube
<p> is the complex man’s enter key
<br> inserts a blank line
<b>'<u>this</u>'</b> <u>allows you to "comment out" code</u>

<b><a>'<u>'</b>going even further with it<b><a>'<u>'</b>
<u>going even further with it<u>

5

You clearly know, but tell people you can sterilize control characters by ether beginning the line with 4 spaces or with a backslash (I use it to avoid the non text smiles) :wink: == ;\)

6

I always avoided smiles with HTML:

:D == :<this is a pointless tag that doesn't get recognized as html and can be anything you want as long as it's not one of the tags above>D
…although :<W>D is easier to use, and feels right to the fingers.

7

You have &euro; twice. Also, should include how to do code blocks. (the `)

2 Likes
8

You can also use some of the forum BB code that you have on other BB’s here too.

10

You might want to add two more links:

  • Discourse allows the usage of Markdown do write formatted posts. Compared to HTML or BBCode it is both simpler and faster to write. It is widely used (e.g. on Stackoverflow, Github, Jekyll). The complete implementation used by Discourse is detailed here. For those who have never heard of Markdown, this link might get you started.
  • Emojis can be used directly with the codes detailed here. That is somewhat simpler than using the UTF codes, isn’t it? You even get a suggestion-box once you have tipped the :. :squirrel:
2 Likes
11

Can be quite helpful to new users. Nice thread, make sure to extend it.

12

@TheE Thanks for the suggestions! I added them to the post :slight_smile:
@mcmonkey Nice catch, I didn’t see that hehe.
@octoshrimpy Honestly I didn’t add those as this post is mainly about the things you can’t do in the normal text editor. Most of those you can do.

13

Here’s some more HTML Character Codes: http://character-code.com/

14

Love It!

I mean it. Nice post. Keep up the good work @epicTylev Note to @DarkArcana How about adding this in the FAQ?

1 Like
15

@xxmarijnw Why? It doesn’t belong to the Frequently asked Questions/Guidelines.
It’s simply a helpful thread, created by a community member.

1 Like
16

Thanks so much @xxmarijnw!
@jdf2 Hmm, I’ll add those to the links. Thanks!

17

You can also use > to make blockquotes! Simply place the symbol before every paragraph.

">Suck on my proof!

>Second lineeeee" becomes

Suck on my proof!

Second lineeeee

Much faster than both the button and the <blockquote> tag, though if you’re going to quote a text with several paragraphs, marking the entirety of it and pressing Ctrl+Q is by far the fastest :slight_smile:

18

Awesome suggestion :smile:
I’ll add it in now.

19

###In this post I test the markup thingies found here. Feel free to disregard :slight_smile:
#####I tried to have the text make sense, though, so anyone else can use it for reference with their own testing :L

Oh, sweet. Four spaces before a line makes it into a code block :P **Hi**
Consequent lines that also start with a quadruple space are added to a new block.

However, this one doesn’t. It only has three spaces in front, which are apparently escaped.
Neat.
How about 5 spaces? Also escaped. So only a quadruple space triggers a code block.

I’ve talked about these already.

I didn’t tell you how to nest them, tho.

Each > takes you in one nest.
This one has 3 of them in front.
Huh. This one has two. Seems it doesn’t jump back out. I wonder…
One only
And then zero.

Seems a double line shift is necessary. This one has two arrows and a blank line above it

Using a line break tag doesn’t do the same thing. Weirdly enough it line breaks :stuck_out_tongue:

Alright, done with the nesting. Maybe.

That’s a line break, which works exactly the same under this line

HOWEVER!

Apparently not for single words

Two words

Are also made into subheaders

Three words too

What about four words?

Or even with five words

I can’t quite find out what the rules for this are. Seems you can use as much as you want. Perhaps it only depends on how long the line is before you do the formatting? Let’s test:

Lorem ipsum dolor sit amet consectetuer adipiscing elit etc etc etc

Nope. I am honestly stumped. I can’t find out the difference between these and the first one which made a second line break…

##More to come after dinner! /brb

20

May also be worth mentioning, aside from simple code blocks, how to specify the code language, i.e. none specified:

public static void main(String[] args) { System.out.print("THIS CONTRACT IS SEALED"); }

And then Java

public static void main(String[] args) {
	System.out.print("THIS CONTRACT IS SEALED");
}

Which is achieved by wrapping code with ```java and ``` rather than just single ticks. With this method however, you need to put the first line of code on the line after the opening code delimiter or that line won’t display properly, whereas the line break after a single tick renders as a normal line break.

for those of you curious as to my String choice.