Markdown¶

Intro¶

What is markdown?¶

Markdown is a simple and lightweight markup language used to format text on the web. It uses plain text and simple syntax to indicate how text should be formatted, such as using asterisks or underscores to add emphasis, or using hash symbols to create headings. Markdown documents can be easily converted to HTML or other formats using a parser, and they can be read and edited using any text editor. Markdown is popular among developers, writers, and bloggers for its ease of use and flexibility.

Who uses markdown?¶

Markdown is used in many places on the web, including:

Documentation and Readme files on GitHub, Bitbucket, and other code sharing platforms.
Education and research within markdown cells in Jupyter notebooks.
Blogging platforms like WordPress, Ghost, and Jekyll.
Online forums like Reddit and Stack Exchange.
Writing and note-taking applications like Evernote and Bear.
Chat applications like Discord and Slack.
Presentations using tools like remark and reveal.js.
Email clients like Gmail and Outlook.

Markdown is a popular and versatile markup language used by developers, writers, and content creators all over the world. In fact this web page is written in markdown! Its simplicity and flexibility make it a great choice for creating content for the web. In this tutorial, we will learn how to write markdown.

How does it work?¶

Markdown is a simple markup language that uses plain text to format text with basic syntax. Markdown documents are typically saved with a .md or .markdown file extension.

When you write text in markdown, you use special characters to indicate how the text should be formatted. For example, you can use the # symbol to create headings, or use asterisks or underscores to add emphasis or create lists.

Markdown is then converted to HTML or other formats by a parser. This parser reads the markdown code and converts it to HTML using a set of rules defined by the markdown specification. The resulting HTML can then be rendered by a web browser or other application.

The advantage of using markdown is that it allows you to write content quickly and easily without having to worry about formatting or styling. It's also highly portable, since markdown documents can be read and edited using any text editor.

Headings¶

To create headings, use the hash # symbol. The number of hash symbols indicates the level of the heading. For example, to create a level one heading, use one hash symbol # at the beginning of the line. For a level two heading, use two hash symbols ## and so on.

Markdown HTML

# Level One Heading
## Level Two Heading
### Level Three Heading

Markdown translates to HTML. This is the HTML equivalent of the markdown on the prior tab.

<h1>Level One Heading</h1>
<h2>Level Two Heading</h2>
<h3>Level Three Heading</h3>

When you preview or publish the markdown, the above code will be rendered as:

Level One Heading

Level Two Heading

Level Three Heading

Paragraphs¶

The recommended way to make paragraphs is to create a new line by pressing the Enter or Enter twice. For example:

This is the first line.

This is the second line.

In the above example, we pressed the enter/return key twice to create a new line. When you preview or publish the markdown, the above code will be rendered as:

This is the first line.
This is the second line.

Emphasis¶

To add emphasis to text, use asterisks * or underscores _. To italicize text, add one asterisk or underscore before and after the text. To make text bold, add two asterisks or underscores before and after the text.

Italics¶

We italicize text by wrapping it with a single asterisks * or underscores _.

Markdown HTML

*Italic Text*

_Italic Text_

In markdown line breaks are implied by the double line breaks (empty line between the text-lines).

Markdown translates to HTML. This is the HTML equivalent of the markdown on the prior tab.

<i>Italic Text</i>
<br>
<em>Italic Text</em>

We add the <br> line break in HTML because in markdown line breaks are implied by the double line breaks (empty line between the text-lines).

When you preview or publish the markdown, the above code will be rendered as:

Italic Text
Italic Text

Bold¶

We make text bold by wrapping it with a double asterisks ** or underscores __.

Markdown HTML

**Bold Text**

__Bold Text__

In markdown line breaks are implied by the double line breaks (empty line between the lines).

Markdown translates to HTML. This is the HTML equivalent of the markdown on the prior tab.

<b>Bold Text</b>
<br>
<strong>Bold Text</strong>

