Prose

The prose component provides proper styling for rendered Markdown.

Classes

Class Output
.s-prose Adds proper styling for rendered Markdown.
.s-prose__md Increases the base font size and line height.

Examples

Full Markdown spec

<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 ('`').
  • Block code formatting
System.out.println("Hello World!");
System.out.println("Code Block!");

Tyler Durden is Luke Skywalker’s father.

Keyser Söze was dead the whole time.

Tyler Durden is Luke Skywalker’s father.

image of unicorn
How about some scrollbars? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas sed tempus urna et. Est sit amet facilisis magna etiam tempor orci eu. Pretium viverra suspendisse potenti nullam ac tortor. Consectetur a erat nam at lectus urna duis convallis convallis. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Integer quis auctor elit sed. In tellus integer feugiat scelerisque. Blandit volutpat maecenas volutpat blandit. Sed nisi lacus sed viverra tellus in. Arcu non odio euismod lacinia at quis risus. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Nibh praesent tristique magna sit amet purus gravida quis blandit. Massa vitae tortor condimentum lacinia.
Non consectetur a erat nam. Neque vitae tempus quam pellentesque nec nam aliquam sem. Tellus orci ac auctor augue mauris augue neque gravida in. Vitae suscipit tellus mauris a diam. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Eget duis at tellus at urna condimentum mattis. Cras pulvinar mattis nunc sed blandit libero volutpat. Diam volutpat commodo sed egestas. Lorem ipsum dolor sit amet consectetur adipiscing elit. Natoque penatibus et magnis dis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu.
Non blandit massa enim nec dui. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Enim ut sem viverra aliquet eget sit amet tellus. Non nisi est sit amet facilisis magna etiam tempor. Convallis posuere morbi leo urna. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sit amet massa vitae tortor condimentum lacinia. Ullamcorper eget nulla facilisi etiam dignissim diam. Integer quis auctor elit sed vulputate mi sit amet. Purus faucibus ornare suspendisse sed. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Cras fermentum odio eu feugiat pretium nibh ipsum. Id nibh tortor id aliquet lectus. Ut morbi tincidunt augue interdum. Tristique risus nec feugiat in fermentum posuere. Aliquam faucibus purus in massa tempor nec feugiat. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Enim sit amet venenatis urna cursus eget. Dui id ornare arcu odio.
Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Etiam sit amet nisl purus in mollis nunc sed id. Turpis massa tincidunt dui ut ornare lectus. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Praesent tristique magna sit amet. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Nulla facilisi etiam dignissim diam quis enim lobortis. Eleifend mi in nulla posuere. Turpis egestas pretium aenean pharetra magna ac. Commodo nulla facilisi nullam vehicula ipsum. Habitant morbi tristique senectus et. Morbi tristique senectus et netus. At urna condimentum mattis pellentesque id nibh tortor id.
Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. A cras semper auctor neque vitae. Lorem dolor sed viverra ipsum nunc aliquet. Morbi quis commodo odio aenean sed adipiscing diam donec. Dolor sit amet consectetur adipiscing elit ut. Sit amet tellus cras adipiscing enim eu turpis. Duis ut diam quam nulla porttitor. Et malesuada fames ac turpis egestas integer. Faucibus et molestie ac feugiat. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. In vitae turpis massa sed elementum. Gravida arcu ac tortor dignissim convallis. Suscipit tellus mauris a diam maecenas sed enim ut. Quam elementum pulvinar etiam non quam lacus. Leo vel orci porta non pulvinar. In hendrerit gravida rutrum quisque non. Vivamus arcu felis bibendum ut tristique. Ac turpis egestas maecenas pharetra. Id aliquet lectus proin nibh nisl condimentum id. Amet volutpat consequat mauris nunc congue nisi.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas sed tempus urna et. Est sit amet facilisis magna etiam tempor orci eu. Pretium viverra suspendisse potenti nullam ac tortor. Consectetur a erat nam at lectus urna duis convallis convallis. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Integer quis auctor elit sed. In tellus integer feugiat scelerisque. Blandit volutpat maecenas volutpat blandit. Sed nisi lacus sed viverra tellus in. Arcu non odio euismod lacinia at quis risus. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Nibh praesent tristique magna sit amet purus gravida quis blandit. Massa vitae tortor condimentum lacinia.
Non consectetur a erat nam. Neque vitae tempus quam pellentesque nec nam aliquam sem. Tellus orci ac auctor augue mauris augue neque gravida in. Vitae suscipit tellus mauris a diam. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Eget duis at tellus at urna condimentum mattis. Cras pulvinar mattis nunc sed blandit libero volutpat. Diam volutpat commodo sed egestas. Lorem ipsum dolor sit amet consectetur adipiscing elit. Natoque penatibus et magnis dis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu.
Non blandit massa enim nec dui. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Enim ut sem viverra aliquet eget sit amet tellus. Non nisi est sit amet facilisis magna etiam tempor. Convallis posuere morbi leo urna. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sit amet massa vitae tortor condimentum lacinia. Ullamcorper eget nulla facilisi etiam dignissim diam. Integer quis auctor elit sed vulputate mi sit amet. Purus faucibus ornare suspendisse sed. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Cras fermentum odio eu feugiat pretium nibh ipsum. Id nibh tortor id aliquet lectus. Ut morbi tincidunt augue interdum. Tristique risus nec feugiat in fermentum posuere. Aliquam faucibus purus in massa tempor nec feugiat. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Enim sit amet venenatis urna cursus eget. Dui id ornare arcu odio.
Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Etiam sit amet nisl purus in mollis nunc sed id. Turpis massa tincidunt dui ut ornare lectus. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Praesent tristique magna sit amet. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Nulla facilisi etiam dignissim diam quis enim lobortis. Eleifend mi in nulla posuere. Turpis egestas pretium aenean pharetra magna ac. Commodo nulla facilisi nullam vehicula ipsum. Habitant morbi tristique senectus et. Morbi tristique senectus et netus. At urna condimentum mattis pellentesque id nibh tortor id.
Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. A cras semper auctor neque vitae. Lorem dolor sed viverra ipsum nunc aliquet. Morbi quis commodo odio aenean sed adipiscing diam donec. Dolor sit amet consectetur adipiscing elit ut. Sit amet tellus cras adipiscing enim eu turpis. Duis ut diam quam nulla porttitor. Et malesuada fames ac turpis egestas integer. Faucibus et molestie ac feugiat. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. In vitae turpis massa sed elementum. Gravida arcu ac tortor dignissim convallis. Suscipit tellus mauris a diam maecenas sed enim ut. Quam elementum pulvinar etiam non quam lacus. Leo vel orci porta non pulvinar. In hendrerit gravida rutrum quisque non. Vivamus arcu felis bibendum ut tristique. Ac turpis egestas maecenas pharetra. Id aliquet lectus proin nibh nisl condimentum id. Amet volutpat consequat mauris nunc congue nisi.

Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas sed tempus urna et. Est sit amet facilisis magna etiam tempor orci eu. Pretium viverra suspendisse potenti nullam ac tortor. Consectetur a erat nam at lectus urna duis convallis convallis. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Integer quis auctor elit sed. In tellus integer feugiat scelerisque. Blandit volutpat maecenas volutpat blandit. Sed nisi lacus sed viverra tellus in. Arcu non odio euismod lacinia at quis risus. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Nibh praesent tristique magna sit amet purus gravida quis blandit. Massa vitae tortor condimentum lacinia.
Non consectetur a erat nam. Neque vitae tempus quam pellentesque nec nam aliquam sem. Tellus orci ac auctor augue mauris augue neque gravida in. Vitae suscipit tellus mauris a diam. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Eget duis at tellus at urna condimentum mattis. Cras pulvinar mattis nunc sed blandit libero volutpat. Diam volutpat commodo sed egestas. Lorem ipsum dolor sit amet consectetur adipiscing elit. Natoque penatibus et magnis dis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu.
Non blandit massa enim nec dui. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Enim ut sem viverra aliquet eget sit amet tellus. Non nisi est sit amet facilisis magna etiam tempor. Convallis posuere morbi leo urna. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sit amet massa vitae tortor condimentum lacinia. Ullamcorper eget nulla facilisi etiam dignissim diam. Integer quis auctor elit sed vulputate mi sit amet. Purus faucibus ornare suspendisse sed. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Cras fermentum odio eu feugiat pretium nibh ipsum. Id nibh tortor id aliquet lectus. Ut morbi tincidunt augue interdum. Tristique risus nec feugiat in fermentum posuere. Aliquam faucibus purus in massa tempor nec feugiat. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Enim sit amet venenatis urna cursus eget. Dui id ornare arcu odio.
Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Etiam sit amet nisl purus in mollis nunc sed id. Turpis massa tincidunt dui ut ornare lectus. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Praesent tristique magna sit amet. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Nulla facilisi etiam dignissim diam quis enim lobortis. Eleifend mi in nulla posuere. Turpis egestas pretium aenean pharetra magna ac. Commodo nulla facilisi nullam vehicula ipsum. Habitant morbi tristique senectus et. Morbi tristique senectus et netus. At urna condimentum mattis pellentesque id nibh tortor id.
Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. A cras semper auctor neque vitae. Lorem dolor sed viverra ipsum nunc aliquet. Morbi quis commodo odio aenean sed adipiscing diam donec. Dolor sit amet consectetur adipiscing elit ut. Sit amet tellus cras adipiscing enim eu turpis. Duis ut diam quam nulla porttitor. Et malesuada fames ac turpis egestas integer. Faucibus et molestie ac feugiat. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. In vitae turpis massa sed elementum. Gravida arcu ac tortor dignissim convallis. Suscipit tellus mauris a diam maecenas sed enim ut. Quam elementum pulvinar etiam non quam lacus. Leo vel orci porta non pulvinar. In hendrerit gravida rutrum quisque non. Vivamus arcu felis bibendum ut tristique. Ac turpis egestas maecenas pharetra. Id aliquet lectus proin nibh nisl condimentum id. Amet volutpat consequat mauris nunc congue nisi.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas sed tempus urna et. Est sit amet facilisis magna etiam tempor orci eu. Pretium viverra suspendisse potenti nullam ac tortor. Consectetur a erat nam at lectus urna duis convallis convallis. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Integer quis auctor elit sed. In tellus integer feugiat scelerisque. Blandit volutpat maecenas volutpat blandit. Sed nisi lacus sed viverra tellus in. Arcu non odio euismod lacinia at quis risus. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Nibh praesent tristique magna sit amet purus gravida quis blandit. Massa vitae tortor condimentum lacinia.
Non consectetur a erat nam. Neque vitae tempus quam pellentesque nec nam aliquam sem. Tellus orci ac auctor augue mauris augue neque gravida in. Vitae suscipit tellus mauris a diam. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Eget duis at tellus at urna condimentum mattis. Cras pulvinar mattis nunc sed blandit libero volutpat. Diam volutpat commodo sed egestas. Lorem ipsum dolor sit amet consectetur adipiscing elit. Natoque penatibus et magnis dis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu.
Non blandit massa enim nec dui. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Enim ut sem viverra aliquet eget sit amet tellus. Non nisi est sit amet facilisis magna etiam tempor. Convallis posuere morbi leo urna. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sit amet massa vitae tortor condimentum lacinia. Ullamcorper eget nulla facilisi etiam dignissim diam. Integer quis auctor elit sed vulputate mi sit amet. Purus faucibus ornare suspendisse sed. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Cras fermentum odio eu feugiat pretium nibh ipsum. Id nibh tortor id aliquet lectus. Ut morbi tincidunt augue interdum. Tristique risus nec feugiat in fermentum posuere. Aliquam faucibus purus in massa tempor nec feugiat. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Enim sit amet venenatis urna cursus eget. Dui id ornare arcu odio.
Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Etiam sit amet nisl purus in mollis nunc sed id. Turpis massa tincidunt dui ut ornare lectus. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Praesent tristique magna sit amet. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Nulla facilisi etiam dignissim diam quis enim lobortis. Eleifend mi in nulla posuere. Turpis egestas pretium aenean pharetra magna ac. Commodo nulla facilisi nullam vehicula ipsum. Habitant morbi tristique senectus et. Morbi tristique senectus et netus. At urna condimentum mattis pellentesque id nibh tortor id.
Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. A cras semper auctor neque vitae. Lorem dolor sed viverra ipsum nunc aliquet. Morbi quis commodo odio aenean sed adipiscing diam donec. Dolor sit amet consectetur adipiscing elit ut. Sit amet tellus cras adipiscing enim eu turpis. Duis ut diam quam nulla porttitor. Et malesuada fames ac turpis egestas integer. Faucibus et molestie ac feugiat. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. In vitae turpis massa sed elementum. Gravida arcu ac tortor dignissim convallis. Suscipit tellus mauris a diam maecenas sed enim ut. Quam elementum pulvinar etiam non quam lacus. Leo vel orci porta non pulvinar. In hendrerit gravida rutrum quisque non. Vivamus arcu felis bibendum ut tristique. Ac turpis egestas maecenas pharetra. Id aliquet lectus proin nibh nisl condimentum id. Amet volutpat consequat mauris nunc congue nisi.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Porta lorem mollis aliquam ut porttitor leo. Et malesuada fames ac turpis egestas. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Nec ultrices dui sapien eget mi proin sed libero enim. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra. Id semper risus in hendrerit. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Neque viverra justo nec ultrices dui sapien eget mi.
Velit dignissim sodales ut eu sem integer. Netus et malesuada fames ac turpis egestas sed tempus. Odio ut enim blandit volutpat maecenas volutpat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Facilisis sed odio morbi quis commodo odio. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Auctor augue mauris augue neque gravida in. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Ultrices in iaculis nunc sed augue lacus viverra vitae. Lectus urna duis convallis convallis tellus id interdum velit. Sit amet dictum sit amet justo donec enim diam vulputate. Velit laoreet id donec ultrices tincidunt arcu non sodales. Metus dictum at tempor commodo. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Integer vitae justo eget magna fermentum iaculis eu. Facilisis volutpat est velit egestas dui id ornare. Rhoncus urna neque viverra justo nec ultrices dui.
  • 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

