Markdown Test

2024-06-30 Eiko Wagenknecht

So let’s say you have your brand new blog set up with Astro and Tailwind CSS with the tailwind-typography plugin and now you want to write your first blog post. You know that Astro uses remark for Markdown parsing and tailwind-typography comes with a pretty comprehensive style set, but you want to see for yourself if all the elements you need are styled neatlz. Wouldn’t it be nice to have an equally comprehensive Markdown test file? This article tries to cover as many Markdown elements as possible to see how they are styled. Many elements can be written in different ways, but I will only show one way here. If you want to see everything you can possibly do, you can check out the original Markdown documentation.

Headers
Paragraphs
Line Breaks
Horizontal Rules
Links
Emphasis
Images
Code
Blockquotes
Lists
Miscellaneous
GitHub Flavored Markdown
Obsidian Flavored Markdown
Try it yourself

Headers

Let’s start with what we already used: headers. Headers are defined by a number of # characters at the beginning of a line. The number of # characters determines the level of the header (up to a maximum of 6, but everything above 4 is unstyled and should not be used). This section is a level 2 header, so it starts with ##. The following headers are level 3 headers and start with ### and so on.

Header Level 3

Header Level 4

Header Level 5

Header Level 6

Paragraphs

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. A line containing spaces or tabs is still considered blank.

Line Breaks

If you don’t want to start a new paragraph, but just want to insert a line break, you can end a line with two or more spaces. Like this:
This is a new line after the break.

Horizontal Rules

A horizontal rule is created by placing three or more hyphens, asterisks, or underscores on a line by themselves, like this: ---.

Links

We used them in the table of contents already, but let’s see how they look in a normal paragraph. Links are created by surrounding the link text with square brackets and the URL with parentheses. Here’s an external link to my favorite search engine: Kagi. And here’s a link to a page on this website: Home. You can also just put the URL in angle brackets for a link without text: https://eikowagenknecht.de.

Emphasis

What would a text be without emphasis? You can make text italic by surrounding it with one underscore on each side. You can make text bold by surrounding it with two asterisks on each side. You can also combine them for bold and italic text. For ^superscript, _subscript or underlined text, you have to use the HTML tags Text, Text or Text.

Images

Images are similar to links, but they start with an exclamation mark. The alt text is in square brackets and the URL is in parentheses. You can add a title attribute in quotes after the URL. Here’s an example:

If you want a proper figure with a caption, you can get there with some HTML:

Here is a caption

Code

Code can be included inlined or in blocks. Inline code is surrounded by backticks, like this: console.log("Hello, world!");. Code blocks are created by triple backticks. You can also specify the language for syntax highlighting. Astro uses the excellent Shiki for syntax highlighting if not configured otherwise, so the same languages are supported. Here are some common ones:

JavaScript:

console.log("Hello, world!");

TypeScript:

console.log("Hello, world!");

Python:

print("Hello, world!")

Markdown:

# Hello, world!

JSON:

{
  "hello": "world"
}

HTML:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

CSS:

body {
  background-color: white;
  color: black;
}

Bash:

echo "Hello, world!"

Rust:

fn main() {
    println!("Hello, world!");
}

C++:

#include <iostream>

int main() {
    std::cout << "Hello, world!" << std::endl;
    return 0;
}

Text:

Hello, world!

Blockquotes

Blockquotes are created by placing a > character at the beginning of each line of the blockquote. You can also nest blockquotes.

This is a blockquote.

This is a nested blockquote.

Now we’re back to the first level.

Blockquotes can contain other Markdown elements, like lists, headers, and code blocks:

This is a header in a blockquote

This is a list item in a blockquote.

This is another list item.

Here’s some example code:
console.log("Hello, world!");
And here’s a link: Google.

And some emphasized text: emphasized.

And some strong text: strong.

And some code: console.log("Hello, world!");.

And an image: .

And a horizontal rule

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists. Unordered lists use asterisks, pluses, or hyphens as list markers, though it’s common to only use one of those. I will use the dash here.

This is the first item in an unordered list.
This is the second item.
This is the third item.

Ordered lists use numbers followed by periods. The actual numbers you use don’t matter, Markdown will generate the correct numbers for you. But it’s good practice to use the correct numbers.

This is the first item in an ordered list.
This is the second item.
This is the third item.

If you want a list item to contain multiple paragraphs, you can do so:

This is the first item in an unordered list.
This is a new line started with two spaces at the end of the previous line.

This is the second paragraph in the first item.
This is the second item.

Miscellaneous

You can use -- to create a en-dash like this: This is some text — with an en-dash.

Three dots ... are converted to an ellipsis: Wow …

GitHub Flavored Markdown

GitHub Flavored Markdown (GFM) is a superset of Markdown that adds some features that are useful for GitHub. They have been adopted by many Markdown parsers.

Task Lists

Task lists are lists with checkboxes. They are created by placing square brackets with a space in front of list items. The square brackets are either empty for an unchecked item or contain an x for a checked item.

This is an unchecked task list item.
This is a checked task list item.

These can be wildly combined with other lists, like this:

List item
- Checked sub item
List item 2
1. Numbered checked sub item 2
2. Numbered item 3
List item 3

Strikethrough

Strikethrough text is created by surrounding the text with two tildes. ~~This text is strikethrough.~~

Tables

Tables are created by using pipes | to separate columns and hyphens - to separate the header row from the content rows.

Header 1	Header 2	Header 3
Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2	Row 2, Col 3
Row 3, Col 1	Row 3, Col 2	Row 3, Col 3

Footnotes and References

Footnotes are created by placing a caret ^ followed by the footnote text at the end of the paragraph. The footnote text is placed at the end of the document.

This is a paragraph with a footnote¹.

Callouts / Alerts / Admonitions

GitHub calls them “alerts”, but most people use “admonitions” or “callouts”. Whatever the name, those boxes highlight important information, warnings, or tips. They are styled differently from the rest of the text. They are created by placing a > character in front of the callout type and text. This is what they look like:

Note:

Note

Highlights information that users should take into account, even when skimming.

Tip:

Tip

Optional information to help a user be more successful.

Important:

Important

Crucial information necessary for users to succeed.

Warning:

Warning

Critical content demanding immediate user attention due to potential risks.

Caution:

Caution

Negative potential consequences of an action.

They can also be nested:

Tip

This is a tip.

Warning

This is a warning inside a tip.

Obsidian Flavored Markdown

Obsidian is a popular note-taking app that uses Markdown for its notes. It uses it’s own flavor of Markdown that adds some features.

Text Formatting

Text can be formatted with == for highlight, like this:

==This text is highlighted.==

LaTeX

You can use LaTeX math formulas in Obsidian. They are surrounded by dollar signs $ for inline formulas and double dollar signs $$ for centered formulas.

Inline formula: $\frac{\sqrt{k}}{A \cdot B}$

Centered formula: $$\frac{\sqrt{k}}{A \cdot B}$$

Mermaid Diagrams

Obsidian supports Mermaid diagrams, like this one:

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

Wikilinks

Wikilinks are links to other notes are done with double square brackets [[wikilink]].

Like this: [[Digital Garden with Obsidian and Astro]]

Or one that doesn’t exist yet: [[This is a new page]]

They can have custom titles: [[Digital Garden with Obsidian and Astro|This is the title]]

