---
title: Typography
description: This page contains various markdown blocks for testing typographic rendering
slug: typography
lastmod: 2026-08-02
---
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](https://gohugo.io/content-management/syntax-highlighting/#languages).
Here is some JSON that is indented with two spaces:
```json
{
"nice": true
}
```
Here is a bash script:
```bash
#!/usr/bin/env bash
echo "something"
```
Here is some Python that is intended with 4 spaces:
```python
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
```js
function blah(name) {
console.log("Hello") // [!code --]
console.log(`Hello ${name}`) // [!code ++]
}
```
### Line Highlighting
```js
function blah(name) {
console.log(`Hello ${name}`) // [!code highlight]
}
```
### Focus
```js
function blah(name) {
console.log(`Hello ${name}`) // [!code focus]
}
```
### Error levels
```js
function blah(name) {
console.warn("Hello") // [!code warning]
console.error("Goodbye") // [!code error]
}
```
### Line Highlighting - Native
```js {2,3}
function blah(name) {
console.warn("Hello")
console.error("Goodbye")
}
```
### Word Highlighting - Native
```js /Hello/
function blah(name) {
console.warn("Hello World!")
}
```
## Links
This is a paragraph containing a [link](https://example.com) 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`:
You can see the source image here
## Embedded Media
### Video
### Audio
### iFrames
## Lists
This is an unordered list:
- Item 1
- Item 2
- Item 3
This is an ordered list:
1. Item 1
2. Item 2
3. Item 3
This is a nested list:
- Item 1
- Subitem 1
- Subitem 2
- Item 2
- Subitem 1
- Subitem 1
This is a task list:
- [ ] Do this
- [x] 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
> - [x] and tasks
[^1]: Here is some more information.
## Redactions
This heading contains some {{< redaction length="8" >}} text
This sentence contains {{}} text that is hidden. It should {{}} be {{}} readable.
{{< redaction text="This entire sentence has found itself redacted! In a real redaction, this text would be rotated so that it is exactly the same length as the original sentence but obfuscated from the reader." >}}
{{< redaction length="158" >}}
This is an image rendered using HTML syntax, and a trailing `figcaption`: