Eiko Wagenknecht
Software Developer, Freelancer & Founder

Markdown Test

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.

Table of Contents

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: ---.


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://eiko-wagenknecht.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 <sup>Text</sup>, <sub>Text</sub> or <u>Text</u>.

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:

Alt text

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

Placeholder
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

  1. This is a list item in a blockquote.
  2. 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: Alt text.

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.

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.

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

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

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.

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

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 1Header 2Header 3
Row 1, Col 1Row 1, Col 2Row 1, Col 3
Row 2, Col 1Row 2, Col 2Row 2, Col 3
Row 3, Col 1Row 3, Col 2Row 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 footnote1.

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:

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

Tip:

Optional information to help a user be more successful.

Important:


Crucial information necessary for users to succeed.

Warning:


Critical content demanding immediate user attention due to potential risks.

Caution:

Negative potential consequences of an action.

They can also be nested:

This is a tip.

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

Note

Abstract

Abstract (“Summary” is an alias)

Abstract (“TLDR” is an alias)

Info

Todo

Tip

Tip (“Hint” is an alias)

Tip (“Important” is an alias)

Success

Success (“Check” is an alias)

Success (“Done” is an alias)

Question

Question (“Help” is an alias)

Question (“FAQ” is an alias)

Warning

Warning (“Caution” is an alias)

Warning (“Attention” is an alias)

Failure

Failure (“Fail” is an alias)

Failure (“Missing” is an alias)

Danger

Danger (“Error” is an alias)

Bug

Example

Quote

Quote (“Cite” is an alias)

Custom titles:

custom title

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

Custom title, missing space

Example callout with a custom title

Custom title, too many spaces

Example callout with a custom title

Foldables:

Foldable callout, extended with custom title

Example callout with a custom title that is also foldable

Nested:

Quote with another callout inside

Nested example

Even more nested note

With 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 with an empty line before the callout

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

This is an unsupported callout type.


This has two empty spaces aftert the callout type.

In comparisan, this is the normal one.

What does this one do?

What does this one do?

stuff in title]

What does this one do?

Emphasis in the title that spans multiple lines

What does this one do?

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

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:

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

  1. 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.