using table to present images horizontally

caption as second row

caption as headers

caption as text

👍

Zarya (Russian: Заря́, lit. 'Dawn'^[b]), also known as the Functional Cargo Block or FGB (from the Russian: "Функционально-грузовой блок", lit. 'Funktsionalno-gruzovoy blok' or ФГБ), is the first module of the International Space Station to have been launched.^[2] The FGB provided ...

---

Comment: [ -+- ]

Zarya (Russian: Заря́, lit. 'Dawn'[b]), also known as the Functional Cargo Block or FGB (from the Russian: "Функционально-грузовой блок", lit. 'Funktsionalno-gruzovoy blok' or ФГБ), is the first module of the International Space Station to have been launched.[2] The FGB provided ...

---

Comment: [ [ -+- ] ]

Zarya (Russian: Заря́, lit. 'Dawn'[b]), also known as the Functional Cargo Block or FGB (from the Russian: "Функционально-грузовой блок", lit. 'Funktsionalno-gruzovoy blok' or ФГБ), is the first module of the International Space Station to have been launched.[2] The FGB provided ...

---

We are here: https://meta.stackexchange.com/a/364246/282094

Test Answer: Does Cyrillic kill proper display of hyperlinks in comments, but not in posts?

https://en.wikipedia.org/wiki/Zarya

Zarya (Russian: Заря́, lit. 'Dawn'[b]), also known as the Functional Cargo Block or FGB (from the Russian: "Функционально-грузовой блок", lit. 'Funktsionalno-gruzovoy blok' or ФГБ), is the first module of the International Space Station to have been launched.[2] The FGB provided electrical power, storage, propulsion, and guidance to the ISS during the initial stage of assembly. With the launch and assembly in orbit of other modules with more specialized functionality, Zarya is now[when?] primarily used for storage, both inside the pressurized section and in the externally mounted fuel tanks.

Testing if powershell does syntax highlight when specified:

. "$PSScriptRoot\third.ps1" #get $Current  = second.ps1 #get $Caller   = first.ps1  #get $Original = first.ps1  $wc = new-object System.Net.WebClient $wc.Headers.Add("user-agent", "PowerShell Script") $wc.Proxy.Credentials = [System.Net.CredentialCache]::DefaultNetworkCredentials  $action = [System.IO.Path]::GetFileNameWithoutExtension($myInvocation.MyCommand.Name) . "$PSScriptRoot\third.ps1" #get $Current  = second.ps1 #get $Caller   = first.ps1  #get $Original = first.ps1  $wc = new-object System.Net.WebClient $wc.Headers.Add("user-agent", "PowerShell Script") $wc.Proxy.Credentials = [System.Net.CredentialCache]::DefaultNetworkCredentials  $action = [System.IO.Path]::GetFileNameWithoutExtension($myInvocation.MyCommand.Name)  

. "$PSScriptRoot\third.ps1" #get $Current  = second.ps1 #get $Caller   = first.ps1  #get $Original = first.ps1  $wc = new-object System.Net.WebClient $wc.Headers.Add("user-agent", "PowerShell Script") $wc.Proxy.Credentials = [System.Net.CredentialCache]::DefaultNetworkCredentials  $action = [System.IO.Path]::GetFileNameWithoutExtension($myInvocation.MyCommand.Name) . "$PSScriptRoot\third.ps1" #get $Current  = second.ps1 #get $Caller   = first.ps1  #get $Original = first.ps1  $wc = new-object System.Net.WebClient $wc.Headers.Add("user-agent", "PowerShell Script") $wc.Proxy.Credentials = [System.Net.CredentialCache]::DefaultNetworkCredentials  $action = [System.IO.Path]::GetFileNameWithoutExtension($myInvocation.MyCommand.Name)  

Get-Module -Name "VMWave.*" | ForEach-Object { Import-Module $_; Write-Host "Imported Module $_"} 

Testing a table not preceded by an empty line: | | | | |---|---|---| |Bandwidth |XOUT, YOUT No external filter| 1600 Hz| |Bandwidth |ZOUT No external filter |550 Hz| |RFILT Tolerance| |32 ± 15% kΩ| |Sensor Resonant Frequency| |5.5 kHz|

❌ Oops! Does not work.

---

Testing a table preceded by an empty line:

✅ Works just fine.

This is a near duplicate to another answer of mine here. It appears at some point in the very recent past id attributes are no longer being automatically created for headings. This is a test to A) verify that, and B) see if it's still possible to use explicit id attributes on <hN> HTML elements. It also may test having more than one identical id attribute in the same page, which, if nothing is done by SE, is something that devolves onto the browser's behavior. Unfortunately, it's not possible to test this with just a revision of my prior answer, because id attributes are stripped when revisions are shown in the post history.

This heading was added to test if the IDs assigned to headings change

It looks like H4, H5, and H6 elements were added to the CSS. This is to test to see if they are live on the site for user contributions.

Using Markdown:

An H1 (Markdown)

An H2 (Markdown)

An H3 (Markdown)

An H4 (Markdown)

An H5 (Markdown)

An H6 (Markdown)

Using HTML:

An H1 (HTML)

An H2 (HTML)

An H3 (HTML)

An H4 (HTML)

An H5 (HTML)

An H6 (HTML)

Using HTML with an id attribute (expected to be stripped):

An H1 (HTML) An H2 (HTML) An H3 (HTML) An H4 (HTML) An H5 (HTML) An H6 (HTML)

More testing for automatic generation of id and static assignment.

1. Fun with lists and headings:

   1. Issue 1: This is an h5 in a ordered list

   2. Issue 2: This is an h5 in a ordered list

   3. Issue 3: This is an h5 in a ordered list

2. This is the same thing in HTML:

   1. Issue 1 (HTML):

   2. Issue 2 (HTML):

   3. Issue 3 (HTML):

3. HTML with a static id attribute for each <h5>:

   In the preview rendering, the <h5> elements are stripped, but content is displayed.

   1. Issue 1 (HTML with static ID):
   2. Issue 2 (HTML with static ID):
   3. Issue 3 (HTML with static ID):

Stack Exchange HLJS Colors

Testing an example link:

• HTML link: How do I search tags?
• Markdown link ([text][1]), How do I search tags?

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

Testing out how headers work:

hello

hello

hello

hello

Trying to abuse KBD tags:

waffles

waffles

[tag:waffles]

[tag:waffles]

waffles

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

Testing some stuff with flairs:

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:

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.

Spoiler:

Not spoiled!

Spoiled!

Not spoiled!

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; 

Testing comment upvote by low rep user.

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

Stacks editor is broken. This is a proof.

_Proof

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

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 :)

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

Some links which should get converted to question titles:

• Quotes are ignored in search when there's a word/tag outside quotes
• DevOps.SE is in a favor of a mass-migration of questions based on topicality
• Minor alignment issue in Activity page Impact section's tooltip

---

Highlighting:

print('test') 

Testing server-side rendering of NBSP in inline code:

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

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

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

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

This is a test image:

HTML stuff (markup) in a Markdown table:

this is a test of embedding links into block quotes

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); 

`

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.

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

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

This is just a test answer for images.

_{(source: googleapis.com)}