Markdown Guide: Learn Markdown Syntax and Features
Markdown is a lightweight markup language that makes it easy to format plain text for web publishing. For instance, instead of learning complex HTML tags like <b> for bold text or <a> for links, you can use simple symbols like ** for bold or [text](url) for links. This simplicity speeds up writing and keeps your content readable, even without rendering.
It's widely used in documentation, blogging, and even coding environments. This guide will help you understand the basics and get started with Markdown.
Why Use Markdown?
Simplicity: Write content with minimal formatting syntax.
Portability: Works across multiple platforms and tools.
Readability: Even without rendering, Markdown documents are easy to read.
Basic Syntax
Here are some common Markdown elements:
Headings
Use # symbols to define headings. The number of # symbols corresponds to the heading level:
# Heading 1
## Heading 2
### Heading 3
Blockquotes
Single line blockquote:
Quotes are cool.
Emphasis
Add emphasis using asterisks or underscores:
Italic:*text*or_text_
Bold:**text**or__text__
Bold and Italic:***text***
### Details Tag (collapsible sections)
The HTML <details> tag works well with Markdown and allows you to include collapsible sections, see W3Schools for more information on how to use the tag.
Collapsed by default
This section was collapsed by default!
The source code:
<details>
<summary>Collapsed by default</summary>
This section was collapsed by default!
</details>
Or, you can leave a section open by default by including the open attribute in the tag:
Open by default
This section is open by default thanks to open in the <details open> tag!
Emphasize Tag
The emphasize tag should italicize text.
Insert Tag
This tag should denote inserted text.
Keyboard Tag
This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.
Preformatted Tag
This tag styles large blocks of code.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
Strike Tag
This tag will let you strikeout text.
Strong Tag
This tag shows bold text.
Subscript Tag
Getting our science styling on with H2O, which should push the "2" down.
Superscript Tag
Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up.
Lists
Unordered List:
Use -, *, or +:
- Item 1
- Item 2
Unordered Lists (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
* List item one
* List item one
* List item one
* List item two
* List item three
* List item four
* List item two
* List item three
* List item four
* List item two
* List item three
* List item four
Ordered List: Use numbers:
1. First item
2. Second item
Ordered List (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
1. List item one
1. List item one
1. List item one
2. List item two
3. List item three
4. List item four
2. List item two
3. List item three
4. List item four
2. List item two
3. List item three
4. List item four
Links
Create hyperlinks using brackets and parentheses:
[OpenAI](https://openai.com)
Images
Embed images with similar syntax as links, but add an exclamation mark ! at the start. For example:
Rendered, the above code displays:
Code Blocks
Inline Code: Use backticks:`code`
Block Code: Use triple backticks:
def hello_world():
print("Hello, world!")
Advanced Features
Markdown also supports advanced features like tables, task lists, and footnotes. For example:
Table 1
| Entry | Item | |
|---|---|---|
| John Doe | 2016 | Description of the item in the list |
| Jane Doe | 2019 | Description of the item in the list |
| Doe Doe | 2022 | Description of the item in the list |
| Entry | Item | |
| -------- | ------ | ------------------------------------------------------------ |
| [John Doe](#) | 2016 | Description of the item in the list |
| [Jane Doe](#) | 2019 | Description of the item in the list |
| [Doe Doe](#) | 2022 | Description of the item in the list |
Table 2
| Name | Class | Grade |
|---|---|---|
| Alice | Math | A |
| Bob | Science | B |
| Charlie | History | A |
| David | Math | C |
| Eva | Science | B |
| Name | Class | Grade |
|:----------|:---------:|------:|
| Alice | Math | A |
| Bob | Science | B |
| Charlie | History | A |
| David | Math | C |
| Eva | Science | B |
Task Lists
- [x] Complete Markdown guide
- [ ] Publish the blog post
- [x] Complete Markdown guide
- [ ] Publish the blog post
Footnotes
Footnotes can be useful for clarifying points in the text, or citing information.1 Markdown support numeric footnotes, as well as text as long as the values are unique.2
This is the regular text.[^1] This is more regular text.[^note]
[^1]: This is the footnote itself.
[^note]: This is another footnote.
Conclusion
Markdown is an essential tool for anyone working in web development, technical writing, or content creation. Its simplicity and versatility make it a favorite among professionals and hobbyists alike.
Ready to dive in? Start by trying out some basic Markdown syntax today! Here's a quick exercise:
Write a small paragraph about your favorite hobby using Markdown. Include:
- A heading for the title of your hobby.
- A short description with some italic and bold text.
- A list of reasons why you enjoy it.
- A link to a resource where others can learn more.
You can also explore tools like Dillinger or Typora to make the experience even smoother.
Learn more about Markdown and start creating your own documents today!
Additional Resources
Markdown Guide - An extensive resource for learning all things Markdown.
CommonMark - A widely-used Markdown specification.
GitHub Flavored Markdown (GFM) - Learn about GitHub’s Markdown version and its extensions.
W3Schools - HTML Details Tag - Learn how to use the<details>tag with Markdown.
Dillinger - A cloud-enabled, mobile-ready, offline-storage, AngularJS-powered, HTML5 Markdown editor.
Typora - A minimal Markdown editor that provides a seamless live preview.
Footnotes
The footnotes in the page will be returned following this line, return to the section on Markdown Footnotes.
Such as this footnote. ↩
When using text for footnotes markers, no spaces are permitted in the name. ↩