Images

  • Inline images, similar to links but with leading !:
    • A normal image
      An image of a unicorn
    • An image with a tooltip
      An image of a unicorn
    • Escaped image so as to not render the actual image
      ![An image of a unicorn](https://i.stack.imgur.com/7I1jg.jpg (Unicorn!))
  • Reference images:
    • image of a unicorn
  • Image links - surround an image with a link. An image of a unicorn
  • 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!

    image of a 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
  1. Ordered Lists
    1. One
    2. Two
    3. Three
  • Multiple lines within list items: indent 4 spaces, or do we need to?
  1. Same line Continuation of the same line
  2. Next line Not indented
  3. Next line Continuation of the same line
  • Nested lists: indent 4 spaces.
  1. Top level
    • Mid level
      1. Bottom level
    • Mid level
      • Bottom level
  2. Top level
    1. Mid level
      • Bottom level
  • Code within list items: indention requires blank line then 4 additional spaces beyond list indention level.
  1. Top level

    System.out.println("Code fence");
    

    Inline: System.out.println("Inline");

  • Blockquote within list items: blank line then indent 4 spaces.
  1. Top level

    Quote is indented.

Markdown Escapes

\ ` * _ { } [ ] ( ) # + - . !

Tables

Syntax Description Whatever Whatever Whatever Whatever
Header Title What Title What What
Paragraph Text Ever Text Ever What

Strikethrough

Incorrect

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 then title

    Meta Stack Exchange

  • <b> or <strong>: no attributes

    Bold and Strong

  • <blockquote>: no attributes

    To be or not to be, that is the question.
  • <br>: no attributes

    You can
    break to
    the next line.

  • <del> or <strike>: no attributes

    That'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 attributes

    Emphasis and Italic

  • <h1>, <h2>, and <h3>: no attributes

    Header One

    Header Two

    Header Three

    Header Four

    Header Five
    Header Six
  • <hr>: no attributes


  • <img>: src then width then height then alt then title

    image of unicorn
    • Specifying one of width or height scales the image; must specify both to change the aspect ratio. They can't be px and they max out at 999.

      • Animated gifs are supported

  • <kbd>: no attributes

    abcdefghijklmnopqrstuvwxyz!@#$%^&*()-_=+`~[{]}|;:'",<.>/?0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ

    • Nested <kbd> elements are allowed.

      OuterNested

  • <ol> or <ul> with <li>: <ol> can have start

    <ol><li>First</li><li>Second</li></ol> <ul><li>Something</li><li>Else</li></ul>
    
    1. First
    2. Second
    • Something
    • Else
    • Start at desired number up to 231 - 1.

      <ol start="2147483647"><li>First</li></ol>
      
      1. 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 attributes

    x<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&lt;String, Object&gt;
    

    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̶̩̯̱̜͆̌̾͌̑̇̊͒̃̀̽̍̚é̴̜̉̇̿̈́͌̕.̸̢̱͔̲̫̇͌̽̌͂͊͊̈́̇

Example answer

The following is a real-world answer taken from Stack Overflow

Executive Summary

$ git push -d <remote_name> <branch_name>
$ git branch -d <branch_name>

Note that in most cases the remote name is origin. In such a case you'll have to use the command like so.

$ git push -d origin <branch_name>

Delete Local Branch

To delete the local branch use one of the following:

$ git branch -d branch_name
$ git branch -D branch_name

Note: The -d option is an alias for --delete, which only deletes the branch if it has already been fully merged in its upstream branch. You could also use -D, which is an alias for --delete --force, which deletes the branch "irrespective of its merged status." [Source: man git-branch]

Delete Remote Branch

As of Git v1.7.0, you can delete a remote branch using

$ git push <remote_name> --delete <branch_name>

which might be easier to remember than

$ git push <remote_name> :<branch_name>

which was added in Git v1.5.0 "to delete a remote branch or a tag."

Starting on Git v2.8.0 you can also use git push with the -d option as an alias for --delete.

Therefore, the version of Git you have installed will dictate whether you need to use the easier or harder syntax.

Delete Remote Branch

From Chapter 3 of Pro Git by Scott Chacon:

Deleting Remote Branches

Suppose you’re done with a remote branch — say, you and your collaborators are finished with a feature and have merged it into your remote’s master branch (or whatever branch your stable code-line is in). You can delete a remote branch using the rather obtuse syntax git push [remotename] :[branch]. If you want to delete your server-fix branch from the server, you run the following:

$ git push origin :serverfix
To git@github.com:schacon/simplegit.git
 - [deleted]         serverfix

Boom. No more branches on your server. You may want to dog-ear this page, because you’ll need that command, and you’ll likely forget the syntax. A way to remember this command is by recalling the git push [remotename] [localbranch]:[remotebranch] syntax that we went over a bit earlier. If you leave off the [localbranch] portion, then you’re basically saying, “Take nothing on my side and make it be [remotebranch].”

I issued git push origin: bugfix and it worked beautifully. Scott Chacon was right—I will want to dog ear that page (or virtually dog ear by answering this on Stack Overflow).

Then you should execute this on other machines

# Fetch changes from all remotes and locally delete 
# remote deleted branches/tags etc
# --prune will do the job :-;
git fetch --all --prune

to propagate changes.

Example meta post

The following is a real-world post taken from Meta Stack Overflow

Today we’re announcing that the new moderator agreement is live and the existing moderators are being asked to accept it. This has been a great collaboration to get from a draft in November 2019 to the final agreement in July 2020. It’s gone through several phases of review internally, including with the Community Leadership Team, the Community Management Team, our Legal department, and we have had the assistance of our Public Platform team to build in some tooling to support a sixty-day transition period between the old and new agreements.

In addition to that, this has been reviewed on the Moderator Team which led to over 35 answers and at least five additional questions to dig deeper into specific concerns, and help get the moderators and Stack Exchange, Inc. on the same page. We spent time coming to understand those concerns and discussing how to best address them and that’s represented in this new document. In the two months since that last review, text has been adjusted, some points have been removed, and others have been added to bring this document to where it is now.

For easier reference, I’m going to be calling the two agreements “V1” (the old agreement) and “V2” (the new agreement). You can review the difference between them by looking at the version pages for the agreement. The current page /legal/moderator-agreement on any site (here's Stack Overflow's) will now host the most-recent version of the agreement, currently V2. But specific versions can be viewed by adding the URL /legal/moderator-agreement/versions/[number]. So, right now you could replace [number] with 1 or 2 to see V1 and V2.

With 550+ moderators, I can be sure that some of the mods may not be as comfortable with the new agreement as with the old. This agreement has grown considerably to cover much more than it once did. Some of the new elements are site policies that didn’t exist at the time, such as the Code of Conduct, while others are privacy rules that didn’t exist, like GDPR. These changes were long overdue to keep the agreement current and clear.

While we still have a bucket for “other policies”, the policies that fall into this category will now be linked together through a Help Center article and, in the case where they’re MSE posts, a tag ([tag:mod-agreement-policy]). This is designed to keep the scope of this point limited while also giving us the flexibility to add small network-relevant policies that we need moderators to follow without having to update the mod agreement. Any policies that will be added to this list must be released to the moderators for review so that they are aware of them in advance.

In V2 we’ve added a point about accepting guidance from Community Team members and the Senior Leadership Team. While we do our best to make policy clear, there are times where it will require some interpretation. Because of their experience in developing and working with that policy, these staff members know or have the context to better explain the intent so that moderators can better interpret what that policy is expecting of them - and, thus, what users are expecting.

When users join our sites, they expect us to protect their privacy and the PII we collect about them is a big part of that. We grant moderators access to some of this information so that they can do their work, but we take it very seriously when this access is misused. That’s why the biggest part of V1 is still an important part of V2 - it’s designed to protect our users’ private information and prevent misuse by making our expectations for usage of PII clear.

This section has been adjusted slightly but, overall, it’s largely the same. For example, to allow collaboration between mods on the same site - as was pointed out during discussion with the mods, V1 (and an earlier draft of V2) was overly restrictive of who a moderator could disclose PII to:

I will not disclose this information to anyone,

This would prevent the mods from even talking about it in a private room with co-moderators or even mentioning it to staff in a CM escalation, so the agreement has been updated to state,

I will not disclose or share this information with anyone that is not a moderator or employee of Stack Exchange, Inc.

While we must retain the ability to remove moderators at any time for legal reasons, we have added specific statements that we will use one of the three moderator removal processes whenever possible and that all moderators have the option to appeal all terminations through the newly-updated reinstatement and appeal process.

Whenever possible, moderator removal will follow Stack Exchange, Inc.’s moderator removal processes. I will be informed via written communication of the specific reason that I have been terminated. I have the option to appeal termination through the moderator reinstatement and appeal process.

I predict that some of y’all will ask why we need to say “whenever possible” - and I understand that. Because we can’t predict all future events, there may come times when we need to remove a moderator or can not follow one of the three processes for some reason - for example, if we attempt to communicate about an issue with a mod and they refuse to take part. This is not intended to be an excuse to never use them but an admission that, however unlikely, we legally need to retain the full right to remove someone outside of these processes. Committing to make it clear why a moderator was removed regardless of how it happens is a big improvement from the existing agreement and, along with the appeal process, should help any mods removed without a process to feel they have a recourse.

The biggest change to this agreement is that we’ve added a section that makes the agreement two-way. The old agreement, and even early drafts of V2, made no guarantees for the moderators. This is something that we felt was important to add. In it, we explicitly grant them the protection of policies like the Press Policy, and codify that they have the freedom to speak out publicly about policies without reprisal (provided the CoC is followed) and that we will support the moderators whenever they have questions or need assistance.

As I noted, V2 is significantly longer than V1 so I’m not going into perfect detail here but please feel free to review it. We hope you feel, as we do, that this is a reasonable update to the original agreement.


For those of you who are interested in the behind-the scenes stuff, I thought I’d talk through how the versioning works. Starting today moderators have sixty days to accept V2 or decline it and request to step down. They can review the agreement by visiting /legal/moderator-agreement on any site, though they will need to visit it on the site/s they moderate to accept it. They will also need to accept it once per site they moderate but do not need to accept it on both main and meta any more.

During this period, existing moderators can continue to moderate under V1 before they’ve accepted the new agreement. This is designed to give them time to consider this decision and because we know that many people are busy with life in a very complicated world right now. They can also continue to moderate even if they’ve declined the new agreement; while we hope that everyone can accept the new agreement, we understand that there may be some who can not and we want to make sure we have time to make sure a site has sufficient coverage if one of its mods doesn’t accept.

If a moderator is newly-elected during the interim period or after, they will only have the new agreement to accept and it will act like accepting the old agreement - access to PII and many other mod tools will be withheld until the agreement is accepted. The reasoning here is that the new mods must have accepted an agreement to have access and we are not making the old agreement available for them, even during the interim. If a newly-elected moderator does not want to accept the new agreement, the CMs will reach out to them and the other moderators on their site.

The CMs will be checking in with the accept/decline status on a regular basis and will start working with mod teams during the interim period. Removing diamonds will be done manually, so it will happen gradually as we review the responses. Once the sixty days have passed, any moderator who has either declined the new agreement or hasn’t responded to the notifications to accept the new agreement but who still has their diamond will lose access to PII and some moderator tools. We will be very sensitive to moderator coverage on sites. We don’t want to leave sites with insufficient or no moderators to support them so if someone from a moderation team decides to decline the agreement, we will reach out to them and the rest of the team to determine if an election is necessary.

We do have the option to extend the deadline if it seems like the 60-day cutoff will leave sites unmoderated. If this happens, the extension will apply to all sites, not only the ones that need more time.


A huge amount of work has gone into this agreement and I’d like to thank all of the people who helped shepherd it through the process, both my coworkers and within the moderator community. Your expertise helped make this document what it is today and - particularly to the mods - I hope you feel like this agreement is an improvement over the old one.

If anyone has questions about the agreement itself or the rollout, please post them as an answer.

Sizing

Medium

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