Post Exemple

Welcome to the beautiful world of Markdown and MDX. Markdown is a lightweight markup language with a plain text formatting syntax. It is regularly used to format message online, including on Discord.

Right now, you could either be on the website reading this post, or reading directly from its corresponding markdown file.

Let’s starts with some basics!

Paragraphs are separated by a blank line.

Two lines of text without a blank line in between are part of the same paragraph. Single line breaks are only used to make the markdown more readable and will not be displayed.

You can force a line break with two spaces at the end of the line.
I just did, and so this line will be displayed as a new line.

You can achieve the same thing with a backslash at the end.
This line should also be displayed as a new line.

Multiple line breaks in the markdown file are not displayed. There was a bunch of them right now and you saw nothing… spooky. (unless you’re reading the markdown file directly)

If you ACTUALLY want to add blank lines, you can use <br /> tags.

I’m a lonely line…

Anyway, let’s move on to the cool stuff!

You can have headings, aka titles.

1.This is a title for a section of this post

1.1.This is the title for a subsection

1.1.1.You can go really deep

1.1.1.1.You probably should never go this deep

1.1.1.1.1.You’re reached rock bottom

Anyway, headings are used to structure the post. Let’s use one right now to start a new section.

2.Inline elements

Bold is quite nice, isn’t it? Actually you can do bold with two underscores or two asterisks. There is also italic: same thing, you can use an underscore or an asterisk.

There is also strikethrough, which can be done with two tildes or a single tilde.

Finally, you can mix them together: here, a bold italic word.

Underline is achieve with HTML tags, same with highlighted text.

Backticks are used to display inline code.

You can anotate a word such as GIF (hover the word to see the tooltip).

You can also use subscripts (i.e. H₂O) and superscripts (i.e. Xⁿ + Yⁿ = Zⁿ).

If you express keyboard inputs with the <kbd> tag: CTRL + A to select all.

Double dashes—like these—are automatically converted to en-dashes.

Here’s a simple sentence with a footnote ¹.

3.Lists

You can use unordered lists with *, + or - to create a list item.

• Item 1
• Item 2
• Item 3

You can also use ordered lists with numbers.

1. Item 1
2. Item 2
3. Item 3

You can also nest lists.

• Item 1
  • Subitem 1
  • Subitem 2
• Item 2
• Item 3

And even combine unordered and ordered lists.

1. Item 1
   • Subitem 1
   • Subitem 2
2. Item 2
3. Item 3

Pretty wild!

Does checklist work?

• Item 1
• Item 2
• Item 3

Hurray! They do work.

4.Blocks

4.1.Code blocks

You can use blocks to display code blocks.

A block code block
    unlike paragraphs
        preserves whitespace

Typically these are used for sharing bits of code. Here’s an example:

const a = 1;
const b = 2;
const c = a + b;
console.log(c); // 3

You can specify the programming language of the code block next to the opening backticks. The provided language will be used for syntax highlighting. Here’s different languages:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

print("Hello, World!")

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

body {
  background-color: #f0f0f0;
}

Long lines of code don’t get wrapped to the next line:

public static void main(String[] args) {
    Time start = new Time(8, 12, 15);
    Time stop = new Time(12, 34, 55);
    Time diff;
 
    // call difference method
    diff = difference(start, stop);
 
    System.out.printf("TIME DIFFERENCE: %d:%d:%d - %d:%d:%d = %d:%d:%d\n", start.hours, start.minutes, start.seconds, stop.hours, stop.minutes, stop.seconds, diff.hours, diff.minutes, diff.seconds);
}

4.1.1.Titles and captions

You can set a title :

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

You can also set some caption:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

4.1.2.Line numbers

You can display the line numbers

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

You can also set the starting line number:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

4.1.3.Highlighting

You can set the range of lines to highlight:

async function highlightCode(code: string) {
  const file = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypePrettyCode, {
      keepBackground: false,
    })
    .use(rehypeStringify)
    .process(code);
 
  return String(file);
}

And you can set them as insertions or deletions:

async function highlightCode(code: string) {
  const file = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypePrettyCode, {
      keepBackground: false,
    })
    .use(rehypeStringify)
    .process(code);
 
  return String(file);
}

You can set words to highlight:

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

And just like lines, you can set them as insertions or deletions:

blockquote {
  margin-leftinline: unset;
  background-color: var(--foreground-5-transparent);
}

4.1.4.Inline code

Let’s consider the following code:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Maybe you want to talk about a section of this code and you want proper highlighting with inline code.

You can use the {:java} to specify the language of the code. Here, public class HelloWorld is properly highlighted. However, it doesn’t work if there isn’t enought context.

For example, main is not highlighted correctly because it’s impossible to know what “main” refers to without context. You can provide the context by using the {:.entity.name.function} meta string. Now, main is properly highlighted.

We can do the same with args, HelloWorld, or public. To find more of these meta string, you can check node_modules/@shikijs/themes/dist/dark-plus.mjs.

4.2.Blockquotes

You can use blockquotes to display quotes.

This is a blockquote

Here’s another one. You can write a lot of things here.
It can be multiple lines, and you can use other markdown elements like bold, italic, strikethrough.

They can have multiple paragraphs.

They can even have code blocks.

const a = 1;

And god knows what else. Maybe more blockquotes?

This is a nested blockquote

This is a doubly nested blockquote

Alright enought with blockquotes.

4.3.Callouts

4.3.1.Types

You can set the callout’s type with the [!type] syntax. This will affect the callout’s icon and color. The colors only works on browsers that support color-mix which is supported by all major browsers since May 2023.

4.3.2.Collapsible

You can have callouts collapsible

5.Links

• Internal link: Home
• External link: Astro (should have rel=“nofollow”)
• Anchor link: Go back to Blocks
• Anchor with custom text when hovered: Hover me
• Automatic link: https://astro.build/

6.Images

The alternative text is required.

You can also have a caption which by default is the alternative text.

You can also have a caption with a custom text.

7.Tables

You can use tables to display data.

You can align the columns to the left, right, or center.

8.Others

You can have horizontal rules.

They can be used to separate sections of a post.