# Formatting Sandbox – Please test stuff here

What the title says.

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

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

#The biggest, baddest header

### **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

1. Markup ordered list item
2. It's OK if the numbers are out of order
3. Another list item
• LOL I wish I could upvote edits @Colleen – M.A.R. Feb 19 '16 at 6:26
• Does <kbd> work in comments? <kbd>tilde</kbd> – ColleenV Mar 16 '16 at 13:17

# 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

 [![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. For example:

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


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="http://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="http://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 '16 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 '16 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 '16 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 '16 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 :-) – snailplane Mar 27 '18 at 16:17

Did you know you can use HTML character escape codes?

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

&mdash; &ndash; &para; &hellip; &uarr; &darr; &larr; &rarr; &copy; &pound; &Otilde;
— – ¶ … ↑ ↓ ← → © £ Õ

Or the numbers by adding #:

&larr; &#8592;
← ←

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

• Does &larr; work in comments ? – ColleenV Apr 23 '18 at 19:47

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: →　←

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

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

## Would you like

look smaller

and

smaller

and

smaller

and

smaller?

Eeek!

Would you like
--------------

<sub>**look smaller**</sub>

<sub>**and**</sub>

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

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

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

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

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

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

• I wish it worked in comments. SE hates fun. :( – M.A.R. Oct 10 '16 at 18:16
• It's best to avoid making text very small, most of the time. People have trouble reading it. – snailplane Nov 13 '16 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 '16 at 19:15

# Working with block quotes

### Separating quote blocks

> This is my first quote.

<!-- I want a blank line between them so I am using an HTML comment. This could be empty. -->

> 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.

# Does this thing appear at the centre?

• It looks completely weird on the android app, I just checked. – NVZ Jul 31 '17 at 19:58
• Should I delete this after test run? Or keep it here for just fun? – NVZ Jul 31 '17 at 20:01
• Nah, why delete? This post would be useful for future tests – M.A.R. Aug 1 '17 at 5:12
• @M.A.R. Alright. It will stay then. :) – NVZ Aug 1 '17 at 5:12
• Does this work on comments? (EDIT: It doesn't.) – NVZ Aug 1 '17 at 7:37
• <del>strikethrough text</del> – NVZ Aug 2 '17 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 '17 at 4:52

Testing the Tool tip,

• is working for a link?

• is working for the image?

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

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

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