Prose
The prose component provides proper styling for rendered Markdown.
Class | Output |
---|---|
.s-prose |
Adds proper styling for rendered Markdown. |
.s-prose__xs |
Our most compact version with the smallest font size and line height. |
.s-prose__sm |
Decreases the base font size and line height. |
.s-prose__md |
Increases the base font size and line height. |
<div class="s-prose">
…
</div>
The Comprehensive Formatting Test
Code Formatting
- Inline code formatting or code spans
- Normal backticks
System.out.println("Hello World!");
. - Escaped backticks:
for line in `someCommand`
- A single backtick character in a line won't form a code block '`'.
- There are two backtick characters ('`') in this line ('`').
- Normal backticks
- Block code formatting
System.out.println("Hello World!");
System.out.println("Code Block!");
<div class="s-progress s-progress__stepped">
<div class="s-progress--step is-complete">
<a href="…" class="s-progress--stop">
@Svg.CheckmarkSm
</a>
<div class="s-progress--bar s-progress--bar__right"></div>
<a class="s-progress--label">…</a>
</div>
<div class="s-progress--step is-complete">
<a href="…" class="s-progress--stop">
@Svg.CheckmarkSm
</a>
<div class="s-progress--bar s-progress--bar__left"></div>
<div class="s-progress--bar s-progress--bar__right"></div>
<a class="s-progress--label">…</a>
</div>
<div class="s-progress--step is-active">
<div class="s-progress--stop"></div>
<div class="s-progress--bar s-progress--bar__left"></div>
<div class="s-progress--bar s-progress--bar__right"></div>
<div class="s-progress--label">…</div>
</div>
<div class="s-progress--step">
<div class="s-progress--stop"></div>
<div class="s-progress--bar s-progress--bar__left"></div>
<div class="s-progress--label">…</div>
</div>
</div>
-
HTML and other markdown are not supported within code spans or code blocks.
``` </code> *Not in code!* <code> ```
</code> *Not in code!* <code>
Line Breaks
-
This is one line. This was intended to be on the next line, but it appears on the same line.
-
This is one paragraph. It has some sentences.
This is intended to be a second paragraph.
-
This is one line.
This is intended to be on the next line.
Italics and Bold
-
This is italic text. This is italic too.
-
This is bold text. This is bold too.
-
underscores only and asterisks only and underscore and asterisk and asterisk and underscore.
-
Four!
-
Five!
-
Two and Two!
-
One and One!
Links
-
Inline links:
- Meta Stack Exchange
- Meta Stack Exchange with tooltip
- Meta Stack Exchange with tooltip
- Meta Stack Exchange with tooltip
- [Escaped link to Meta Stack Exchange](https://meta.stackexchange.com)
- No protocol link to Meta Stack Exchange
-
Reference links:
-
Bare URLs
- Bare URLs get turned into links. http://example.com
- Angle brackets force links. https://www.google.com
Images
- Inline images, similar to links but with leading
!
:- A normal image
- An image with a tooltip
- Escaped image so as to not render the actual image
![An image of a unicorn](https://i.stack.imgur.com/7I1jg.jpg (Unicorn!))
- A normal image
- Reference images:
- Image links - surround an image with a link.
- A bunch of images in a row
Headers
-
Heading 1
-
Heading 2
-
Heading 3
-
Heading 4
-
Heading 5
-
Heading 6
- Escaped
#
# Not a heading -
Italic Header
Horizontal Rules
Blockquotes
A general quote With multiple lines
First level!
Second level!
Third level!
Need blank line and one less Spanning a blank line
-
A quote within a list item
-
One can nest blockquotes with multiple
>
characters.First level!
Second level!
Third level!
Need blank line and one less < to go back to second.
Same idea for back to first.
-
Escape a
>
character with a backslash.> I want a
>
! -
Markdown within a blockquote
Enjoy this
unicorn
! -
Code formatting works within a blockquote. Indenting requires 5 spaces: 1 for the blockquote, and 4 for the code indention.
System.out.println("Hello World!");
Inline:
System.out.println("Hello World!");
Code fence:
System.out.println("Hello World!");
Lists
- Unordered Lists
- One
- Two
- Three
- Ordered Lists
- One
- Two
- Three
- Multiple lines within list items: indent 4 spaces, or do we need to?
- Same line Continuation of the same line
- Next line Not indented
- Next line Continuation of the same line
- Nested lists: indent 4 spaces.
- Top level
- Mid level
- Bottom level
- Mid level
- Bottom level
- Mid level
- Top level
- Mid level
- Bottom level
- Mid level
-
List item
List paragraph
-
List item
List paragraph
- Subitem
- Subitem
List paragraph
- Code within list items: indention requires blank line then 4 additional spaces beyond list indention level.
-
Top level
System.out.println("Code fence");
Inline:
System.out.println("Inline");
- Blockquote within list items: blank line then indent 4 spaces.
- Top level
Quote is indented.
Markdown Escapes
\ ` * _ { } [ ] ( ) # + - . !
Tables
Syntax | Whatever |
---|---|
Title | Title |
Title | Title |
Strikethrough
Incorrect
Spoilers
- Create a spoiler with
>!
:
Tyler Durden is Luke Skywalker’s father.
Keyser Söze was dead the whole time.
Allowed HTML
Only some basic HTML elements are whitelisted. Also, only some attributes within those tags are whitelisted as well. If specified, they must be in order! Those that don't meet these requirements are completely stripped from the content.
-
<a>
:href
thentitle
-
<b>
or<strong>
: no attributesBold and Strong
-
<blockquote>
: no attributesTo be or not to be, that is the question.
-
<br>
: no attributesYou can
break to
the next line. -
<del>
or<strike>
: no attributesThat's not right.That's not even wrong.Correct. -
<dl>
,<dt>
, and<dd>
: no attributes- SO
- Stack Overflow
- SE
- Stack Exchange
-
<em>
or<i>
: no attributesEmphasis and Italic
-
<h1>
,<h2>
, and<h3>
: no attributesHeader One
Header Two
Header Three
Header Four
Header Five
Header Six
-
<hr>
: no attributes
-
<img>
:src
thenwidth
thenheight
thenalt
thentitle
-
Specifying one of
width
orheight
scales the image; must specify both to change the aspect ratio. They can't bepx
and they max out at 999.-
Animated gifs are supported
-
-
-
<kbd>
: no attributesabcdefghijklmnopqrstuvwxyz!@#$%^&*()-_=+`~[{]}|;:'",<.>/?0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
-
Nested
<kbd>
elements are allowed.OuterNested
-
-
<ol>
or<ul>
with<li>
:<ol>
can havestart
<ol><li>First</li><li>Second</li></ol> <ul><li>Something</li><li>Else</li></ul>
- First
- Second
- Something
- Else
-
Start at desired number up to 231 - 1.
<ol start="2147483647"><li>First</li></ol>
- First
-
<p>
: no attributes<p>Paragraph1</p><p>Paragraph2</p>
Paragraph1
Paragraph2
-
<pre>
: no attributes<pre>System.out.println("Hello World!");</pre>
System.out.println("Hello World!");
-
<sup>
and<sub>
: no attributesx<sup>2</sup> + A<sub>0</sub>
x2 + A0
-
They can be nested.
a<sup>b<sup>c<sup>d<sub>e<sup>f</sup></sub></sup></sup></sup>
abcdef
-
-
Escape your
<>
HashMap<String, Object>
HashMap<String, Object>
`HashMap<String, Object>`
HashMap<String, Object>
HashMap<String, Object>
HashMap<String, Object>
Unicode
Emojis
☺🐉
Right-to-left
ABCDEF
Superscript, subscript, strikeout
ᵃᵉⁱᵒᵘ ₐₑᵢₒᵤ s̶t̶r̶i̶k̶e̶o̶u̶t̶
Zalgo
Z̸̧̦̥͔̻̞̟͔͒̓̄̓͐͆͋̃̅͆̓͘̚͝͝à̷̛̜͇̺̖̯̭͓̱̱̣̺̲̪̰l̷̢̳̤̮͈͎̩̱̳̱̱̞͆͂̽̀̃͒̿̄̅͊͘͘̚͠͝ͅg̷͙͋o̶̧̩̓̓͌̄͊͐̓̇̏͝ ̶̛͚͖͍̦͕̞͈͆̋̓̈̏̈̓̊̅͆͘͜t̸̬̮̖̖͙͔̮͊̔͊͌́̈́͒̇͒̽̑̎̚̕͠ė̶̖̰̬͙͙̇̈͌͘͜͜x̴͔̎t̶̖́̒̏͒͌̈́̏͊̒̉ͅ ̵̨͍̬͔̼̣̘̖͍͖̘͍͋̑͛̂̾̋ḧ̸̡̘̬̲̣̺́́̿̀̈ͅé̷̦̰̻̤̲̺̠̏͒̉͛̍͌̍ͅr̶̩̯̱̜͆̌̾͌̑̇̊͒̃̀̽̍̚é̴̜̉̇̿̈́͌̕.̸̢̱͔̲̫̇͌̽̌͂͊͊̈́̇
The following is a real-world answer taken from Stack Overflow
The following is a real-world post taken from Meta Stack Exchange.
<div class="s-prose s-prose__xs">
…
</div>
Stacks
Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
Our documentation is built with Stacks itself, using its immutable, atomic classes and components.
The Stacks website documents:
Product
- Semantic and accessible component markup
- Cross-browser compatible Less / CSS
- An icon library
In ancilliary content like comments or side-discussions, it may be appropriate to add the small variation.
<div class="s-prose s-prose__sm">
…
</div>
Stacks
Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
Our documentation is built with Stacks itself, using its immutable, atomic classes and components.
The Stacks website documents:
Product
- Semantic and accessible component markup
- Cross-browser compatible Less / CSS
- An icon library
<div class="s-prose">
…
</div>
Stacks
Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
Our documentation is built with Stacks itself, using its immutable, atomic classes and components.
The Stacks website documents:
Product
- Semantic and accessible component markup
- Cross-browser compatible Less / CSS
- An icon library
Depending on the context for displaying the prose component, it may be appropriate to size text up to maintain readability.
<div class="s-prose s-prose__md">
…
</div>
Stacks
Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
Our documentation is built with Stacks itself, using its immutable, atomic classes and components.
The Stacks website documents:
Product
- Semantic and accessible component markup
- Cross-browser compatible Less / CSS
- An icon library