Formatting Sandbox

Question

Notes:

Answers will occasionally be moved to the Sandbox archive when there are too many of them. When using them to report bugs, keep an eye on the post.

You may also want to take a look at the Stack Exchange's Sandbox chat room

This site, Meta Stack Exchange, is usually used as a "test bed" for pending changes happening to the way text is rendered on all network sites. Changes to text rendering that are going to be rolled out to the network are usually deployed here first to test them out and fix any potential glitches. Currently, there are no such changes pending, but if there were, keep in mind that text posted here may render differently from the other sites until the changes roll out to them as well.

As per Jeff's suggestion in this comment:

You can use this question as a formatting sandbox. You can:

edit this question itself (Community Wiki questions such as this one require only 100 reputation to edit instead of 2,000)
post answers to this question (This question might be protected, requiring earning 10 reputation on this site to answer)
post comments to this question or its answers
test suspected bugs with the editor or the rendering
post ponies (only when mods are asleep)

Beware that since the changes to syntax highlighting in December 2010, and the inline hints added in March 2011, no syntax highlighting is applied unless the question's tags or an inline hint enable it. So, to test highlighting here in the sandbox:

As of January 8, 2019, you can use GitHub-flavor fenced code blocks in your posts, specifying the language after the opening fence:

```html
While not hinted otherwise: <html></html> source <b>goes</b> "here".
```

```js
var a = 3;
while (not (a > 0)) {
    alert("JavaScript code <b>goes</b> here.");
}
```

Or:
- Create code blocks in any way (using the fence notation above, the four-space indent form, or using HTML <pre><code> tags).
- Save your post!
- Use your browser's developer tools to edit the resulting HTML. To open developer tools, press F12, or ⌥⌘ I on Mac.
- Find the <pre> element and add the attribute class="prettyprint", or change it into one of the valid syntax hints linked above, like class="lang-vb prettyprint".
- Run the following in the location bar: javascript:prettyPrint(); or prettyPrint() in the console.

Answers that are considered annoying or obnoxious, or that cause breakage for users, will be deleted. This is codified as a policy as of March 29, 2018.

