Complete Guideline “The use of Markdown”

M.A Foyez
6 min readJan 23, 2022

--

Assalamu Alaikum,

After a long time, I appeared in front of you with a new blog. Today I will talk about git markdown in front of you. Many of us are familiar with Git Markdown. Also for those who work with GitHub but have never worked with Markdown. This blog is only for those who are new to GitHub or are in the early stages of software development like me.

About Markdown

Markdown is a technique that will help you write faster, better, and more efficiently. From HTML, note-taking apps, to-do list apps, and email, Markdown has made its ‘mark’ pretty much everywhere.

Intrigued? Let’s not waste any more time chit-chatting and get straight into the amazing world of Markdown.

Markdown can be defined as a plain text formatting syntax used to write content on the web. It’s commonly used by writers and programmers to write quickly without having to take time using the formatting toolbar of text editors.

Why do we need as a developer ***

Markdown is very important to us as a developer. Suppose you created a public repository on GitHub. Now a user wants to give a complete guideline on how to use that repository. This can be done very easily using Markdown language. This means that you can easily add step-by-step rules for running the project starting from cloning the repository. So that anyone who sees your repository can run that project without any hassle.

Let’s start ***

Markdown supports most HTML code, but it is best practice to use Markdown’s own syntax. Markdown language is basically working with .md extension. This means that the file we create will have the extension .md

Below is a markdown output so that those of you who are new can understand before you learn it. GitHub Link

Yes, that’s the magic of Markdown 😲😲

Where do you write markdown documents? Open the README.md file in your repository. If you use a code editor other than Visual Studio, I would suggest you to use vs code editor. Use an extension in VS code (Extension Link) for markdown preview. So that you do not have to repeatedly check with the git. This will save you a lot of time.

When you install this extension, it will helps more to saving your times

Some important markdown lists that we can use all the time

  • How to make a command
  • Heading
  • Normal text & New line
  • Horizental rule
  • Italic & Bold
  • Strikethrough
  • Inline code block
  • Multiple line code block
  • List (Ordered list & Unordered list)
  • Link (Direct link & Link with some title)
  • Image & Emoji
  • Table

Command

<!--This is command tag--> 

Heading

Here we use # for heading tag in markdown language. We know that there are 6 heading tags in HTML, Markdown also follow this, we use # for heading tag h1, we use ## for heading tag h2, same as like #### for heading tag h4

# Heading tag 1  
## Heading tag 2
### Heading tag 3
#### Heading tag 4
##### Heading tag 5
###### Heading tag 6

Normal Text & New Line

Markdown allows plain text & paragraph tag of HTML as normal text.

MarkDown file in three way to Break a Line.

<br /> Tag Using

\ Using

space keypress two times Using

For Example

Normal Text
This is normal line
<p>This is normal line</p>
Line Break
paragraph First Line <br /> Second Line
or
First Line sentence \
Second Line sentence

Horizental Rule

To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves.

***

---

Italic & Bold

To emphasize text with bold and italics at the same time, add three asterisks or underscores before and after a word or phrase. To bold and italicize the middle of a word for emphasis, add three asterisks without spaces around the letters.

_This is italic tag in markdown_**This is bold tag in markdown****_This is italic & bold text at a time_**.

Blockquotes

To create a blockquote, add a > in front of a paragraph.

> Use this symble to use blockquotes in any text 

Inline Code Block

To denote a word or phrase as code, enclose it in backticks (`).

`This is inline code example`

Multiple Line Code Block***

If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (```).

```
function myFunction(p1, p2) {
return p1 * p2;
}
```

Noted: Follow the rules below to format the code with specific language.

```javascript  //here javascript is a language name, you can use    your spacific language what you want to formate  function myFunction(p1, p2) {
return p1 * p2;
}
```
```css
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
```

Ordered List

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered List

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

- First item
- Second item
- Third item
- Fourth item

Nested Ordered List

- List item-1
- list item-1.1
- list item-1.1.1
- list item-1.1.2
- list item-1.2
- list item-1.3
- List item-2
- List item-3
- List item-4
- List item-5

Task***

To create task list, use [x] to disple complete task & use [ ] to understand that is’s incomplete task

- [x] Task -1 <!--This is completed task-->
- [x] Task -2
- [ ] Task -3 <!--This is incomplete task-->
- [x] Task -4
Complete & Incomplete task example

Image***

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.

![alt text](image source) //Image Syntax ![profile](./image/Screenshot_1.png) //you can use local image or![profile](https://github.com/ma-foyez/git-markdown/raw/master/image/Screenshot_1.png) //you can use direct image url

If you want to set height & width to this image, then this syntax do not work properly. You should use HTML image tag <img src=`` alt=`` />

<img src="./image/Screenshot_1.png" height="300" width="220" />

Table

To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.

 | Name | Roll | Registration | Email
| ----- | ------ | ------- | -------- |
| Irfan | 123156 | 858694 | irfan@gmail.com |
| Abraul| 565626 | 785659 | abraul.ctg@gmail.com |
| Morshed | 562656596 | 858694 | morshed.alam@gmail.com |
| Fayez | 565626 | 785659 | mafoyez.bd@gmail.com |
//table column will be automatic formated after add data

Emoji

There are two ways to add emoji to Markdown files: copy and paste the emoji into your Markdown-formatted text, or type emoji shortcodes.

Some Markdown applications allow you to insert emoji by typing emoji shortcodes. These begin and end with a colon and include the name of an emoji.

Syntax:

:emoji shortcodes:

- :computer: I enjoy too much learning new tech up to day.
  1. Direct Emoji List
  2. Short Codes Emoji

--

--

M.A Foyez
M.A Foyez

No responses yet