We add the <br> line break in HTML because in markdown line breaks are implied by the double line breaks (empty line between the text-lines).

When you preview or publish the markdown, the above code will be rendered as:

Bold Text
Bold Text

Lists¶

To create an unordered list, use asterisks *, dashes -, or plus signs + before each list item. To create an ordered list, use numbers followed by a period . before each item.

Markdown HTML

* Item One
* Item Two
* Item Three

1. Item One
2. Item Two
3. Item Three

Markdown translates to HTML. This is the HTML equivalent of the markdown in the prior tab.

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
<br>
<ol>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ol>

When you preview or publish the markdown, the above code will be rendered as:

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Links¶

To create a link, use square brackets [] around the text you want to turn into a link, followed by the URL in parentheses ().

Markdown HTML

[Grader Than Website](https://www.graderthan.com/)

Markdown translates to HTML. This is the HTML equivalent of the markdown in the prior tab.

<a href="https://www.graderthan.com/">Grader Than Website</a>

When you preview or publish the markdown, the above code will be rendered as:

Grader Than Website

Images¶

To add an image, use an exclamation mark !, followed by square brackets [] around the alt text, and then the URL of the image in parentheses ().

Markdown HTML

![Happy face](https://docs.graderthan.com/images/tutorial/ideas/markdown/happy.png)

Markdown translates to HTML. This is the HTML equivalent of the markdown in the prior tab.

<img src="https://docs.graderthan.com/images/tutorial/ideas/markdown/happy.png" alt="Happy face">

When you preview or publish the markdown, the above code will be rendered as:

Code¶

To add inline code, use backticks ` around the code. To add a code block, start with three backticks on a new line, add the code, and end with three backticks ``` on a new line.

Inline Markdown code block

The for loop `for i in range(10)` creates a python loop that runs 10 times.

When you preview or publish the markdown, the above code will be rendered as:

The for loop for i in range(10) creates a python loop that runs 10 times.

Multiline Markdown code block

Below is an example of how we may count to 10 in C/C++

```c
for(int i = 1; i <= 10; i++){
    cout << i << endl;
}
```

Notice we add the letter c after the first three backticks, most markdown parsers will use this to understand how to apply the appropriate code syntax highlighting to the code block. You can replace this with the file extension or short name of your preferred language, For example py for python, java for Java, or rs for Rust. When you preview or publish the markdown, the above code will be rendered as:

Below is an example of how we may count to 10 in C/C++

for(int i = 1; i <= 10; i++){
    cout << i << endl;
}

Horizontal Rule¶

To add a horizontal rule, use three or more asterisks ***, dashes ---, or underscores ___ on a new line.

Markdown HTML

Section 1

***

Section 2

---

Section 3

___

Markdown translates to HTML. This is the HTML equivalent of the Markdown in the prior tab.

Section 1
<hr>
Section 2
<hr>
Section 3
<hr>

When you preview or publish the markdown, the above code will be rendered as:

Section 1

Section 2

Section 3

HTML¶

Markdown is designed to be a simple and lightweight markup language, and it's not intended to replace HTML. However, you can use HTML within markdown documents to add more complex formatting or functionality.

To use HTML in markdown, simply include the HTML code within the markdown document. For example, if you want to add an image with a specific width and height, you can use the HTML <img> tag with the width and height attributes, like this:

Here is an image with custom dimensions:

<img src="https://docs.graderthan.com/images/tutorial/ideas/markdown/dog.png" width="100" height="100">

When you preview or publish the markdown document, the HTML code will be rendered as an image with the specified dimensions. Below is the result of the code above:

Here is an image with custom dimensions:

It's important to note that not all HTML tags and attributes are supported by all markdown parsers, so you may want to check the documentation for your specific markdown parser or platform to see what HTML is supported. Additionally, using too much HTML can make your markdown documents more difficult to read and maintain, so it's generally best to use HTML sparingly and only when necessary.