@TheEmpty see here. (TL;DR: anyone who edited can be pinged) — Shadow Wizard, Commented Nov 10, 2023 at 16:44
Maybe it's due to whitespace? 22 ALLOW 191.1.2.3 22 DENY Anywhere — kos, Commented Sep 28 at 10:21
This may be (vaguely) related to fractional coloring [(en.wikipedia.org/wiki/Fractional_coloring),(https://…? — Sonic the Anonymous Hedgehog, Commented Nov 16 at 21:23

Jason C · Accepted Answer · 2021-11-09 22:42:45Z

2

🌞 (U+1F31E Sun With Face)
🌙 (U+1F319 Crescent Moon)

answered Nov 9, 2021 at 22:42

community wiki

Jason C

Welcome back Jason! Are you coming to Tavern?
– Shadow Wizard
Commented Nov 10, 2021 at 7:09

Add a comment |

6 revs, 3 users 97% · Accepted Answer · 2021-12-16 19:38:21Z

2

Testing out how headers work:

hello

Trying to abuse KBD tags:

waffles

waffles

[tag:waffles]

waffles

[waffles ](https://meta.stackexchange.com/questions/tagged/unicorns)

Testing some stuff with flairs:

edited Dec 16, 2021 at 19:38

community wiki

6 revs, 3 users 97%
Ekadh Singh - Reinstate Monica

Not like this ;)
– Luuklag
Commented Apr 14, 2021 at 19:28
@Luuklag how do I correctly format then? I saw the post explaining how to do so with equal signs, triple bars, and dashes, but how do I do so with hashtags?
– Ekadh Singh
Commented Apr 14, 2021 at 19:30
3

You need a space after the hashes. Like # Hello
– Luuklag
Commented Apr 14, 2021 at 19:32
1

@Yay For testing one type of thing I just repeatedly edit a single post, sometimes out-of-site (deleted), to avoid causing 10K+ users pain.
– Ollie
Commented Apr 14, 2021 at 19:34
Testing some comment section stuff: — – − -
– Ekadh Singh
Commented Jan 31, 2022 at 18:12

Add a comment |

Joachim · Accepted Answer · 2022-01-16 20:27:12Z

Formatting of images in tables:

These examples are made to see what methods work for getting the most out of a table's space.

Default behaviour:

The table adapts to the contents of the first cell, and the contents of the adjacent cell(s) are adapted to that of the first.
The second image in the second cell is forced below the first using a <br/> (or two, rather, so the images have a better looking gap between them):

Using the ` `

Using the HTML   entity to fill out the empty space due to the table cells adjusting to the width of the contents of the first cell:

Using ` ` and `<br/>`

Using that same trick but preceded by a <br/> to force that the line of non-breaking spaces below the image (such a line can also be put above the image, logically), to prevent the scrollbar from appearing (thank you @Makyen!):

Using `<img>` entities with custom `width` set

Different aspect ratios behave differently, and there is still a lot of unused space in the table:

Using `<img>` entities with `width` and `height`

It takes a lot more work, but it's indeed doable (the burden of being a perfectionist, I presume). The numbers are guesswork, and the aspect ratios obviously don't correspond with the true dimensions of the images, but it looks good:


Width = 320, height = 640	Width = 370, height = 305 (of both images)

And here's how they all look when the viewport's width changes to something more narrow:

It seems the table with the images in <img> and only their width set wins the beauty contest when viewports of widths < 1265 px are taken into consideration, until the breaking point at 980 px occurs, and the right sidebar is removed. But then it immediately adapts to the viewport's width, so it only looks okay - depending on contents - for a few tens of pixels.

Jason C · Accepted Answer · 2022-04-27 21:06:38Z

2

not quoted, but highlighted

printf("here's some code\n");
int x = 99 + 100;

quoted and highlighted

printf("here's some code\n");
int x = 99 + 100;

answered Apr 27, 2022 at 21:06

community wiki

Jason C

Add a comment |

2 revs · Accepted Answer · 2022-05-19 15:45:34Z

2

You should call foo(bar = TRUE). The bar argument is very important because it prevents foo overflow.

edited May 19, 2022 at 15:45

community wiki

2 revs
Ian Campbell

Thanks, this really helped!
– Ian Campbell
Commented May 19, 2022 at 15:45

Add a comment |

Dharman · Accepted Answer · 2022-05-26 15:05:50Z

2

Stacks editor is broken. This is a proof.

_Proof

answered May 26, 2022 at 15:05

community wiki

Dharman

Add a comment |

2 revs · Accepted Answer · 2022-06-20 13:35:54Z

2

Testing spoilers and code fences:

none ! code block ! Text block none ! code block ! Text block

Hmm...

none ! code block !
Text block
none ! code block !
Text block

none code block
Text block asd asd
Text block

edited Jun 20, 2022 at 13:35

community wiki

2 revs
Larnu

Add a comment |

Makyen · Accepted Answer · 2022-07-03 21:04:09Z

2

The following text is from answer to: "How to indent a few lines in Markdown markup?" by AgainPsychoX. It is under a CC BY-SA 4.0 license.

This is normal text.

This gets indented, without enumeration nor dots.

Multiple levels seems to be possible?

Yes, but syntax gets messy, unless you write it single line :)

answered Jul 3, 2022 at 21:04

community wiki

Makyen

Add a comment |

2 revs · Accepted Answer · 2022-07-14 03:01:24Z

2

Testing something with new editor and its ability to convert local links to question titles.

Some links which should get converted to question titles:

Highlighting:

print('test')

edited Jul 14, 2022 at 3:01

community wiki

2 revs
Henry Ecker

Add a comment |

2 revs · Accepted Answer · 2022-07-23 09:48:07Z

2

Testing server-side rendering of NBSP in inline code:

" ".join(map(shlex.quote, sys.argv))

edited Jul 23, 2022 at 9:48

community wiki

2 revs
41686d6564 stands w. Palestine

Add a comment |

7 revs · Accepted Answer · 2022-08-13 05:16:06Z

Text Fragment Linking

test1 [text](link)

test2 [text][ref]

test3: https://example.com/#:~:text=illustrative%20examples

test4: https://example.com/#:~:text=illustrative%20examples

test5 <a href="">...</a> works

<a href="https://example.com/#:%7E:text=illustrative%20examples">
<a href="https://example.com/#:%7E:text=illustrative%20examples">
<a href="https://example.com/#:%7E:text=illustrative%20examples">
<a href="https://example.com/#:%7E:text=illustrative%20examples">
<a href="https://example.com/#:~:text=illustrative%20examples">

Using all allowed URL Code points

https://url.spec.whatwg.org/#url-code-points

test1

test2

test3: https://example.com/!$'()*+./:;=?@_~&,-

test4: https://example.com/!$'()*+./:;=?@_~&,-

test5

<a href="https://example.com/#!$%27()*+./:;=?@_%7E&amp;,-">
<a href="https://example.com/#!$%27()*+./:;=?@_%7E&amp;,-">
<a href="https://example.com/#!$%27()*+./:;=?@_%7E&amp;,-">
<a href="https://example.com/#!$%27()*+./:;=?@_%7E&amp;,-">
<a href="https://example.com/#!$%27()*+./:;=?@_~&amp;,-">

~ : percent-encoded, unless <a> element used.
' : percent-encoded always

VLAZ · Accepted Answer · 2022-08-19 11:57:02Z

2

text	match regex	replaced
``	`.*`	`foo`
`a`	`.*`	`foofoo`
`ab`	`.*`	`foofoo`
	`^.*$`	`foo`
`a`	`^.*$`	`foo`
`ab`	`^.*$`	`foo`

answered Aug 19, 2022 at 11:57

community wiki

VLAZ

Add a comment |

Cristobal Arroyo · Accepted Answer · 2022-08-26 01:38:33Z

2

html <h1>Heading1</h1> <details>Some details</details>

answered Aug 26, 2022 at 1:38

community wiki

Cristobal Arroyo

html <html><h1>Sample comment</h1> <details>This comment comes from python stackapi</details><html>
– Cristobal Arroyo
Commented Aug 26, 2022 at 2:15

Add a comment |

Makyen · Accepted Answer · 2022-09-07 17:12:47Z

2

Tabs being converted to spaces

In code fences:

    this is a test
    this is a test
    this is a test

In a <pre><code> block:

 this is a test
    this is a test
    this is a test

In a <pre><code> block using HTML entities:

	this is a test
	this is a test
	this is a test

answered Sep 7, 2022 at 17:12

community wiki

Makyen

Add a comment |

Undo · Accepted Answer · 2022-09-07 22:11:34Z

2

This is a test image:

answered Sep 7, 2022 at 22:11

community wiki

Undo

Add a comment |

G-Man Says 'Reinstate Monica' · Accepted Answer · 2022-09-19 21:03:48Z

2

HTML stuff (markup) in a Markdown table:

syntax / example	explanation / comment
`thing₁:thing₂`	Greek letters: alpha, beta, and gamma (γ).

answered Sep 19, 2022 at 21:03

community wiki

G-Man Says 'Reinstate Monica'

Add a comment |

NathanOliver · Accepted Answer · 2022-10-13 13:22:00Z

2

this is a test of embedding links into block quotes

answered Oct 13, 2022 at 13:22

community wiki

NathanOliver

Add a comment |

2 revs · Accepted Answer · 2022-10-27 13:08:18Z

2

Test wrong formatting from new editor:

Single line

`

const hello = "world";

`

Multi line

`

const hello = "world";

const foo = 42;

console.log(hello, foo);

`

Single line more backticks

`

const hello = "world";

`

Multi line more backticks

`

const hello = "world";

const foo = 42;

console.log(hello, foo);

`

edited Oct 27, 2022 at 13:08

community wiki

2 revs
VLAZ

Add a comment |

2 revs · Accepted Answer · 2022-12-05 07:06:39Z

2

Table | Foo | Bar | Baz | | --- | --- | --- | | 123 | 456 | 789 |

Fullwidth symbol and URL：https://example.com/

The rendering of the preview during editing and the actual rendering are different.

edited Dec 5, 2022 at 7:06

community wiki

2 revs
mjy

1

If you haven’t seen it yet, see also this MSE post: meta.stackexchange.com/questions/359192/…
– cocomac
Commented Dec 5, 2022 at 7:00

Add a comment |

3 revs, 2 users 50% · Accepted Answer · 2022-12-12 16:56:38Z

2

Posting an answer so that I can test stuff with comments

Editing so that other reviewers don't have to waste their time on a formatting sandbox answer (editing from the review queue marks the review item as completed).

edited Dec 12, 2022 at 16:56

community wiki

3 revs, 2 users 50%
Bring Back The Polyglot

1

Thanks for the answer!
– Bring Back The Polyglot
Commented Apr 25, 2019 at 15:36

Add a comment |

5 revs · Accepted Answer · 2023-03-18 15:18:45Z

Site	Step 1: Draft your question
es.stackoverflow	La comunidad está aquí para ayudarte con problemas específicos de programación, algoritmos, o lenguaje. Evita hacer preguntas cuyas respuestas puedan estar basadas en opiniones. Resume el problema Incluye detalles sobre tu objetivo Describe los resultados esperados y obtenidos Incluye cualquier mensaje de error Describe lo que has intentado Enseña lo que has intentado y dinos qué has encontrado (en este sitio o en cualquier otro) y por qué no satisfizo tus necesidades. Se pueden obtener mejores respuestas cuando se proporciona una investigación previa. Muestra algo de código Cuando sea apropiado, comparte la mínima cantidad de código necesario para reproducir tu problema (también llamado un ejemplo mínimo verificable)
hardwarerecs	Questions here get better answers when you… …show us what you've done and why it hasn't worked for you …list all your requirements for a single, specific piece of hardware …avoid asking for technical support Remember, we don't do compatibility queries, build reviews or HOWTOs. For the full details on what sort of questions are appropriate, see our guidelines and the types of hardware we can recommend. Questions about the site itself should be asked on meta. visit the help center » asking help »
rus	Вопрос должен быть о русском языке. Вопрос должен быть конкретным (чтобы на него можно было дать лаконичный ответ). Указывайте детали. Если у вас есть свои соображения, опишите их. Если у вас есть предложения по улучшению сайта, опишите их на Мете. посетите справку » как задавать вопросы »
ru.stackoverflow	Сообщество здесь, чтобы помочь вам с конкретными проблемами по программированию, алгоритмам, языкам программирования. Избегайте публикации вопросов, на которые невозможно дать объективный ответ. Опишите проблему кратко Включите подробную информацию о вашей цели Опишите, что вы ожидали и что получили Добавьте сообщения об ошибках Опишите, что вы пробовали Покажите, что вы пробовали, что вы нашли (на этом сайте или в другом месте), и почему это не решает вашу проблему. Вы можете получить лучшие ответы, когда продемонстрируете ваше исследование. Добавьте немного кода По возможности добавьте минимальный код, необходимый для воспроизведения вашей проблемы (так называемый минимальный воспроизводимый пример)
civicrm	Is your question about CiviCRM? If your question is not about CiviCRM, you're on the wrong site. Detailed questions get informative answers! Include your CiviCRM version, CMS, screenshots and any other details you can think of. Show your research. Let us know what you've learned while trying to find an answer, so we can get right to the point. Tell your story! New here? Take the tour! If your question is about this website, ask it on meta instead. visit the help center » asking help »
matheducators	Is your question about teaching mathematics or the process of learning mathematics? We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center » asking help »
softwarerecs	Five ways to get great answers: Be sure to tell us... ...the task you want to accomplish ...your requirements for that task ...what you already know about software available for this purpose Then, write a specific and to-the-point title and tag your question according to the category of software you're looking for! See also: What information is required? visit the help center » asking help »
pt.stackoverflow	Sua pergunta é sobre programação? Preferimos perguntas que podem ser respondidas, ao invés de debatidas. Dê detalhes. Diga o que você já tentou. Resuma o problema Inclua detalhes sobre o seu objetivo Descreva os resultados atuais e os esperados Inclua mensagens de erro Descreva o que você já tentou Mostre o que você já tentou e conte para nós o que você encontrou (neste site ou em outro lugar) e o motivo que isso não resolveu seu problema. Você consegue melhores respostas quando você fornece pesquisas. Mostre um pouco de código Quando for apropriado, compartilhe uma quantidade mínima de código no qual os outros possam usar para reproduzir o seu problema (também chamado de exemplo mínimo, completo e verificável)
mathematica	*Is your question about how to use the software Wolfram Mathematica?* Search the site. Look it up in Mathematica's documentation center. Then ask. We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center » asking help »
french	Is your question about the French language? We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center » asking help »
japanese	Is your question about the Japanese language? We prefer questions that can be answered, not just discussed. Questions should also be educational to other people. Questions asking for translations, transcriptions or proofreading are off-topic, and will be closed. We're here to help you learn, not to provide a translation service. If you're struggling to understand a word or phrase, frame your question around asking for help understanding the specific word or clause in the phrase you're struggling with. Provide details. Share your research. If your question is about this website, ask it on meta instead.
german	To obtain a useful and quick answer, please adhere to the following: Tell us precisely what you want to know. Tell us what you already found or understood. If possible, provide an example and context. If you are asking for a translation, meaning, or similar: Tell us why a dictionary did not help you. We do not translate or proofread texts. Ask about a single, specific problem instead. Du darfst auch gerne auf Deutsch fragen. If your question is about this website, ask it on meta instead. visit the help center » asking help »
parenting	Is your question about parenting? We prefer questions that can be answered, not just discussed. Opinions should be backed up either with a reference, or experiences that happened to you personally. If your question is about this website, ask it on meta instead. visit the help center »
drupal	Is your question about the Drupal CMS? We prefer questions that can be answered, not just discussed. Remember to report the Drupal version and relevant modules you are using. If your question is about code, include the relevant parts. If your question is about this website, ask it on meta instead. visit the help center »
codegolf	Is your question a programming puzzle or code golf challenge? All challenge questions on this site should have: A clear specification of what constitutes a correct submission, so that it is possible to indisputably decide whether an entry is valid or not. Test cases are highly encouraged. An objective primary winning criterion, so that it is possible to indisputably decide which entry should win. Please follow a standard template and post first in the meta Sandbox for feedback. If your question is about this website, ask it on meta instead. visit the help center » asking help »
codereview	Improve code that you wrote or maintain, through peer review. Your question must contain code that is already working correctly, and the relevant code sections must be embedded in the question. Please avoid stripping out key details that may be relevant to the review. If your code is incomplete or not working, you should ask for help on another site. You may wish to mention specific concerns: performance, security issues, etc. We recommend reading our Guide to Asking Questions. If your question is about this website, ask it on meta instead. visit the help center »
scifi	The community is here to help you with questions about science fiction or fantasy. Provide details and share research with your question. If you are trying to identify a story you may want to check out our helpful guide on what to include. If your question is about a story that isn't science fictional or fantastical you may want to check out these sites instead: Movies & TV if your question is about works from the screen. Literature if your question is about written works. Arqade if your question is about game play elements of a video game. Anime & Manga if your question is about an anime or manga.
graphicdesign	Be specific. Show your work and explain where you’re stuck. Read our guidelines for font-identification and style-identification questions. For feedback on work, read our critique guidelines. Subjective questions are okay if answerable with facts and reason. Technical support or questions using graphic-design software for non-design purposes are off-topic and should be asked on Super User. For more help, please see What topics can I ask about here? and What types of questions should I avoid asking? If your question is about this website, ask it on meta instead.
video	Is your question about video recording and production? We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center » asking help »
writing	Is your question about writing, copywriting, publishing or editing? If your question is about the strictly interpreted correctness of English grammar or syntax rules, please ask on English, not here. We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center »
physics	Is your question about physics? We prefer questions that can be answered, not just discussed. Homework-like questions should ask about a specific physics concept and show some effort to work through the problem. See: homework guidance. Provide details. Share your research. Please use MathJax for equations in questions. If your question is about this website, ask it on meta instead. visit the help center » asking help »
rpg	Is your question about role-playing games? We prefer questions that can be answered, not just discussed. The community is here to help you with questions about role-playing games. Make sure to specify which game (name and edition) you are asking about, provide details, and share research with your question. If your question is about this website, ask it on meta instead. visit the help center » asking help »
wordpress	Is your question about WordPress development? We focus on technical questions. A basic level of PHP and Javascript will be helpful in understanding many of the answers. We prefer questions that can be answered, not just discussed. Provide details. Share your research. Read the help section. If your question is about 3rd Party WordPress Themes and Plugins (e.g. WooCommerce, ACF, Divi, etc), these are off-topic. You can visit the official support routes, the .org support forum, and the relevant communities (e.g. Facebook groups), or ask on Stack Overflow instead. If your question is about this website, or something that happened on this site, ask it on the meta site instead. visit the help center » asking help »
stackapps	Is your question about the Stack Exchange API, applications written with the API, or scripts that work on Stack Exchange sites? Use app template If your app is still under development or if you're experimenting, add the placeholder tag; please remove the post when you're done testing if you don't publish (details). Use library template Use script template For questions, bug-reports or feature-requests... ...use the support tag for help using the API. ...use the bug tag for bug reports. ...use the feature-request tag to suggest improvements to the site or API. Provide details. Post updates on your work. Share your research. visit the help center »
english	Is your question about using English? We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about learning English, ask it on ELL instead. If your question is about this website, ask it on meta instead. visit the help center » asking help »
askubuntu	The community is here to help you with questions about Ubuntu. Provide details and share research with your question. Questions about Pop OS, Linux Mint, Kali Linux, or any other distribution that is not an official flavor of Ubuntu are off-topic on this site, and will be closed. Check this page for more details.
math	Is your question about math? We prefer questions that can be answered, not just discussed. Provide details. Share your research. Write an interesting, specific title that summarizes the question. If your question is about this website, ask it on meta instead. visit the help center » asking help »
cooking	Is your question about cooking? We prefer questions that can be answered, not just discussed. Please note that requests for recipes are considered off topic, and will be closed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center »
webmasters	Is your question about the operation of a website you control, or issues that affect entire websites? We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center » asking help »
meta	Is your question about the Stack Exchange engine that powers the Stack Exchange network? Meta is different from other sites. See: What is meta? How do I participate in Meta? visit the help center » asking help »
serverfault	Is your question about managing information technology systems in a business environment? Review our list of allowed topics. We prefer questions that can be answered, not just discussed. Provide details. Share your research. If your question is about this website, ask it on meta instead. visit the help center » asking help »
stackoverflow	The community is here to help you with specific coding, algorithm, or language problems. Avoid asking opinion-based questions. Summarize the problem Include details about your goal Describe expected and actual results Include any error messages Describe what you’ve tried Show what you’ve tried and tell us what you found (on this site or elsewhere) and why it didn’t meet your needs. You can get better answers when you provide research. Show some code When appropriate, share the minimum amount of code others need to reproduce your problem (also called a minimum, reproducible example)

@Joachim Thanks. I used "delete", not to delete the the post but delete the answer body.... I assumed that some html tags should not caused problems but I was wrong. By the other hand, the problem is now solved... the post might be deleted or archived now. — Rubén, Commented Mar 18, 2023 at 15:32

2 revs · Accepted Answer · 2023-03-29 17:01:15Z

This answer is to test some more complex link and image Markdown syntax.

The image used is:

Icojam-Weathy-24-tornado.png https://i.sstatic.net/wRMuO.png
original URL: http://www.iconarchive.com/show/weathy-icons-by-icojam/24-tornado-icon.html
Artist: Icojam
Iconset: Weathy Icons (25 icons)
License: Public Domain

The original intent for this answer was to verify some more complex link and image Markdown to make sure that a couple of userscripts were parsing it correctly. However, in the process of creating these, I encountered a bug in at least the SE post preview parsing of the Markdown. I don't know until saving this if there are issues in the backend processing.

Bug identified (only SE post preview; works in post rendered in the backend: i.e. once it's saved):

No support for multi-line tooltips

Simple examples: working demo on CommonMark site

More complex examples

multi-line text + image + multi-line text with multi-line tooltips (inner and outer) working demo on CommonMark site; not working in SE post edit preview

This multi-line
text is part
of the link some more
multi-line
text

multi-line text + image + multi-line text with tooltips (inner and outer, both multi-line); working demo on CommonMark site; not working in SE post edit preview

This multi-line
text is part
of the link Even
this is
some more link text

Links:

named/numbered: `[link text][ref]` format

"normal"

image with tooltips (inner and outer)

multi-line text + image + multi-line text with multi-line tooltips (inner and outer) working demo on CommonMark site; not working in SE post edit preview

This multi-line
text is part
of the link some more
multi-line
text

`[link text](URL + optional title/tooltip)` syntax

"normal", no tooltip

link with tooltip

just some link text

image with tooltip (inner and outer)

text + image with tooltip (inner and outer)

This is part of the link

text + image + text with tooltip (inner and outer)

This is part of the link this is some more text

multi-line text + image + text with tooltips (inner and outer)

This multi-line
text is part
of the link Even this is some more link text

multi-line text + image + multi-line text with tooltips (inner and outer)

This multi-line
text is part
of the link Even
this is
some more link text

multi-line text + image + multi-line text with tooltips (inner and outer, both multi-line); working demo on CommonMark site; not working in SE post edit preview

This multi-line
text is part
of the link Even
this is
some more link text

More variations: different delimiters

link with tooltip (escaping the delimiter; should work in posts)

SE Chat: More variations, different delimiters

SE Chat doesn't require escaping the delimiter on a tooltip interior to the tooltip and will display the escape. It also doesn't support a delimiter other than ".

link with tooltip (NOT escaping the delimiter; should not work in posts) See these in chat starting here

The following do not, and should not, work in SE posts. They are specific to SE Chat, which uses a different Markdown parser with somewhat different and more limited syntax.

[title using " as delimiter](https://example.com/foo "tooltip: "tooltip: this is a title/tooltip [], with something in [brackets], (parenthesis), 'single quotes', and "double quotes" which don't use escaping; and all escaped [brackets], (parenthesis), 'single quotes', and "double quotes". Delimiter at the "end""): Works in SE chat, but the escaping for the single and double quotes is displayed in the title. The escaping of the parentheses and brackets are not displayed.
[title using " as delimiter; not escaping delimiters](https://example.com/foo "tooltip: "tooltip: this is a title/tooltip [], with something in [brackets], (parenthesis), 'single quotes', and "double quotes" which don't use escaping; Delimiter at the "end""): Works in SE chat, with correct display in the title/tooltip, due to not escaping any delimiters.

Examples from CommonMark spec

Multi-line title: Example #196 from CommonMark spec (live CommonMark demo) NOT working in post edit preview:

foo

Зонтик · Accepted Answer · 2023-05-22 05:51:49Z

2

This is strikethrough font: ~~abc~~

This is strikethrough font: <s>abc</s>

answered May 22, 2023 at 5:51

community wiki

Зонтик

Add a comment |

3 revs · Accepted Answer · 2023-08-09 04:54:00Z

2

<kbd><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</kbd>

edited Aug 9, 2023 at 4:54

community wiki

3 revs
Зонтик

– Petəíŕd the Wizard
Commented Aug 17, 2023 at 14:10
@PetəíŕdTheLinuxWizard is it magic?
– Зонтик
Commented Aug 17, 2023 at 14:12
haha! I did [](https://google.com) and it works
– Petəíŕd the Wizard
Commented Aug 17, 2023 at 14:13
– Зонтик
Commented Aug 17, 2023 at 14:13
Talking silently
– Petəíŕd the Wizard
Commented Aug 17, 2023 at 14:14
– Petəíŕd the Wizard
Commented Aug 17, 2023 at 14:14
It works!
– Зонтик
Commented Aug 17, 2023 at 14:14
[ ](google.com)
– Petəíŕd the Wizard
Commented Aug 17, 2023 at 14:14
github [google](github.com)
– Petəíŕd the Wizard
Commented Aug 17, 2023 at 14:15
test
– Зонтик
Commented Sep 10, 2023 at 7:30
– Petəíŕd the Wizard
Commented Sep 10, 2023 at 7:31
tada!!
– Petəíŕd the Wizard
Commented Sep 10, 2023 at 7:31
@PetəíŕdTheLinuxWizard so fast?
– Зонтик
Commented Sep 10, 2023 at 7:32
– Зонтик
Commented Sep 10, 2023 at 7:32
Зонтик
– Зонтик
Commented Sep 10, 2023 at 7:33

| Show 4 more comments

David Spector · Accepted Answer · 2023-08-17 21:01:28Z

2

So this is just a test of snippets. I see how it works: when you enter code, then click Results, nothing happens. You have to submit it, then it will work, then, finally, you can post your answer. Three steps instead of two. Okay. I just wish I could post all the nice little snippets I've accumulated over the years for my own use. Can't do that, because SO has lots of rules and it is easy to get banned. I know; I have. I'm very careful when I post questions, not to post them in the form of "here is a neat way to do something".

alert('hi');

.a {color:green;}

<div class=a>Test</div>

answered Aug 17, 2023 at 21:01

community wiki

David Spector

Very nice. I like snippets!
– David Spector
Commented Aug 17, 2023 at 21:03

Add a comment |

2 revs, 2 users 60% · Accepted Answer · 2023-08-30 19:53:53Z

2

A new list?

This.
That.

Edits. Grace period edits?

edited Aug 30, 2023 at 19:53

community wiki

2 revs, 2 users 60%
Christian Rau

Add a comment |

The Empty String Photographer · Accepted Answer · 2023-11-30 12:28:09Z

2

Wait, what!?! I don’t own The Nineteenth Byte!

answered Nov 30, 2023 at 12:28

community wiki

The Empty String Photographer

Add a comment |

3 revs · Accepted Answer · 2024-03-13 09:50:34Z

2

Raw links are linkified differently in live preview and rendered result?

Code https://github.com/
Code：https://github.com/
Code: https://github.com/
Code - https://github.com/
Code!https://github.com/
Code.https://github.com/
Code https://github.com/
Codehttps://github.com/

In live preview, the links are linkified if immediately prefaced by a punctuation. If the rendered result, a space is required.

edited Mar 13 at 9:50

community wiki

3 revs
GSerg

Add a comment |

4 revs, 2 users 97% · Accepted Answer · 2024-06-12 19:25:33Z

Comment on this question: Why has the parsing of the   in tables changed?

Adding   isn't useful, just use correct markdown, you are missing a "|".

Your example:

So that instead of this:	I get this:

	Looks much better, right?

My example (use image and specify width):

1. I get this:

My example (no non-breaking spaces):

2. I get this:

My example (with a small number of non-breaking spaces):

3. I get this:

Adding the non-breaking spaces changes the size of the right column.

Notes:

Allowed attributes for <img>

The following attributes are allowed on the tag, in the order shown below. Note that the mobile theme enforces a maximum width of 90%, so specifying a height might not scale the image proportionally on the mobile sites.

Attributes must be specified in this order. You may omit attributes you do not want to specify, but specifying a later attribute before an earlier one will strip the tag.

src=""
width="" (1–999; plain number without any extensions like px)
height="" (1–999; plain number without any extensions like px; pay attention to order warning above)
alt=""
title=""

You would be better off using percentages to enforce a specific ratio of the images while using three separate images, but using a single image of a grid is probably the best solution.

Interesting how at the time of this comment the last table example doesn't render as a table, but just as the symbols that make up a table (i.e. it is broken). The table required an empty line between it and the preceding sentence. But as I fixed that one, the second-to-last table, missing an empty line as well, took over the problem, up to the first table missing that line. Interesting. — Joachim, Commented Jun 12 at 19:25

2 revs · Accepted Answer · 2024-08-27 16:07:14Z

2

Testing to see if ladybird will post on SE

edited Aug 27 at 16:07

community wiki

2 revs
Aibobot

Aww
– Elements In Space
Commented Aug 27 at 5:26
1

(for the confused - bunch of people are writing a new browser from scratch. I'm vaguely interested and experimenting with it https://ladybird.org for the curious, though I'm literally compiling a fresh build every time I fire it up for testing)
– Journeyman Geek
Commented Aug 27 at 16:17
Also @ElementsInSpace I should have used that to test :D
– Journeyman Geek
Commented Aug 27 at 16:17

Add a comment |

Formatting Sandbox

304 Answers 304

hello

hello

hello

hello

Formatting of images in tables:

Default behaviour:

Using the &nbsp;

Using &nbsp; and <br/>

Using <img> entities with custom width set

Using <img> entities with width and height

Text Fragment Linking

Using all allowed URL Code points

Tabs being converted to spaces

This answer is to test some more complex link and image Markdown syntax.

Bug identified (only SE post preview; works in post rendered in the backend: i.e. once it's saved):

No support for multi-line tooltips

Simple examples: working demo on CommonMark site

More complex examples

multi-line text + image + multi-line text with multi-line tooltips (inner and outer) working demo on CommonMark site; not working in SE post edit preview

multi-line text + image + multi-line text with tooltips (inner and outer, both multi-line); working demo on CommonMark site; not working in SE post edit preview

Links:

named/numbered: [link text][ref] format

"normal"

image with tooltips (inner and outer)

text + image with tooltips (inner and outer)

text + image + text with tooltips (inner and outer)

multi-line text + image with tooltips (inner and outer)

multi-line text + image + text with tooltips (inner and outer)

multi-line text + image + multi-line text with tooltips (inner and outer)

multi-line text + image + multi-line text with multi-line tooltips (inner and outer) working demo on CommonMark site; not working in SE post edit preview

[link text](URL + optional title/tooltip) syntax

"normal", no tooltip

link with tooltip

image with tooltip (inner and outer)

text + image with tooltip (inner and outer)

text + image + text with tooltip (inner and outer)

multi-line text + image + text with tooltips (inner and outer)

multi-line text + image + multi-line text with tooltips (inner and outer)

multi-line text + image + multi-line text with tooltips (inner and outer, both multi-line); working demo on CommonMark site; not working in SE post edit preview

More variations: different delimiters

link with tooltip (escaping the delimiter; should work in posts)

SE Chat: More variations, different delimiters

link with tooltip (NOT escaping the delimiter; should not work in posts) See these in chat starting here

Examples from CommonMark spec

Multi-line title: Example #196 from CommonMark spec (live CommonMark demo) NOT working in post edit preview:

Allowed attributes for <img>

You must log in to answer this question.

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

Linked

Related

Hot Network Questions

Using the ` `

Using ` ` and `<br/>`

Using `<img>` entities with custom `width` set

Using `<img>` entities with `width` and `height`

named/numbered: `[link text][ref]` format

`[link text](URL + optional title/tooltip)` syntax

Not the answer you're looking for? Browse other questions tagged
discussion
support
markdown
testing
sandbox
.