Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sadiksunbul/readme-markdown-syntax

🔥 The Best, Complete Guide to Master Markdown Syntax & Create Awesome READMEs
https://github.com/sadiksunbul/readme-markdown-syntax

markdown markdown-editor markdown-language markdown-syntax markdown-tutorials profile-customizations profile-readme readme readme-md readme-profile readme-template

Last synced: about 1 month ago
JSON representation

🔥 The Best, Complete Guide to Master Markdown Syntax & Create Awesome READMEs

Awesome Lists containing this project

README

        

The Complete Guide of
Readme Markdown Syntax

Markdown is a syntax for styling all forms of writing on the GitHub platform.
Mostly, it is just regular text with a few non-alphabetic characters thrown in, like ```git # or * ```

You can use Markdown most places around GitHub:

1. Gists
2. Comments in Issues and Pull Requests
3. Files with the .md or .markdown extension

___

### Headers

```git
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```

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

___

### Font

```git
*Italics*
_This will also be italic_
**Bold text**
__This will also be bold__
***Bold and Italics***
_You **can** combine them_
~~Striked Text~~
***~~Italic, bold, and strikethrough1~~***
```

*Italics*

_This will also be italic_

**Bold Text**

__This will also be bold__

***Bold and Italics***

_You **can** combine them_

~~Striked Text~~

***~~Italic, bold, and strikethrough1~~***
___

### Lists

> Unordered

```git
* Item 1
* Item 2
* Item 1a
* Item 2a
* Item 1b
* Item 2b
```

* Item 1
* Item 2
* Item 1a
* Item 2a
* Item 1b
* Item 2b

OR
`- Item 1`
- Item 1

> Ordered

```git
1. First
2. jhg
1. Second
2. jhg
1. Third
2. jhg
```

1. First
2. jhg
1. Second
2. jhg
1. Third
2. jhg

___

### Links

```git
* [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info")
* https://www.google.com/
*
```

* [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info")
* https://www.google.com/
*

### Link Label
```git
[My GitHub][GitHubLink]
```
[My GitHub][GitHubLink]

You may define your link label anywhere in the document.
```git
e.g. put on bottom:

--------------------------------
[GitHubLink]:https://github.com/darsaveli
```

### Links to the URLs in a repository

```git
[Example document](/example/example.md)
```

[Example document](/example/example.md)

```git
[example](./example)
```

[example](./example)

___

### Inserting Images or Gifs using links

```git
![alt](URL "title")
```

- alt in square bracket indicates the replacement text when the image fails to display (can be omitted)
- parenthesis contains image source
- title in quotes indicates the text to display when the mouse hovers over the image (can be omitted)

Nite: Dropping the image to the readme file will upload it automatically with this syntax;
It's the same as links, but add an exlamation mark (!) before opening square bracket;
Image source can be either a location from the local machine or any valid image URL;

>Example

```git
![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo")
```
![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo")

### Resize images/Gifs
```

```

You can use HTML tags like width="385px", hight="876px", align="center", etc depending what you need. In this case this gif was once uploaded to the repository and the link was taken from there.

Other options to resize:
- `![](https:// link | width=100)`

___

### Linking Image/Gif
To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.

```
[![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/)

```

[![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/)

___

### Tables

```git
|Header1|Header2|Header3|
| --- | --- | --- |
| This | is a | table |
| This | is 2nd | row |
| This | is 3rd | row |
```

|Header1|Header2|Header3|
| --- | --- | --- |
| This | is a | table |
| This | is 2nd | row |
| This | is 3rd | row |

### Align
You may specify alignment like this:
```git
| Align left | Centered | Align right |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
```
| Align left | Centered | Align right |
| :------------ |:---------------:| -----:|
| aaa | bbb | ccc |

p.s. You can use alignment with `

your text

` tags or with `

your text

` tag to align plain text.
___

### CheckBox

```git
* [ ] Checkbox1

* [ ] Checkbox2

* [x] Checkbox selected
```

* [ ] Checkbox1

* [ ] Checkbox2

* [x] Checkbox selected

You may use this syntax in GitHub's issue to check or uncheck the checkbox in real time without having to modify the original version of the issue.

___

### Quoting Text

```git
> This is a block quoted text
```

> This is a block quoted text

### Multi-level blockquotes
```
> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua
```
#### Look like
> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua

* These are fenced code blocks

___

### Text highlighting

```git
`linux` `ubuntu`
```
Using a pair of backquotes is suitable for making tags for articles
`linux` `ubuntu`

___

### Horizontal Line

```git
***
___
---
```

All three will be rendered as:
___
p.s.
```git


works too
```
___

### Break between lines

```git


```
___

### Visible markdown characters

```git
```git
* __
etc ```
```
___

### Multi-line text

aaa,
sss,
ddd!

Add 1 tab or 4 spaces at the beginning of several lines of text.

OR

Use three backticks:

```
asd,
sfd,
wer!
```
This syntax can also be used for code highlighting

___

### Comments in Markdown

```git

```
They will be invisible on readme
___

### Emoji
```git
:grinning: or just place the emoji 😀
```
:grinning: or just place the emoji 😀

To see a list of every image Github supports, check out the [Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md)

___

### Code Block
There are three ways to add code in markdown
1. Inline Code (single backtick)
2. Whitespace

```git
`this` is an example of inline code.
```
four spaces work too!

3. Fenced code blocks
With GFM you can wrap your code with three back quotes to create a code block without the leading spaces. Add annoptional language identifier and your code will get syntax highlighting.

```Java
public static void main(String[]args){} //Java
```

```javascript
document.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javascipt
```

___

### Syntax Highlighting
If language name is mentioned after the end of first set of backticks, the code snippet will be highlighted according to the language.

```js
console.log('javascript')
```

```python
print('python')
```

```java
System.out.println('java')
```

```json
{
"firstName": "A",
"lastName": "B
"age": 18
}
```

```js
console.log('javascript')
```

```python
print('python')
```

```java
System.out.println('java')
```

```json
{
"firstName": "A",
"lastName": "B",
"age": 18
}
```
___

### diff syntax

In the version control system, the function of diff is indispensable, i.e., the addition and deletion of a file content is displayed.
The diff effect that can be displayed in GFM. Green is for new, while red is for deleted.
#### Syntax
The syntax is similar to code [fenced code blocks](#fenced-code-blocks), except that the diff is written after the three backticks.
And in the content, the beginning of `+ ` indicates the addition, and the beginning of `- ` indicates the deletion.

```diff
+ Hello world!
- This is useless.
```

___

### Use YAML: human friendly data serialization language for all programming languages

```yaml
name: Mariam
located_in: ***
from: ***
education: ***
job: ***
company: ***
```
___

### Anchor
In fact, each title is an anchor, similar to the HTML anchor (`#`), e.g.

|Syntax|Look like|
|---|---|
|`[Back to top](#readme)`|[Back to top](#readme)|

Note that all the letters in the title are converted to **lowercase letters**.

___

### Render mathematical expressions in Markdown

You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters).

Writing expressions as blocks
To add math as a multiline block displayed separately from surrounding text, start a new line and delimit the expression with two dollar symbols $$.

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

```git
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
```
## Writing inline expressions
To include a math expression inline with your text, delimit the expression with a dollar symbol $.

This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$

```git
This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$
```

___

### [Markdown posts on GitHub](https://github.blog/changelog/label/markdown/)

___