How to apply markdown
Welcome once again to the Markdown School. In this session, I will be laying out the guidelines that will aid you as a newbie to get better at markdowns on the Steemit platform. Before we begin, I would like to bring to the awareness of the reader that the following instructions are originally from Adam Pritchard and a markdown cheat sheet on GitHub. All due respect to the original creators. This tutorials will be as brief as possible. Click here to launch the markdown editor.
1. To create a heading, add the sign "#" without the quotes followed to the beginning of the preferred sentence or word.
The number of "#" indicates the level of the heading. increasing the number of "#" creates headings with lower priorities.
Examples:
# level 1
## level 2
### level 3
#### level 4
##### level 5
###### level 6
2. Emphasis on a word or phrase can be laid by surrounding the word or phrase with asterisks or underscores: * asterisks* or _underscores_ . A stronger emphasis requires two asterisks or underscores: **asterisks** or __underscores__ An illustration of combined emphasis: **asterisks and _underscores_**
The Strikethrough effect can be achieved by surrounding the word or phrase with two tildes: ~~Scratch this.~~
3. To create Links, simply follow the pattern below:
[Put label here](put link here). This particular pattern uses the current browser tab to open the link. To make the link open in a new tab when clicked, add {:target="_blank"}
Example:
[Google Website](https://www.google.com)
[Google Website](https://www.google.com){:target="_blank"}
4. For code and syntax highlighting: backticks (``) are used.
Examples:
Inline `code` has `back-ticks around` it.
``` var s = "JavaScript syntax highlighting"; ```
5. You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |.
Example:
First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2
6. To enable blockquotes, use this sign >
Example:
> Blockquotes are very handy in email to emulate reply text.
7. To create a horizontal rule,
use three or more --- (Hyphens), ***(Asterisks), and ___(Underscores)
8. Lists can be created in two ways: an Ordered list and an Unordered list. For ordered lists, add the list items preceded by a number and a fullstop. It should start with the number one, but the rest are not required to follow numerically. Unordered lists, on the other hand, can be created by using a dash(-),a plus sign (+), and an asterisk (*) before the item. Lists can be nested as well.
2. Item 2
3. Item 3
+ Tomatoes
- Mouse
9. To add images to markdown, the pattern below can be followed:
![Image Label](Pathtoimage.extension). The supported extensions are .jpg, .png, .gif, and .svg
Alternatively, the HTML img tag can be used. The img tag is self-closing and does not require an end tag. It can also receive attributes such as width , height, and alt. The src attribute represents the source of the image.
Example : ![my image](https://cdn.logo.com/hotlink-ok/logo-social.png)
<img src="https://cdn.logo.com/hotlink-ok/logo-social.png" width="200px" height ="300px" />
10. To center text or image , the HTML center tag can be used. It has an opening tag and a closing tag. The respective image or text to be center must be captured in-between the two tags.
Example: <center > Hello world </center >
11. To create Tasklists, the pattern below can be emulated
- [x] this is a complete item
- [ ] this is an incomplete item
12. To render Emoji: check out out every emoji supported here.
Examples: :+1: :sparkles: :camel: :tada: :rocket: :metal: :octocat:
More markdown instructions will be added to this space as time progresses. Also, if you know of any markdown guidelines that you would love to share, send them to me on my email.
Examples:
# level 1
## level 2
### level 3
#### level 4
##### level 5
###### level 6
2. Emphasis on a word or phrase can be laid by surrounding the word or phrase with asterisks or underscores: * asterisks* or _underscores_ . A stronger emphasis requires two asterisks or underscores: **asterisks** or __underscores__ An illustration of combined emphasis: **asterisks and _underscores_**
The Strikethrough effect can be achieved by surrounding the word or phrase with two tildes: ~~Scratch this.~~
3. To create Links, simply follow the pattern below:
[Put label here](put link here). This particular pattern uses the current browser tab to open the link. To make the link open in a new tab when clicked, add {:target="_blank"}
Example:
[Google Website](https://www.google.com)
[Google Website](https://www.google.com){:target="_blank"}
4. For code and syntax highlighting: backticks (``) are used.
Examples:
Inline `code` has `back-ticks around` it.
``` var s = "JavaScript syntax highlighting"; ```
5. You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |.
Example:
First Header | Second Header
------------ | -------------
Content cell 1 | Content cell 2
Content column 1 | Content column 2
6. To enable blockquotes, use this sign >
Example:
> Blockquotes are very handy in email to emulate reply text.
7. To create a horizontal rule,
use three or more --- (Hyphens), ***(Asterisks), and ___(Underscores)
8. Lists can be created in two ways: an Ordered list and an Unordered list. For ordered lists, add the list items preceded by a number and a fullstop. It should start with the number one, but the rest are not required to follow numerically. Unordered lists, on the other hand, can be created by using a dash(-),a plus sign (+), and an asterisk (*) before the item. Lists can be nested as well.
ordered
1. Item 12. Item 2
3. Item 3
Unordered
* Laptop+ Tomatoes
- Mouse
9. To add images to markdown, the pattern below can be followed:
![Image Label](Pathtoimage.extension). The supported extensions are .jpg, .png, .gif, and .svg
Alternatively, the HTML img tag can be used. The img tag is self-closing and does not require an end tag. It can also receive attributes such as width , height, and alt. The src attribute represents the source of the image.
Example : ![my image](https://cdn.logo.com/hotlink-ok/logo-social.png)
<img src="https://cdn.logo.com/hotlink-ok/logo-social.png" width="200px" height ="300px" />
10. To center text or image , the HTML center tag can be used. It has an opening tag and a closing tag. The respective image or text to be center must be captured in-between the two tags.
Example: <center > Hello world </center >
11. To create Tasklists, the pattern below can be emulated
- [x] this is a complete item
- [ ] this is an incomplete item
12. To render Emoji: check out out every emoji supported here.
Examples: :+1: :sparkles: :camel: :tada: :rocket: :metal: :octocat:
More markdown instructions will be added to this space as time progresses. Also, if you know of any markdown guidelines that you would love to share, send them to me on my email.