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:
- Gists
- Comments in Issues and Pull Requests
- Files with the .md or .markdown extension
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
*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
You can combine them
Bold and Italics
Striked Text
Italic, bold, and strikethrough1
Unordered
* 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
1. First
2. jhg
1. Second
2. jhg
1. Third
2. jhg
- First
- jhg
- Second
- jhg
- Third
- jhg
* [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info")
* https://www.google.com/
* <https://www.google.com/>
[My GitHub][GitHubLink]
You may define your link label anywhere in the document.
e.g. put on bottom:
--------------------------------
[GitHubLink]:https://github.com/darsaveli
[Example document](/example/example.md)
[example](./example)
- 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
<img src="https://github.com/darsaveli/Mariam/blob/main/1479814528_webarebears.gif" width="385px" align="center">
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:
To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.
[](https://github.com/)
|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 |
You may specify alignment like this:
| 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 <h1 (or 2 etc.) align="center"> your text </h1> tags or with <p align="center"> your text</p> tag to align plain text.
* [ ] Checkbox1
* [ ] Checkbox2
* [x] Checkbox selected
-
Checkbox1
-
Checkbox2
-
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.
> This is a block quoted text
This is a block quoted text
> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua
Asia
China
Beijing
Haidian
Tsinghua
- These are fenced code blocks
`linux` `ubuntu`
Using a pair of backquotes is suitable for making tags for articles
linux ubuntu
***
___
---
All three will be rendered as:
p.s.
<hr> works too
<br>
```git
* __ <br> etc ```
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
<!-- comment written in markdown -->
They will be invisible on readme
:grinning: or just place the emoji 😀
😀 or just place the emoji 😀
To see a list of every image Github supports, check out the Emoji Cheat Sheet
There are three ways to add code in markdown
- Inline Code (single backtick)
- Whitespace
`this` is an example of inline code.
four spaces work too!
- 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.
public static void main(String[]args){} //Javadocument.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javasciptIf 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
}
```
console.log('javascript')print('python')System.out.println('java'){
"firstName": "A",
"lastName": "B",
"age": 18
}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.
The syntax is similar to code 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.
+ Hello world!
- This is useless.name: Mariam
located_in: ***
from: ***
education: ***
job: ***
company: ***In fact, each title is an anchor, similar to the HTML anchor (#), e.g.
| Syntax | Look like |
|---|---|
[Back to top](#readme) |
Back to top |
Note that all the letters in the title are converted to lowercase letters.