Typography
This page contains various markdown blocks for testing typographic rendering
Contents
This page is used to test out colour schemes of various elements
Paragraphs #
Any line of text with a space above and below becomes a paragraph.
These two lines don’t have a space so they are merged together.
These two lines are not merged together
because they contain an explicit line break.
This is a large amount of text that will render as a paragraph and despite what you might imagine will happen, there will be no magical line breaks or anything else that will save you from this extremely long run-off sentence so your only hope is that I will run out of text to type.
Headings #
This is an H1 #
This is an H2 #
This is an H3 #
This is an H4 #
This is an H5 #
This is an H6 #
Typography #
This is a paragraph with some regular text.
This is a paragraph
with a forced line break.
Markdown Tags #
This is a paragraph with some bold text.
This is a paragraph with some italic text.
This is a paragraph with some bold and italic text.
This is a paragraph with some strikethrough text.
This is a paragraph with some italic strikethrough text.
This is a paragraph with some bold strikethrough text.
This is a pagagraph with some inline code text.
HTML Tags #
This is a paragraph with some subscript text.
This is a paragraph with some superscript text.
This is a paragraph with some underlined text.
This is a paragraph with some strikethrough text.
This is a paragraph with some deleted text.
This is a paragraph telling you to press CTRL + ALT + DELETE.
This is a paragraph with some marked text.
This is a paragraph with some inline code text.
Line Breaks #
Here is a Markdown line break
Here is an HTML line break
Blockquotes #
This is regular text.
This is a regular blockquote.
This is also regular text.
This is something that someone might have once said
— Some Person
Someone once said
This is a nested blockquote
and everyone present gasped
This is an HTML blockquote— Some Person
Code Blocks #
Tip
A list of valid language identifiers can be found here.
Here is some JSON that is indented with two spaces:
{
"nice": true
}
Here is a bash script:
#!/usr/bin/env bash
echo "something"
Here is some Python that is intended with 4 spaces:
with open("file.txt", "w") as file:
if something:
file.write(data)
Code Blocks with Shiki Notation #
Here are some extensions provided by Shiki
Diffing #
function blah(name) {
console.log("Hello")
console.log(`Hello ${name}`)
}
Line Highlighting #
function blah(name) {
console.log(`Hello ${name}`)
}
Focus #
function blah(name) {
console.log(`Hello ${name}`)
}
Error levels #
function blah(name) {
console.warn("Hello")
console.error("Goodbye")
}
Line Highlighting - Native #
function blah(name) {
console.warn("Hello")
console.error("Goodbye")
}
Word Highlighting - Native #
function blah(name) {
console.warn("Hello World!")
}
Links #
This is a paragraph containing a link using Markdown syntax.
This is a paragraph containing a link using HTML syntax.
Images #
This is an image rendered using Markdown syntax:
This is an image rendered using Markdown syntax, with a title:
This is an image rendered using HTML syntax:
This is an image rendered using HTML syntax, and a trailing figcaption:
Embedded Media #
Video #
Audio #
iFrames #
Lists #
This is an unordered list:
- Item 1
- Item 2
- Item 3
This is an ordered list:
- Item 1
- Item 2
- Item 3
This is a nested list:
- Item 1
- Subitem 1
- Subitem 2
- Item 2
- Subitem 1
- Subitem 1
- Subitem 1
This is a task list:
- Do this
- Do this as well
- Finally, do this
This is a definition list:
- Loch Ness Monster
- A large, mythical water creature.
- Internet
- A place for storing junk information
Footnotes #
Here is a some text with a footnote containing more information.1
Comments #
You are able to see this
Escaping #
Using a backslash means that *this text* is not bolded.
Tables #
| Name | Notes | Setting |
|---|---|---|
| Blah | Neat | Yes |
| Bleh | Rude | No |
Callouts (Github Syntax) #
Note
Useful information that users should know, even when skimming content.
Tip
Helpful advice for doing things better or more easily.
Important
Key information users need to know to achieve their goal.
Warning
Urgent info that needs immediate user attention to avoid problems.
Caution
Advises about risks or negative outcomes of certain actions.
Caution
Here is a multi-line alert
- It can contain a list
- With many items
- Even subitems
- and tasks
Redactions #
This heading contains some ████████ text
This sentence contains █████████████████ text that is hidden. It should ███ be ████████████████ readable.
██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-
Here is some more information. ↩︎