└── README.md /README.md: -------------------------------------------------------------------------------- 1 |

The Complete Guide of
Readme Markdown Syntax

2 | 3 | Markdown is a syntax for styling all forms of writing on the GitHub platform. 4 | Mostly, it is just regular text with a few non-alphabetic characters thrown in, like ```git # or * ``` 5 | 6 | You can use Markdown most places around GitHub: 7 | 8 | 1. Gists 9 | 2. Comments in Issues and Pull Requests 10 | 3. Files with the .md or .markdown extension 11 | 12 | ___ 13 | 14 | ### Headers 15 | 16 | ```git 17 | # Heading 1 18 | ## Heading 2 19 | ### Heading 3 20 | #### Heading 4 21 | ##### Heading 5 22 | ###### Heading 6 23 | ``` 24 | 25 | # Heading 1 26 | ## Heading 2 27 | ### Heading 3 28 | #### Heading 4 29 | ##### Heading 5 30 | ###### Heading 6 31 | 32 | ___ 33 | 34 | ### Font 35 | 36 | ```git 37 | *Italics* 38 | _This will also be italic_ 39 | **Bold text** 40 | __This will also be bold__ 41 | ***Bold and Italics*** 42 | _You **can** combine them_ 43 | ~~Striked Text~~ 44 | ***~~Italic, bold, and strikethrough1~~*** 45 | ``` 46 | 47 | *Italics*
48 | _This will also be italic_
49 | **Bold Text**
50 | __This will also be bold__
51 | ***Bold and Italics***
52 | _You **can** combine them_
53 | ~~Striked Text~~
54 | ***~~Italic, bold, and strikethrough1~~*** 55 | ___ 56 | 57 | ### Lists 58 | 59 | > Unordered 60 | 61 | ```git 62 | * Item 1 63 | * Item 2 64 | * Item 1a 65 | * Item 2a 66 | * Item 1b 67 | * Item 2b 68 | ``` 69 | 70 | * Item 1 71 | * Item 2 72 | * Item 1a 73 | * Item 2a 74 | * Item 1b 75 | * Item 2b 76 | 77 | OR 78 | `- Item 1` 79 | - Item 1 80 | 81 | > Ordered 82 | 83 | ```git 84 | 1. First 85 | 2. jhg 86 | 1. Second 87 | 2. jhg 88 | 1. Third 89 | 2. jhg 90 | ``` 91 | 92 | 1. First 93 | 2. jhg 94 | 1. Second 95 | 2. jhg 96 | 1. Third 97 | 2. jhg 98 | 99 | ___ 100 | 101 | ### Links 102 | 103 | ```git 104 | * [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info") 105 | * https://www.google.com/ 106 | * 107 | ``` 108 | 109 | * [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info") 110 | * https://www.google.com/ 111 | * 112 | 113 | ### Link Label 114 | ```git 115 | [My GitHub][GitHubLink] 116 | ``` 117 | [My GitHub][GitHubLink] 118 | 119 | You may define your link label anywhere in the document. 120 | ```git 121 | e.g. put on bottom: 122 | 123 | -------------------------------- 124 | [GitHubLink]:https://github.com/darsaveli 125 | ``` 126 | 127 | ### Links to the URLs in a repository 128 | 129 | ```git 130 | [Example document](/example/example.md) 131 | ``` 132 | 133 | [Example document](/example/example.md) 134 | 135 | ```git 136 | [example](./example) 137 | ``` 138 | 139 | [example](./example) 140 | 141 | ___ 142 | 143 | ### Inserting Images or Gifs using links 144 | 145 | ```git 146 | ![alt](URL "title") 147 | ``` 148 | 149 | - alt in square bracket indicates the replacement text when the image fails to display (can be omitted) 150 | - parenthesis contains image source 151 | - title in quotes indicates the text to display when the mouse hovers over the image (can be omitted) 152 | 153 | Nite: Dropping the image to the readme file will upload it automatically with this syntax; 154 | It's the same as links, but add an exlamation mark (!) before opening square bracket; 155 | Image source can be either a location from the local machine or any valid image URL; 156 | 157 | >Example 158 | 159 | ```git 160 | ![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo") 161 | ``` 162 | ![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo") 163 | 164 | ### Resize images/Gifs 165 | ``` 166 | 167 | ``` 168 | 169 | 170 | 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. 171 | 172 | Other options to resize: 173 | - `![](https:// link | width=100)` 174 | 175 | ___ 176 | 177 | ### Linking Image/Gif 178 | To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses. 179 | 180 | ``` 181 | [![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/) 182 | 183 | ``` 184 | 185 | [![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/) 186 | 187 | ___ 188 | 189 | ### Tables 190 | 191 | ```git 192 | |Header1|Header2|Header3| 193 | | --- | --- | --- | 194 | | This | is a | table | 195 | | This | is 2nd | row | 196 | | This | is 3rd | row | 197 | ``` 198 | 199 | |Header1|Header2|Header3| 200 | | --- | --- | --- | 201 | | This | is a | table | 202 | | This | is 2nd | row | 203 | | This | is 3rd | row | 204 | 205 | ### Align 206 | You may specify alignment like this: 207 | ```git 208 | | Align left | Centered | Align right | 209 | | :------------ |:---------------:| -----:| 210 | | col 3 is | some wordy text | $1600 | 211 | ``` 212 | | Align left | Centered | Align right | 213 | | :------------ |:---------------:| -----:| 214 | | aaa | bbb | ccc | 215 | 216 | p.s. You can use alignment with `

your text

` tags or with `

your text

` tag to align plain text. 217 | ___ 218 | 219 | ### CheckBox 220 | 221 | ```git 222 | * [ ] Checkbox1 223 | 224 | * [ ] Checkbox2 225 | 226 | * [x] Checkbox selected 227 | ``` 228 | 229 | 230 | * [ ] Checkbox1 231 | 232 | * [ ] Checkbox2 233 | 234 | * [x] Checkbox selected 235 | 236 | 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. 237 | 238 | ___ 239 | 240 | ### Quoting Text 241 | 242 | ```git 243 | > This is a block quoted text 244 | ``` 245 | 246 | > This is a block quoted text 247 | 248 | ### Multi-level blockquotes 249 | ``` 250 | > Asia 251 | >> China 252 | >>> Beijing 253 | >>>> Haidian 254 | >>>>> Tsinghua 255 | ``` 256 | #### Look like 257 | > Asia 258 | >> China 259 | >>> Beijing 260 | >>>> Haidian 261 | >>>>> Tsinghua 262 | 263 | * These are fenced code blocks 264 | 265 | ___ 266 | 267 | ### Text highlighting 268 | 269 | ```git 270 | `linux` `ubuntu` 271 | ``` 272 | Using a pair of backquotes is suitable for making tags for articles 273 | `linux` `ubuntu` 274 | 275 | ___ 276 | 277 | ### Horizontal Line 278 | 279 | ```git 280 | *** 281 | ___ 282 | --- 283 | ``` 284 | 285 | All three will be rendered as: 286 | ___ 287 | p.s. 288 | ```git 289 |
works too 290 | ``` 291 | ___ 292 | 293 | ### Break between lines 294 | 295 | ```git 296 |
297 | ``` 298 | ___ 299 | 300 | ### Visible markdown characters 301 | 302 | ```git 303 | ```git 304 | * __
etc ``` 305 | ``` 306 | ___ 307 | 308 | ### Multi-line text 309 | 310 | aaa, 311 | sss, 312 | ddd! 313 | 314 | Add 1 tab or 4 spaces at the beginning of several lines of text. 315 | 316 | OR 317 | 318 | Use three backticks: 319 | 320 | ``` 321 | asd, 322 | sfd, 323 | wer! 324 | ``` 325 | This syntax can also be used for code highlighting 326 | 327 | ___ 328 | 329 | ### Comments in Markdown 330 | 331 | ```git 332 | 333 | ``` 334 | They will be invisible on readme 335 | ___ 336 | 337 | ### Emoji 338 | ```git 339 | :grinning: or just place the emoji 😀 340 | ``` 341 | :grinning: or just place the emoji 😀 342 | 343 | 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) 344 | 345 | ___ 346 | 347 | ### Code Block 348 | There are three ways to add code in markdown 349 | 1. Inline Code (single backtick) 350 | 2. Whitespace 351 | 352 | ```git 353 | `this` is an example of inline code. 354 | ``` 355 | four spaces work too! 356 | 357 | 3. Fenced code blocks 358 | 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. 359 | 360 | ```Java 361 | public static void main(String[]args){} //Java 362 | ``` 363 | 364 | ```javascript 365 | document.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javascipt 366 | ``` 367 | 368 | ___ 369 | 370 | ### Syntax Highlighting 371 | If language name is mentioned after the end of first set of backticks, the code snippet will be highlighted according to the language. 372 | 373 | ```js 374 | console.log('javascript') 375 | ``` 376 | 377 | ```python 378 | print('python') 379 | ``` 380 | 381 | ```java 382 | System.out.println('java') 383 | ``` 384 | 385 | ```json 386 | { 387 | "firstName": "A", 388 | "lastName": "B 389 | "age": 18 390 | } 391 | ``` 392 | 393 | ```js 394 | console.log('javascript') 395 | ``` 396 | 397 | ```python 398 | print('python') 399 | ``` 400 | 401 | ```java 402 | System.out.println('java') 403 | ``` 404 | 405 | ```json 406 | { 407 | "firstName": "A", 408 | "lastName": "B", 409 | "age": 18 410 | } 411 | ``` 412 | ___ 413 | 414 | ### diff syntax 415 | 416 | In the version control system, the function of diff is indispensable, i.e., the addition and deletion of a file content is displayed. 417 | The diff effect that can be displayed in GFM. Green is for new, while red is for deleted. 418 | #### Syntax 419 | The syntax is similar to code [fenced code blocks](#fenced-code-blocks), except that the diff is written after the three backticks. 420 | And in the content, the beginning of `+ ` indicates the addition, and the beginning of `- ` indicates the deletion. 421 | 422 | ```diff 423 | + Hello world! 424 | - This is useless. 425 | ``` 426 | 427 | ___ 428 | 429 | ### Use YAML: human friendly data serialization language for all programming languages 430 | 431 | ```yaml 432 | name: Mariam 433 | located_in: *** 434 | from: *** 435 | education: *** 436 | job: *** 437 | company: *** 438 | ``` 439 | ___ 440 | 441 | ### Anchor 442 | In fact, each title is an anchor, similar to the HTML anchor (`#`), e.g. 443 | 444 | |Syntax|Look like| 445 | |---|---| 446 | |`[Back to top](#readme)`|[Back to top](#readme)| 447 | 448 | Note that all the letters in the title are converted to **lowercase letters**. 449 | 450 | ___ 451 | 452 | ### Render mathematical expressions in Markdown 453 | 454 | You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters). 455 | 456 | Writing expressions as blocks 457 | To add math as a multiline block displayed separately from surrounding text, start a new line and delimit the expression with two dollar symbols $$. 458 | 459 | $$\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)$$ 460 | 461 | ```git 462 | $$\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)$$ 463 | ``` 464 | ## Writing inline expressions 465 | To include a math expression inline with your text, delimit the expression with a dollar symbol $. 466 | 467 | This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$ 468 | 469 | ```git 470 | This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$ 471 | ``` 472 | 473 | ___ 474 | 475 | 476 | ### [Markdown posts on GitHub](https://github.blog/changelog/label/markdown/) 477 | 478 | ___ 479 | 480 | --------------------------------------------------------------------------------