Discover the Markdown syntax used on this blog to write articles, or to generate static pages, and more generally on the web. When you click on the button: Source, you can see the original source code of an article. More precisely on this blog, a superset of Markdown is used and called Kramdown, the syntax is available here. Each following section gives an overview and examples for each usage. But before, what is exactly the Markdown?

Markdown is a lightweight and popular text metalanguage which is a writing standard with extension .md or .markdown. It is often converted into HTML what allows it to be easily shared on the web :spider_web:.

After the conversion to a HTML text, it is decorated and animated by CSS style sheets and/or JS scripts:

Markdown processor
Markdown processor

Why using it Markdown? Because it is very handy to use for the reader and the writer:

  • Reader: The generated HTML content got from the source Markdown content is compatible with all web browsers.
  • Writer: The source Markdown content continue being separated, you can modify the one without interfering with the another one. But in addition, it is easier to create then modify its article, the content is more human-readable and shorter than the HTML.

See how to create your content with the right syntax through examples in the following sections.

Text

Highlight

Enhance your text:

Italics: italics or italics
Bold: bold or bold
Strikethrough: Strikethrough
Bold & Italics: bold italics or bold italics
Inline code: code

Source code:

Italics: *italics* or _italics_  
Bold:	**bold** or __bold__ 
Strikethrough: ~~Strikethrough~~
Bold & Italics: **_bold italics_** or __*bold italics*__
Inline code: `code`

New line & paragraph

Let 2 trailing spaces to have an end of line, and let a empty line for a new paragraph:

Hello,

World!

Source code:

Hello,␣␣\n
\n
World!\n

Note: \n and represent respectively a new line character and a space character.

Headings

Make a part, a subpart and a sub-subpart:

Source code:

# H1
## H2
### H3


H1
======

H2
------

List

Build an ordered list:

  1. item
  2. item
  3. item

Source code:

1. item
2. item
3. item

Build a unordered list:

  • item
  • item
  • item

Source code:

 * item
 * item
 * item

Quote

Talk is cheap. Show me the code.

Linus Torvalds, creator of the Linux operating system

Source code:

> Talk is cheap. Show me the code.

Linus Torvalds, creator of the Linux operating system

Emoticon

Use emoji, with gemoji see emoji cheat sheet.

For example: :smile: :scream: :yum:

Source code:

:smile: :scream: :yum:

It works with absolute and relative link:

  • A simple link:

https://www.google.com

Source code:

<https://www.google.com>

Source code:

[Google](https://www.google.com)
  • A link with a name and a title: Google with title Google's Homepage.

Source code:

[Google](https://www.google.com "Google's Homepage")

You can use shortcut for your links to use that several times on article or to centralize links:

Google1 Google2

Source code:

[Google1][1] [Google2][1]

[1]: https://www.google.com

Notes

Info

INFO

Source code:

<pre class="info">
INFO
</pre>

Question

QUESTION

Source code:

<pre class="question">
QUESTION
</pre>

Warning

WARNING

Source code:

<pre class="warning">
WARNING
</pre>

Error

ERROR

Source code:

<pre class="error">
ERROR
</pre>

Success

SUCCESS

Source code:

<pre class="success">
SUCCESS
</pre>

Comment

If you want to put a hidden text not displayed in the article but present in the written source, that is to say a comment, simply do a HTML comment:

Source code:

<!-- comments -->

Informatics code

Programming language

The used syntax highlighter is Rouge, see the list of supported languages and lexers.

Python

print("Hello world!")

Source code:

~~~ python
print("Hello world!")
~~~

Java

System.out.println("Hello world!");

Source code:

~~~ java 
System.out.println("Hello world!");
~~~

Scala

println("Hello world!")

Source code:

~~~ scala 
println("Hello world!")
~~~

C# .NET

Console.WriteLine("Hello world!")

Source code:

~~~ csharp 
Console.WriteLine("Hello world!")
~~~

Rust

println!("Hello World!");

Source code:

~~~ rust
println!("Hello World!");
~~~

C++

std::cout << "Hello World!";

Source code:

~~~ c++
std::cout << "Hello World!";
~~~

C

printf("Hello, World!");

Source code:

~~~ c 
printf("Hello, World!");
~~~

Bash

echo "Hello world!"

Source code:

~~~ bash 
echo "Hello world!"
~~~

Ruby

puts "Hello world!"

Source code:

~~~ ruby 
puts "Hello world!"
~~~

Go

import("fmt")

fmt.Println("Hello world!")

Source code:

~~~ go
import("fmt")

fmt.Println("Hello world!")
~~~

TypeScript

console.log("Hello world!");

Source code:

~~~ typescript
console.log("Hello world!");
~~~

JavaScript

console.log("Hello world!");

Source code:

~~~ javascript
console.log("Hello world!");
~~~

HTML

<p>Hello world!</p>

Source code:

~~~ html
<p>Hello world</p>
~~~

CSS

.hello-world {
  text-align: center
}

Source code:

~~~ css
.hello-world {
  text-align: center
}
~~~

Terminal

$ command
result

Source code:

~~~ terminal
$ command
result
~~~

Text file

Plain text

"Hello World!"

Source code:

~~~
"Hello World!"
~~~

JSON

{"message": "Hello World!"}

Source code:

~~~ json
{"message": "Hello World!"}
~~~

YAML

hello:
  world: "Hello World!"

Source code:

~~~ yaml
hello:
  world: "Hello World!"
~~~

XML

<?xml version="1.0" encoding="UTF-8"?>
<message>Hello World!</message>

Source code:

~~~ xml

Hello World!
~~~

INI

[message]
message="Hello World!"

Source code:

~~~ ini
[message]
message="Hello World!"
~~~

Mathematics equation

Use LateX syntax, see latex-project.org.

:warning: The dollar symbol $ becomes a meta symbol, there is conflict with dollar symbol use the html code &#36; to see dollar symbol $.

In-line equation

This equation $\int_0^1 x^2dx = \frac{1}{3}$ is in-line.

Source code:

This equation $\int_0^1 x^2dx = \frac{1}{3}$ is in-line.

Single-line equation

This equation is single-line and centered:

\[\int_0^1 x^2dx = \frac{1}{3}\]

Source code:

$$\int_0^1 x^2dx = \frac{1}{3}$$

Multi-line equation

This equation is multi-line and centered:

\[\displaylines{ \int_0^1 x\,dx = \frac{1}{2} \\ \int_0^1 x^2dx = \frac{1}{3} }\]

Source code:

$$
\displaylines{
\int_0^1 x\,dx = \frac{1}{2} \\
\int_0^1 x^2dx = \frac{1}{3} 
}
$$

Creative Commons Attribution 4.0 International License:
Also read
Comments