They can link to a specific heading: [[Digital Garden with Obsidian and Astro#Wikilinks]]

Block References

IDs are just text after a caret ^ that can be referenced in links.

Here’s one for you: ^39fa63

Block references are links to blocks within a note. They are done with double square brackets and a caret [[note^id]].

Like this: [[Digital Garden with Obsidian and Astro#^39fa63]]

Embeddings

You can embed files with ![[file]].

This can be an image: ![[assets/images/placeholder-150x150.svg]]

Or it can be a block from another note: ![[Digital Garden with Obsidian and Astro#^39fa63]]

It can even be a whole note: ![[Digital Garden with Obsidian and Astro]]

Callouts

Obsidian uses a callout syntax, that is a bit different from the one used by GitHub. Editor > Strict line breaks should be set in Obsidian to resemble normal markdown behavior.

Let’s start with a non-callout:

Quote Line 1 Quote Line 2 Quote Line 3

Now all the Obsidian callout types:

Note

Abstract

Summary

Abstract (“Summary” is an alias)

Tldr

Abstract (“TLDR” is an alias)

Info

Todo

Tip

Hint

Tip (“Hint” is an alias)

Important

Tip (“Important” is an alias)

Success

Check

Success (“Check” is an alias)

Done

Success (“Done” is an alias)

Question

Help

Question (“Help” is an alias)

Faq

Question (“FAQ” is an alias)

Warning

Caution

Warning (“Caution” is an alias)

Attention

Warning (“Attention” is an alias)

Failure

Fail

Failure (“Fail” is an alias)

Missing

Failure (“Missing” is an alias)

Danger

Error

Danger (“Error” is an alias)

Bug

Example

Quote

Cite

Quote (“Cite” is an alias)

Without title:

This is a warning without a title!

Custom titles:

custom title

Example callout with a custom title. The “custom title” should be lower case

[!quote]Custom title, missing space This should not be rendered as a callout

Foldables:

Foldable callout with custom title, initially expanded

Example callout with a custom title that is also foldable

Foldable callout with custom title, initially collapsed

Example callout with a custom title that is also foldable

Nested:

Quote

Quote with another callout inside

Example

Nested example

Note

Even more nested note

Quote

Example

Nested example in an otherwise empty callout

Elements in the title:

Callout with code, emphasis and a formula in the title: $\frac{\sqrt{k}}{A \cdot B}$

Callout content with more code and another formula: $\frac{\sqrt{k}}{A \cdot B}$

## Heading 2 in a callout

Callout content

Edge cases:

Note

Note with an empty line before the callout, this is not a callout!

Some text [!hint] This is no callout. The first line contains some other text.

Something

This is an unsupported callout type, should fall back to hint style.

Hint

This has two empty spaces (=new paragraph) after the callout type.

Hint

In comparison, this is the normal one.

Type with spaces

Types with spaces should be fine as well.

Type with special ! : - _ or even html ” < > & ’ characters

Even special characters should be rendered properly.

[!TYPE|Crazy ]stuff in title] This one should be broken (=renderes as quote) though.

Emphasis in the title that spans multiple lines

Obsidian breaks after the “that” and does thus prints the stars verbatim.

More crazy stuff in title ! [123] [[Link]] : - _ or even html ” < > & ’

This should all be rendered.

[!] This is no callout when it has no type.

Special Checkboxes

The minimal theme adds some special checkboxes with it’s own symbols:

to-do
[/] incomplete
done
[-] canceled
[>] forwarded
[<] scheduling
[?] question
[!] important
[*] star
[”] quote
[l] location
[b] bookmark
[i] information
[S] savings
[I] idea
[p] pros
[c] cons
[f] fire
[k] key
[w] win
[u] up
[d] down

Comment

Text can be commented out with %% comment %%. You should not see this: %% comment %%

Try it yourself

You can download this file here and try it out yourself.

Footnotes

This is the footnote text. ↩

No Comments? No Problem.

This blog doesn't support comments, but your thoughts and questions are always welcome. Reach out through the contact details in the footer below.

Markdown Test

Table of Contents

Headers

Header Level 3

Header Level 4

Header Level 5

Header Level 6

Paragraphs

Line Breaks

Horizontal Rules

Links

Emphasis

Images

Code

Blockquotes

This is a header in a blockquote

Lists

Miscellaneous

GitHub Flavored Markdown

Task Lists

Strikethrough

Tables

Footnotes and References

Callouts / Alerts / Admonitions

Obsidian Flavored Markdown

Text Formatting

LaTeX

Mermaid Diagrams

Wikilinks

Block References

Embeddings

Callouts

Special Checkboxes

Comment

Try it yourself

Footnotes