Formatting Sandbox – Please test stuff here

Question

What the title says.

Use this for testing stuff and gosh I can't believe we didn't have this till now.

[chat] [ell.se] [meta.se] [su] [tour] [ask] [answer] [FAQ] *Slanted* **text** is ***really slanted*** [help] [tag:grammar] [meta-tag:discussion] [edit] and that's about all the useful tricks you can do with comments, I think. -> English Language Learners Chat English Language Learners Meta Stack Exchange Super User tour How to Ask How to Answer FAQ Slanted text is really slanted help center grammar discussion edit and that's about all the useful tricks you can do with comments, I think. — M.A.R., Feb 16, 2016 at 17:03
Actually I was testing to see if [meta.english.se] English Language & Usage Meta would work on English Language Learners in a comment. — ColleenV, Feb 16, 2016 at 19:40

8 revs, 3 users 74% · Accepted Answer · 2017-02-21 03:49:05Z

Trick no. 1: Headers

The biggest, baddest header

Header less important

Can this header be bold enough? Nope.

#The biggest, baddest header

## Header *less important*

### **Can this header be bold enough?** Nope.

Trick no. 2: Lines

Adding --- or ___ will add a line that visually looks like this:

If you want the line bold, add a # before ___. Tho' to get the impression of a line you need to do some copy-paste or keyboard press determination.

----------------------------------

__________________________________

#----------------------------------

#__________________________________

Trick no. 3: Misc

You can
1. nest
2. numbered or unenumerated
  - lists.
3. Yay!

Studies™ prove that a shocking number of users don't know that two spaces at the end of a line can break the line, like a <br/>.

I am a cool person.
You have no idea how cool you are too.

I am a cool person.
You have no idea how cool you are too.

I am a cool person. You have no idea how cool you are too.

> I am a cool person.  
You have no idea how cool you are too.

> I am a cool person. <br/>
You have no idea how cool you are too.

> I am a cool person.
You have no idea how cool you are too.

(There are two spaces after "person" in the first line of the first showcase)

Secrets

Use >! for spoilers and if you ever want a redacted effect without actually redacting anything.

The >! formatting works for images also

<span style="text-decoration: blink;">Text to blink here</span> Span Doesn't work
~~Peter's exuberant use of bolding in his answers make me grateful the blink tag doesn't work~~ ^{That's not nice} _{It's not that mean though}

<kbd>Q</kbd><kbd>W</kbd><kbd>E</kbd><kbd>R</kbd><kbd>T</kbd><kbd>Y</kbd>
QWERTY

1. Markup ordered list item
43. It's OK if the numbers are out of order
8. Another list item

Markup ordered list item
It's OK if the numbers are out of order
Another list item

Does <kbd> work in comments? <kbd>tilde</kbd>
– ColleenV
Mar 16, 2016 at 13:17 — ColleenV, Mar 16, 2016 at 13:17

6 revs · Accepted Answer · 2021-02-25 20:12:30Z

Working with Images

Changing the displayed size by adding a suffix

If you upload your image to Imgur, adding a character to the end of the image name before the extension will change the displayed size in your post. The square suffixes (s and b) do not keep the proportions of the images but the rest of them do. There may be some problems with resizing PNGs that have a transparent background.

s - small square 90x90
b - big square 160x160
t - small thumbnail 160x160
m - medium thumbnail 320x320
l - large thumbnail 640x640
h - huge thumbnail 1024x1024

Original upload

 [![My cat Loki][1]][1] 
 [1]: https://i.stack.imgur.com/SpjyG.jpg

Displayed as a medium thumbnail (m) that opens the original size when you click:

[![My cat Loki][2]][1]
[1]: https://i.stack.imgur.com/SpjyG.jpg
[2]: https://i.stack.imgur.com/SpjyGm.jpg

Also, you don't have to use numbers to mark the images; you can use any string. You can also add a description that will appear as a tool tip for any link by putting it in quotes after the URL. For example:

[![My cat Loki][Thumbnail]][Full]
[Full]: https://i.stack.imgur.com/SpjyG.jpg "click for full-size image"
[Thumbnail]: https://i.stack.imgur.com/SpjyGs.jpg

You don't have to link to an image either - any link will work:

[Thumbnail]: https://i.stack.imgur.com/SpjyGs.jpg
[InfoLink]: https://meta.stackexchange.com/q/2133/
[![My cat Loki][Thumbnail]][InfoLink]

When the resizing doesn't work, or if you want to choose a size other than the standard sizes, you can use HTML and still link to the full sized image:

[<img src="https://i.stack.imgur.com/SpjyG.jpg" width="200" alt="My cat Loki"/>][1]
[1]: https://i.stack.imgur.com/SpjyG.jpg

Be sure to put your width and height tags before the "alt" tag or your image may not be displayed:

[<img src="https://i.stack.imgur.com/SpjyG.jpg" alt="My cat Loki" width="200"/>][1]

Great tip for resizing huge images, will save users lots of time. Thanks. Pity about SE not allowing users to centre images. — Mari-Lou A, Nov 13, 2016 at 12:48
@Mari-LouA I think the <center> tag and the align attribute for <img> aren't supported in HTML 5, so centering things that the page doesn't always center is a lot more complicated. I'll see if I can figure out any way to do it. — ColleenV, Nov 13, 2016 at 12:53
@Mari you can use <pre>, or in Mathjax-supported sites, \hspace. That said, meta.chemistry.stackexchange.com/questions/3044/… — M.A.R., Nov 14, 2016 at 12:32
@M.A.R. Yes, we have a link to that in a different answer, but I think folks were overlooking it. Also, our community doesn't all have community wiki editing privileges on the other site, which makes it difficult to test stuff. <pre> won't center it, it will just indent it by a fixed amount and because the mobile site does center, it's unclear to me whether <pre> would undo that entirely. — ColleenV, Nov 14, 2016 at 12:46
Wow, I had no idea you could use something other than numbers! Thanks, that'll definitely make things less confusing for me in the future :-) — user230, Mar 27, 2018 at 16:17

2 revs, 2 users 89% user230 · Accepted Answer · 2017-07-31 20:10:23Z

8

Horizontal spacing
　Horizontal spacing
　　Horizontal spacing
　　　Horizontal spacing
　　　　Horizontal spacing
　　　　　Horizontal spacing
　　　　　　Horizontal spacing
　　　　　　　Horizontal spacing
　　　　　　Horizontal spacing
　　　　　Horizontal spacing
　　　　Horizontal spacing
　　　Horizontal spacing
　　Horizontal spacing
　Horizontal spacing
Horizontal spacing

Hint:
You can copy and paste the space between these two arrows to move your text: →　←

edited Jul 31, 2017 at 20:10

community wiki

2 revs, 2 users 89%
user230

Alternately, the code for extra spaces that don't get automatically condensed is   This will work in questions and answers, but not in comments.
– Quack E. Duck
Sep 6, 2023 at 22:05

Add a comment |

7 revs · Accepted Answer · 2021-09-29 14:29:42Z

6

Did you know you can use HTML character escape codes?

You can use the name from the first column of that table :

— – ¶ … ↑ ↓ ← → © £ Õ &check;
— – ¶ … ↑ ↓ ← → © £ Õ ✓

Or the numbers by adding #:

← ← x
← ← x

SoundCloud links don't work here, but they do on other meta sites.

https://soundcloud.com/stack-exchange/stack-exchange-podcast-63-the-plumbers-up-to-67-coins

edited Sep 29, 2021 at 14:29

community wiki

7 revs
ColleenV

Does ← work in comments ?
– ColleenV
Apr 23, 2018 at 19:47

Add a comment |

4 revs, 2 users 98% · Accepted Answer · 2023-09-06 08:40:43Z

6

Would you like

to make your text

look smaller

_{and smaller}

_{^{and smaller}}

_{^{_{and smaller}}}

_{^{_{^{and smaller?}}}}

^{_{^{_^Eeek!}}}

# Would you like

## to make your text

**look smaller** 
  
<sub>**and smaller**</sub>   
       
<sub><sup>**and smaller**</sub></sup>     

<sub><sup><sub>**and smaller**</sub></sup></sub>    

<sub><sup><sub><sup>**and smaller?**</sub></sup></sub></sup>

<sup><sub><sup><sub><sup>**Eeek!**</sup></sub></sup></sub></sup>

edited Sep 6, 2023 at 8:40

community wiki

4 revs, 2 users 98%
Mari-Lou A

4

I wish it worked in comments. SE hates fun. :(
– M.A.R.
Oct 10, 2016 at 18:16
It's best to avoid making text very small, most of the time. People have trouble reading it.
– user230
Nov 13, 2016 at 19:11
@snailplane it's only for fun that I posted it as small as it could go. Certainly, one could do steps 3 and 4, without affecting legibility. It's very useful tip for shortening the amount of space long book titles take up.
– Mari-Lou A
Nov 13, 2016 at 19:15

Add a comment |

2 revs · Accepted Answer · 2020-06-16 09:10:50Z

Working with block quotes

Separating quote blocks

> This is my first quote.

> This is my second quote

This is my first quote.

This is my second quote.

Nesting quotes

> Sometimes I want to quote something
>> Inside a block quote.

> And then keep writing the rest of the quote. I need to put a blank line to get out of the nested quote.

Sometimes I want to quote something

Inside a block quote.

And then keep writing the rest of the quote. I need to put a blank line to get out of the nested quote.

4 revs, 2 users 88% · Accepted Answer · 2021-09-17 01:55:40Z

5

#　　　　　　　　　　　　　¯\(ツ)/¯

#　　　　　　　Does this thing appear at the centre?

edited Sep 17, 2021 at 1:55

community wiki

4 revs, 2 users 88%
NVZ

It looks completely weird on the android app, I just checked.
– NVZ
Jul 31, 2017 at 19:58
Should I delete this after test run? Or keep it here for just fun?
– NVZ
Jul 31, 2017 at 20:01
Nah, why delete? This post would be useful for future tests
– M.A.R.
Aug 1, 2017 at 5:12
@M.A.R. Alright. It will stay then. :)
– NVZ
Aug 1, 2017 at 5:12
Does this work on comments? (EDIT: It doesn't.)
– NVZ
Aug 1, 2017 at 7:37
<del>strikethrough text</del>
– NVZ
Aug 2, 2017 at 20:20
There's no way to get strikethrough text in comment except ugly Unicode. --- works in chat, and <s> works on the main site.
– M.A.R.
Aug 3, 2017 at 4:52

Add a comment |

Jim Reynolds · Accepted Answer · 2016-02-16 18:29:19Z

4

I can't delete it right away. So someone like @IͶΔ could read something embarrassing I write here and use it to blackmail me.

answered Feb 16, 2016 at 18:29

community wiki

Jim Reynolds

Just write whatever you like here. I promise I wouldn't read it more than 5 times a day.
– M.A.R.
Feb 16, 2016 at 18:41
O.O 11 more to go. Oh. That was 11.
– Jim Reynolds
Feb 17, 2016 at 17:04

Add a comment |

3 revs · Accepted Answer · 2017-04-13 12:55:17Z

4

Testing the Tool tip,

is working for a link?
is working for the image?

edited Apr 13, 2017 at 12:55

community wiki

3 revs
Arulkumar

Add a comment |

user230 · Accepted Answer · 2020-05-10 03:49:18Z

4

Abusing the <kbd> tag to add outlines around images:

answered May 10, 2020 at 3:49

community wiki

user230

Add a comment |

3 revs · Accepted Answer · 2021-05-24 14:32:50Z

Tables

A header	Another header
First	row
Second	row

| A header | Another header |
| -------- | -------------- |
| First    | row            |
| Second   | row            |

Left	Center	Right
First	row	124689
Second	row	975257

| Left  | Center | Right |  
|:------- |:-------:| ----:|
| First    | row | 124689 |
| Second   | row | 975257 |

There is an answer for the main Table Support "new feature" post that shows how to use HTML to incorporate different types of formatting into table cells.

2 revs, 2 users 50% · Accepted Answer · 2018-03-24 12:29:03Z

0

Testing "magic" links [engineering.se] [ell.se] [interpersonal.se]

Right now, "magic" links work in comments, but not posts.

edited Mar 24, 2018 at 12:29

community wiki

2 revs, 2 users 50%
Phil Sweet

Magic links do work in comments though: Interpersonal Skills [interpersonal.se] works in the comments.
– ColleenV
Mar 24, 2018 at 12:16

Add a comment |

Stack Exchange Network

Formatting Sandbox – Please test stuff here

12 Answers 12

Trick no. 1: Headers

The biggest, baddest header

Header less important

Can this header be bold enough? Nope.

Trick no. 2: Lines

----------------------------------

__________________________________

Trick no. 3: Misc

Secrets

Working with Images

Would you like

to make your text

Working with block quotes

Separating quote blocks

Nesting quotes

Tables

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
discussion
formatting
.

Linked

Hot Network Questions

Formatting Sandbox – Please test stuff here

12 Answers 12

Trick no. 1: Headers

The biggest, baddest header

Header less important

Can this header be bold enough? Nope.

Trick no. 2: Lines

----------------------------------

__________________________________

Trick no. 3: Misc

Secrets

Working with Images

Would you like

to make your text

Working with block quotes

Separating quote blocks

Nesting quotes

Tables

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged discussionformatting.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
discussion
formatting
.