├── src └── example.md ├── LICENSE └── README.md /src/example.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Shavinda Dizz / Nova 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 | Markdown Syntax Guide
5 | Beginner to Expert 6 |

7 | 8 | ☙◦❦♖ 9 | ![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white) 10 | ♖❦◦❧ 11 | 12 |
13 | 14 | **Markdown is a simple text formatting tool, widely used on platforms such as GitHub, GitLab, and Bitbucket. In repositories, the readme.md file serves as a file descriptor, offering essential project details.** 15 | 16 | It’s commonly applied in Gists, comments, and files with .md or .markdown extensions. Markdown is also popular for content writing on websites and blogs, as well as for creating documentation and installation guides within project directories. 17 | 18 | ## Contents 19 | 20 | 1. [Headings](#1--headings) 21 | - H1 to H6 tags 22 | 2. [Text styles](#2--text-styles) 23 | - Bold ○ Italic ○ Strikethrough ○ Underlined ○ Subscript ○ Superscript ○ and more.. 24 | 3. [Lists](#3--lists) 25 | - Ordered ○ Unordered ○ 26 | 4. [Links](#4--links) 27 | - Auto link ○ Link Label ○ Hover ○ Repository Links ○ Footnote ○ and more.. 28 | 5. [Images](#5--images) 29 | - Basic tags ○ Image Embed element ○ GIF ○ Icons ○ Image with click action ○ 30 | 6. [Alignments](#6--alignments) 31 | - Text Alignments ○ Image Alignments ○ 32 | 7. [Code Block](#7--code-block) 33 | - Basic styles ○ Fenced code blocks ○ Diff Code block ○ 34 | 8. [Text Decoration](#8--text-decoration) 35 | - Text Highlighting ○ Emoji ○ Blockquotes ○ Multi-line text ○ Anchor ○ Spaces ○ and more.. 36 | 9. [Line Settings](#9--line-settings) 37 | - Horizontal Line ○ Line break ○ 38 | 10. [Mathematical Expressions](#10--mathematical-expressions) 39 | - Inline expressions ○ Block Expressions ○ 40 | 11. [View components](#11--view-components) 41 | - CheckBox ○ Pie Chart ○ Badges ○ Custom Buttons ○ 42 | 12. [Markdown Alerts](#12--markdown-alerts) 43 | - NOTE ○ TIP ○ IMPORTANT ○ WARNING ○ CAUTION ○ 44 | 13. [Tables](#13--tables) 45 | - Basic Table types ○ Table Alignment ○ Multi-line data ○ Nested Table ○ Table Styling ○ 46 | 47 |
48 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | # 1 | Headings 56 | 57 | `Preview :` 58 | 59 | # H1 60 | ## H2 61 | ### H3 62 | #### H4 63 | ##### H5 64 | ###### H6 65 | 66 |
67 | 68 | ` Syntax : ` 69 | 70 | ```git 71 | # H1 72 | ## H2 73 | ### H3 74 | #### H4 75 | ##### H5 76 | ###### H6 77 | ``` 78 | 79 | Alternative ways 80 | ```md 81 |

H1

82 |

H2

83 |

H3

84 |

H4

85 |
H5
86 |
H6
87 | ``` 88 | 89 | ```md 90 | H1 91 | = 92 | H2 93 | - 94 | ``` 95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 | 105 | 106 | 107 | 108 | # 2 | Text styles 109 | 110 | ## 2.1 ‣ Bold 111 | 112 | `Preview :` 113 | 114 | **Bold Text Style** 115 | 116 |
117 | 118 | ` Syntax : ` 119 | 120 | ```md 121 | **Bold Text Style** 122 | ``` 123 | 124 | Alternative ways to **bold text** 125 | 126 | ```md 127 | Alternative ways to __bold text__ 128 | Alternative ways to bold text 129 | ``` 130 |
131 | 132 | 133 | 134 | ## 2.2 ‣ Italic 135 | 136 | `Preview :` 137 | 138 | *Italic Text Style* 139 | 140 |
141 | 142 | ` Syntax : ` 143 | 144 | ```md 145 | *Italic Text Style* 146 | ``` 147 | 148 | Alternative ways to *italic text* 149 | 150 | ```md 151 | Alternative ways to _italic text_ 152 | Alternative ways to italic text 153 | ``` 154 |
155 | 156 | 157 | 158 | ## 2.3 ‣ Bold and Italic 159 | 160 | `Preview :` 161 | 162 | ***Bold and Italic Text Style*** 163 | 164 |
165 | 166 | ` Syntax : ` 167 | 168 | ```md 169 | ***Bold and Italic Text Style*** 170 | ``` 171 | 172 | Alternative ways to **_bold and italic text_** 173 | 174 | ```md 175 | Alternative ways to **_bold and italic text_** 176 | Alternative ways to bold and italic text 177 | ``` 178 |
179 | 180 | 181 | 182 | ## 2.4 ‣ Strikethrough 183 | 184 | `Preview :` 185 | 186 | ~~Strikethrough Text~~ 187 | 188 |
189 | 190 | ` Syntax : ` 191 | 192 | ```md 193 | ~~Strikethrough Text~~ 194 | ``` 195 | 196 | Alternative ways to strikethrough text 197 | 198 | 199 | ```md 200 | Alternative ways to strikethrough text 201 | ``` 202 |
203 | 204 | 205 | 206 | ## 2.5 ‣ Bold, Italic and Strikethrough 207 | 208 | `Preview :` 209 | 210 | ***~~Bold, Italic and Strikethrough Text~~*** 211 | 212 |
213 | 214 | ` Syntax : ` 215 | 216 | ```md 217 | ***~~Bold, Italic and Strikethrough Text~~*** 218 | ``` 219 |
220 | 221 | 222 | 223 | ## 2.6 ‣ Underlined 224 | 225 | `Preview :` 226 | 227 | Underlined Text Style 228 | 229 |
230 | 231 | ` Syntax : ` 232 | 233 | ```md 234 | Underlined Text Style 235 | ``` 236 |
237 | 238 | 239 | 240 | ## 2.7 ‣ Boxed 241 | 242 | `Preview :` 243 | 244 |
245 | Boxed Text Style 246 |
247 | 248 |
249 | 250 | ` Syntax : ` 251 | 252 | ```md 253 |
254 | Boxed Text Style 255 |
256 | ``` 257 |
258 | 259 | 260 | 261 | ## 2.8 ‣ Subscript 262 | 263 | `Preview :` 264 | 265 | This is the Subscript text style 266 | log2(x) 267 | 268 |
269 | 270 | ` Syntax : ` 271 | 272 | ```md 273 | This is the Subscript text style 274 | log2(x) 275 | ``` 276 | 277 |
278 | 279 | 280 | 281 | ## 2.9 ‣ Superscript 282 | 283 | `Preview :` 284 | 285 | This is the Superscript text style 286 | 2 3 = 8 287 | 288 |
289 | 290 | ` Syntax : ` 291 | 292 | ```md 293 | This is the Superscript text style 294 | 2 3 = 8 295 | ``` 296 |
297 | 298 | 299 | 300 | ## 2.10 ‣ Monospaced 301 | 302 | `Preview :` 303 | 304 | This is the normal text style 305 | This is the Monospaced text style 306 | 307 |
308 | 309 | ` Syntax : ` 310 | 311 | ```md 312 | This is the Monospaced text style 313 | ``` 314 | 315 |
316 | 317 |
318 |
319 | 320 | [  ⮝   BACK TO TOP    ](#contents) 321 | 322 |
323 |
324 | 325 |
326 | 327 | 328 | 329 | 330 | 331 | # 3 | Lists 332 | 333 | 334 | 335 | ## 3.1 ‣ Ordered 336 | 337 | `Preview :` 338 | 339 | 1. First level - Item one 340 | 2. First level - Item two 341 | 3. First level - Item three 342 | 343 |
344 | 345 | ` Syntax : ` 346 | 347 | ```md 348 | 1. First level - Item one 349 | 2. First level - Item two 350 | 3. First level - Item three 351 | ``` 352 |
353 | 354 | ## 355 | ### Multi level 356 | 357 | `Preview :` 358 | 359 | 1. First level 360 | 1. Second level 361 | 1. Third level 362 | - Fourth level 363 | 2. Third level 364 | - Fourth level 365 | 2. Second level 366 | 2. First level 367 | 1. Second level 368 | 369 | 370 |
371 | 372 | ` Syntax : ` 373 | 374 | 375 | ```md 376 | 1. First level 377 | 1. Second level 378 | 1. Third level 379 | - Fourth level 380 | 2. Third level 381 | - Fourth level 382 | 2. Second level 383 | 2. First level 384 | 1. Second level 385 | ``` 386 |
387 | 388 | 389 | 390 | ## 3.2 ‣ Unordered 391 | 392 | `Preview :` 393 | 394 | - Item one 395 | - Item two 396 | 397 |
398 | 399 | ` Syntax : ` 400 | 401 | ```md 402 | - Item one 403 | - Item two 404 | ``` 405 | 406 | Alternative ways 407 | 408 | 409 | ```md 410 | * Item one 411 | * Item two 412 | 413 | + Item one 414 | + Item two 415 | ``` 416 |
417 | 418 | ## 419 | ### Multi level 420 | 421 | `Preview :` 422 | 423 | - First level 424 | - Second level 425 | - Third level 426 | - Fourth level 427 | - First level 428 | - Second level 429 | 430 |
431 | 432 | ` Syntax : ` 433 | 434 | ```md 435 | - First level 436 | - Second level 437 | - Third level 438 | - Fourth level 439 | - First level 440 | - Second level 441 | ``` 442 | 443 |
444 | 445 |
446 |
447 | 448 | [  ⮝   BACK TO TOP    ](#contents) 449 | 450 |
451 |
452 | 453 |
454 | 455 | 456 | 457 | 458 | 459 | # 4 | Links 460 | 461 | 462 | 463 | ## 4.1 ‣ Basic Types 464 | 465 | - Auto link
466 | 467 | `Preview :` 468 | 469 | Web : https://github.com 470 | 471 | Email : support@github.com 472 | 473 |
474 | 475 | ` Syntax : ` 476 | 477 | ```md 478 | Web : https://github.com 479 | Email : support@github.com 480 | ``` 481 |
482 | 483 | # 484 | - Enclosed link <>
485 | 486 | `Preview :` 487 | 488 | GitHub : Let's build from here · 489 | 490 |
491 | 492 | ` Syntax : ` 493 | 494 | ```md 495 | GitHub : Let's build from here · 496 | ``` 497 | 498 |
499 | 500 | 501 | 502 | ## 4.2 ‣ Link Label 503 | 504 | `Preview :` 505 | 506 | [GitHub](https://github.com) : Let's build from here
507 | Hi, [sign in](https://github.com/login) to GitHub 508 | 509 |
510 | 511 | ` Syntax : []()` 512 | 513 | ```md 514 | [GitHub](https://github.com) : Let's build from here 515 | Hi, [sign in](https://github.com/login) to GitHub 516 | ``` 517 | 518 |
519 | 520 | 521 | 522 | ## 4.3 ‣ Hover 523 | 524 | `Preview :` 525 | 526 | GitHub : [Login](https://github.com/login "Sign in to GitHub! Click here") : Let's build from here
527 | 528 |
529 | 530 | ` Syntax : [ ]( | "")` 531 | 532 | ```md 533 | GitHub : [Login](https://github.com/login "Sign in to GitHub! Click here") : Let's build from here 534 | ``` 535 |
536 | 537 | 538 | 539 | ## 4.4 ‣ Repository Links 540 | 541 | `Preview :` 542 | 543 | [Example Document](/src/example.md) 544 | 545 |
546 | 547 | ` Syntax : ( ./ )` 548 | 549 | ```md 550 | [Example Document](/src/example.md) 551 | ``` 552 | 553 | # 554 | 555 | `Preview :` 556 | 557 | [README Document](README.md) 558 | 559 |
560 | 561 | ` Syntax : ( ./ )` 562 | 563 | ```md 564 | [README Document](README.md) 565 | ``` 566 | 567 | 568 | # 569 | 570 | `Preview :` 571 | 572 | [SRC Directory](./src) 573 | 574 |
575 | 576 | ` Syntax : ( ./ )` 577 | 578 | ```md 579 | [SRC Directory](./src) 580 | ``` 581 | 582 |
583 | 584 |
585 | 586 | 587 | 588 | ## 4.5 ‣ Footnote 589 | 590 | `Preview :` 591 | 592 | Learn advanced formatting features by creating a README for your GitHub profile [^1]. 593 | Github markdown cheat sheet [^2]. 594 | 595 | [^1]: Reference : https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github 596 | [^2]: Reference : https://dev.to/sameerkatija/github-markdown-cheat-sheet-everything-you-need-to-know-to-write-readme-md-2eca 597 | 598 |
599 | 600 | ` Syntax : [ ^1 ]` 601 | 602 | ```md 603 | Learn advanced formatting features by creating a README for your GitHub profile [^1]. 604 | Github markdown cheat sheet [^2]. 605 | 606 | [^1]: Reference : https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github 607 | [^2]: Reference : https://dev.to/sameerkatija/github-markdown-cheat-sheet-everything-you-need-to-know-to-write-readme-md-2eca 608 | ``` 609 |
610 | 611 | 612 | 613 | ## 4.6 ‣ Reference 614 | 615 | `Preview :` 616 | 617 | [GitHub : Let's build from here][github-link]
618 | [Hello there, sign in to GitHub][Login link] 619 |
620 | 621 | [github-link]: https://github.com 622 | [Login link]: https://github.com/login 623 | 624 | 625 |
626 | 627 | ` Syntax : [ ][ ]` 628 | 629 | ```md 630 | [GitHub : Let's build from here][github-link] 631 | [Hello there, sign in to GitHub][Login link] 632 | 633 | [github-link]: https://github.com 634 | [Login link]: https://github.com/login 635 | ``` 636 | 637 |
638 | 639 |
640 |
641 | 642 | [  ⮝   BACK TO TOP    ](#contents) 643 | 644 |
645 |
646 | 647 |
648 | 649 | 650 | 651 | 652 | 653 | # 5 | Images 654 | 655 | 656 | 657 | ## 5.1 ‣ Basic Image 658 | 659 | !\[Alternative-text](URL "Title-text") 660 | 661 | *Alternative text and title text are optional* 662 | ## 663 | 664 | `Preview :` 665 | 666 | ![Github Logo](https://cdn4.iconfinder.com/data/icons/social-media-and-logos-11/32/Logo_Github-128.png "Title text") 667 | 668 |
669 | 670 | ` Syntax : ` 671 | 672 | ```md 673 | ![Github Logo](https://cdn4.iconfinder.com/data/icons/social-media-and-logos-11/32/Logo_Github-128.png "Title text") 674 | ``` 675 | 676 |
677 | 678 | 679 | 680 | ## 5.2 ‣ Image Embed element : \ 681 | 682 | 683 | 684 | ### ‣ Image 685 | 686 | `Preview :` 687 | 688 | 694 | 695 |
696 | 697 | ` Syntax : ` 698 | 699 | ```md 700 | 706 | ``` 707 |
708 | 709 | ## 710 | 711 | 712 | 713 | ### ‣ GIF 714 | 715 | `Preview :` 716 | 717 | 722 | 723 |
724 | 725 | ` Syntax : ` 726 | 727 | ```md 728 | 733 | ``` 734 | 735 |
736 | 737 | ## 738 | 739 | 740 | 741 | ### ‣ Icons 742 | 743 | `Preview :` 744 | 745 | ![Swift](https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&logo=swift&logoColor=white) 746 | 747 | 752 | 753 |
754 | 755 | ` Syntax : ` 756 | 757 | ```md 758 | ![Swift](https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&logo=swift&logoColor=white) 759 | 760 | 765 | ``` 766 | 767 |
768 | 769 | 770 | 771 | ## 5.3 ‣ Image with click action 772 | 773 | `Preview :` 774 | 775 | [![GitHub](https://cdn0.iconfinder.com/data/icons/social-media-2183/512/social__media__social_media__github_-128.png)](https://github.com) 776 | 777 |
778 | 779 | ` Syntax : ` 780 | 781 | ```md 782 | [![GitHub](https://cdn0.iconfinder.com/data/icons/social-media-2183/512/social__media__social_media__github_-128.png)](https://github.com) 783 | ``` 784 | 785 |
786 |
787 |
788 | 789 | 790 | `Preview :` 791 | 792 | 795 | 796 | 797 | 798 |
799 | 800 | ` Syntax : ` 801 | 802 | ```md 803 | 806 | 807 | 808 | ``` 809 | 810 |
811 | 812 |
813 |
814 | 815 | [  ⮝   BACK TO TOP    ](#contents) 816 | 817 |
818 |
819 | 820 |
821 | 822 | 823 | 824 | 825 | 826 | 827 | # 6 | Alignments 828 | 829 | 830 | 831 | ## 6.1 ‣ Text Alignments 832 | 833 | 834 | `Preview :` 835 | 836 |

Heading Left

837 |

Heading Center

838 |

Heading Right

839 | 840 |
841 | 842 | ` Syntax : ` 843 | 844 | ```md 845 |

Heading Left

846 |

Heading Center

847 |

Heading Right

848 | ``` 849 |
850 | 851 | 852 | 853 | ## 6.2 ‣ Image Alignments 854 | 855 | 856 | 857 | ### Left 858 | 859 | `Preview :` 860 | 861 |

862 | 867 |

868 | 869 |
870 | 871 | ` Syntax : ` 872 | 873 | ```md 874 |

875 | 880 |

881 | ``` 882 | ## 883 | 884 | 885 | 886 | ### Center 887 | 888 | `Preview :` 889 | 890 |

891 | 896 |

897 | 898 |
899 | 900 | ` Syntax : ` 901 | 902 | ```md 903 |

904 | 909 |

910 | ``` 911 | ## 912 | 913 | 914 | 915 | ### Right 916 | 917 | `Preview :` 918 | 919 |

920 | 925 |

926 | 927 |
928 | 929 | ` Syntax : ` 930 | 931 | ```md 932 |

933 | 938 |

939 | ``` 940 | ## 941 | 942 | 943 | 944 | ### Multiple Images 945 | 946 | `Preview :` 947 | 948 |

949 | 953 | 957 | 961 |

962 | 963 |
964 | 965 | ` Syntax : ` 966 | 967 | 968 | ```md 969 |

970 | 974 | 978 | 982 |

983 | ``` 984 | 985 |
986 | 987 |
988 | 989 |
990 |
991 | 992 | [  ⮝   BACK TO TOP    ](#contents) 993 | 994 |
995 |
996 | 997 |
998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | # 7 | Code Block 1005 | 1006 | 1007 | 1008 | ### 7.1 ‣ Basic style 1009 | 1010 | You can create code blocks by placing triple backticks ``` before and after the code block. 1011 | 1012 | `Preview :` 1013 | 1014 | ``` 1015 | this is an example of code. 1016 | ``` 1017 | 1018 |
1019 | 1020 | ` Syntax : ` 1021 | 1022 | ``` 1023 | ``` 1024 | this is an example of code. 1025 | ``` 1026 | ``` 1027 | 1028 | 1029 | 1030 | ## 1031 | ### 7.2 ‣ Fenced code blocks 1032 | In GitHub Flavored Markdown (GFM), you can create code blocks by wrapping your code with three backticks, avoiding the need for leading spaces.
1033 | You can also add an optional language identifier to enable syntax highlighting for your code. 1034 | 1035 | ` Syntax : Java` 1036 | 1037 | ````md 1038 | ```java 1039 | public static void main(String[]args){} 1040 | //Java Code 1041 | ``` 1042 | ```` 1043 | 1044 |
1045 | 1046 | ` Syntax : Javascript` 1047 | 1048 | ````md 1049 | ```javascript 1050 | console.log('javascript') 1051 | //Javascipt code 1052 | ``` 1053 | ```` 1054 | 1055 |
1056 | 1057 | ` Syntax : Python` 1058 | 1059 | ````md 1060 | ```python 1061 | print('python') 1062 | ``` 1063 | ```` 1064 | 1065 |
1066 | 1067 | ` Syntax : Json` 1068 | 1069 | ````md 1070 | ```json 1071 | { 1072 | "firstName": "A", 1073 | "lastName": "B", 1074 | "age": 18 1075 | } 1076 | ``` 1077 | ```` 1078 | 1079 | 1080 | 1081 | ## 1082 | ### 7.3 ‣ Diff Code block 1083 | 1084 | In version control, diff highlights changes in various colors. In GitHub Flavored Markdown (GFM), you can display: 1085 | 1086 | - Green for additions (+) 1087 | - Red for deletions (-) 1088 | - Orange for changes (!) 1089 | - Gray for comments (#) 1090 | - Purple and bold for metadata (@@)
1091 | 1092 | Use the same syntax as fenced code blocks but specify diff after the three backticks. 1093 | 1094 | 1095 | `Preview :` 1096 | 1097 | ```diff 1098 | - Text Color Red 1099 | + Text Color Green 1100 | ! Text Color Orange 1101 | # Text Color Gray 1102 | @@ Text Color Purple And Bold @@ 1103 | ``` 1104 | 1105 |
1106 | 1107 | ` Syntax : diff` 1108 | 1109 | ````md 1110 | ```diff 1111 | - Text Color Red 1112 | + Text Color Green 1113 | ! Text Color Orange 1114 | # Text Color Gray 1115 | @@ Text Color Purple And Bold @@ 1116 | ``` 1117 | ```` 1118 | 1119 | 1120 | ## 1121 | ### Recommendation > Use YAML : A Human-Friendly Data Serialization Language 1122 | 1123 | ` Syntax : YAML` 1124 | 1125 | ````md 1126 | ```yaml 1127 | name: John Doe 1128 | location: New York, USA 1129 | origin: Canada 1130 | education: Bachelor's in Computer Science 1131 | occupation: Software Engineer 1132 | company: *** 1133 | 1134 | ``` 1135 | ```` 1136 | 1137 |
1138 | 1139 |
1140 | 1141 |
1142 |
1143 | 1144 | [  ⮝   BACK TO TOP    ](#contents) 1145 | 1146 |
1147 |
1148 | 1149 |
1150 | 1151 | 1152 | 1153 | 1154 | 1155 | # 8 | Text Decoration 1156 | 1157 | 1158 | 1159 | ### 8.1 ‣ Text Highlighting 1160 | 1161 | Using backticks( ` ) is a simple way to create tags for articles, such as 1162 | 1163 |
1164 | 1165 | *Preview :* 1166 | 1167 | 1168 | `GitHub` : Let's build from here - `any important text` 1169 | 1170 |
1171 | 1172 | **Syntax :** 1173 | 1174 | 1175 | ```git 1176 | `GitHub` : Let's build from here - `any important text` 1177 | ``` 1178 | 1179 | 1180 | 1181 | ## 1182 | ### 8.2 ‣ Emoji 1183 | 1184 | `Preview :and: Syntax` 1185 | 1186 | 1187 | 🌳 🐻 🍯 🌺 1188 | 1189 | You can easily add emojis by placing them directly in your text, like this: 🌳 🐻 🍯 🌺 1190 | 1191 | or you can use shortcode format 1192 | 1193 | 1194 | `Preview :` 1195 | 1196 | 1197 | :deciduous_tree: :bear: :honey_pot: :hibiscus: 1198 | 1199 | 1200 | ` Syntax : ` 1201 | 1202 | ```md 1203 | :deciduous_tree: :bear: :honey_pot: :hibiscus: 1204 | ``` 1205 | 1206 | 1207 | For a comprehensive list of all supported emojis on GitHub, check out the [Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) 1208 | 1209 | 1210 | 1211 | 1212 | ## 1213 | ### 8.3 ‣ Quoting Text / Blockquotes > 1214 | 1215 | `Preview :` 1216 | 1217 | > This is a block quoted text 1218 | 1219 |
1220 | 1221 | ` Syntax : ` 1222 | 1223 | ```git 1224 | > This is a block quoted text 1225 | ``` 1226 |
1227 | 1228 | **Difference** 1229 |
1230 |
1231 | 1232 | `Preview :` 1233 | 1234 | This is a normal text 1235 | > Block quoted text 1236 | 1237 | This is a normal text 1238 | 1239 |
1240 | 1241 | ` Syntax : ` 1242 | 1243 | ```git 1244 | This is a normal text 1245 | > Block quoted text 1246 | This is a normal text 1247 | ``` 1248 | 1249 | 1250 | 1251 | ## 1252 | ### 8.4 ‣ Multi-level blockquotes 1253 | 1254 | `Preview :` 1255 | 1256 | > First level 1257 | >> Second level 1258 | >>> Third level 1259 | >>>> Fourth level 1260 | >>>>> Fifth level 1261 | 1262 |
1263 | 1264 | ` Syntax : ` 1265 | 1266 | ```md 1267 | > First level 1268 | >> Second level 1269 | >>> Third level 1270 | >>>> Fourth level 1271 | >>>>> Fifth level 1272 | ``` 1273 | 1274 | 1275 | 1276 | ## 1277 | ### 8.5 ‣ Multi-line text 1278 | 1279 | You can add either 2 spaces or 4 spaces at the end of a line before starting a new line to achieve an indented effect. 1280 | 1281 | `Preview :` 1282 | 1283 | First level 1284 | Second level 1285 | Third level 1286 | 1287 |
1288 | 1289 | ` Syntax : ` 1290 | 1291 | ```md 1292 | First level 1293 | Second level 1294 | Third level 1295 | ``` 1296 | 1297 | 1298 | 1299 | ## 1300 | ### 8.6 ‣ Anchor 1301 | 1302 | Each title in GitHub Flavored Markdown (GFM) serves as an anchor, similar to an HTML anchor (#). 1303 | For example: 1304 | 1305 | #### NOTE : Keep in mind that all letters in the title are converted to lowercase. 1306 | 1307 | `Preview :` 1308 | 1309 | [Back to contents](#contents) 1310 | 1311 | 1312 |
1313 | 1314 | ` Syntax : ` 1315 | 1316 | ```md 1317 | [Back to contents](#contents) 1318 | ``` 1319 | 1320 | 1321 | 1322 | ## 1323 | ### 8.7 ‣ Visible markdown characters 1324 | 1325 | To make special characters visible in Markdown, you can escape them using a backslash (\\). 1326 | Here are some common examples: 1327 | 1328 | `Preview :` 1329 | 1330 | \
1331 | 1332 | 1333 | ` Syntax : ` 1334 | 1335 | ```md 1336 | \
1337 | ``` 1338 | 1339 | 1340 | 1341 | ## 1342 | ### 8.8 ‣ Adding Spaces in Markdown 1343 | 1344 | Markdown doesn’t support extra spaces directly, but you can use HTML tags: 1345 | 1346 | - Non-Breaking Space ( ` ` ): 1347 | - Adds a slightly wider fixed space and prevents line breaks. 1348 | 1349 | 1350 | - En Space ( ` ` ): 1351 | - Adds a half-width space, useful for small gaps. 1352 | 1353 | 1354 | - Em Space ( ` ` ): 1355 | - Inserts a space equal to the font size, creating a larger gap. 1356 | 1357 | 1358 | `Preview :` 1359 |

This is a |   | Small space / Regular space.

1360 |

This is a |   | Medium space / Two spaces.

1361 |

This is a |   | large space / Four spaces.

1362 | 1363 | ` Syntax : ` 1364 | 1365 | ```xhtml 1366 |

This is a |   | Small space / Regular space.

1367 |

This is a |   | Medium space / Two spaces.

1368 |

This is a |   | large space / Four spaces.

1369 | ``` 1370 | 1371 | ```xhtml 1372 |   1373 |   1374 |   1375 | 1376 | ``` 1377 | 1378 | 1379 | 1380 | 1381 | ## 1382 | ### 8.9 ‣ Comments in Markdown 1383 | 1384 | You can add comments in Markdown using HTML-style comments: 1385 | 1386 | 1387 | ` Syntax : ` 1388 | 1389 | ```md 1390 | 1391 | ``` 1392 | 1393 | #### NOTE : These comments will be invisible when viewing the README file. 1394 | 1395 |
1396 | 1397 |
1398 | 1399 |
1400 |
1401 | 1402 | [  ⮝   BACK TO TOP    ](#contents) 1403 | 1404 |
1405 |
1406 | 1407 |
1408 | 1409 | 1410 | 1411 | 1412 | 1413 | # 9 | Line Settings 1414 | 1415 | 1416 | 1417 | ### 9.1 ‣ Horizontal Line 1418 | 1419 | ### ‣ Style 1 1420 | 1421 | `Preview :` 1422 | 1423 | # 1424 | 1425 |
1426 | 1427 | ` Syntax : ` 1428 | 1429 | ```md 1430 | # 1431 | ``` 1432 | 1433 | Alternative ways 1434 | 1435 | ```md 1436 | ## 1437 | ``` 1438 |
1439 | 1440 | ### ‣ Style 2 1441 | 1442 | `Preview :` 1443 | 1444 | ___ 1445 | 1446 |
1447 | 1448 | ` Syntax : ` 1449 | 1450 | ```md 1451 | ___ 1452 | ``` 1453 | 1454 | Alternative ways 1455 | 1456 | ```md 1457 | *** 1458 | ``` 1459 | 1460 | ```md 1461 | --- 1462 | ``` 1463 | 1464 | ```md 1465 |
1466 | ``` 1467 | 1468 | 1469 | 1470 | ## 1471 | ### 9.2 ‣ Break between lines \
1472 | 1473 | `Preview :` 1474 | 1475 | This is a
normal text 1476 | 1477 |
1478 | 1479 | ` Syntax : ` 1480 | 1481 | ```md 1482 | This is a
normal text 1483 | ``` 1484 | 1485 |
1486 | 1487 |
1488 | 1489 |
1490 |
1491 | 1492 | [  ⮝   BACK TO TOP    ](#contents) 1493 | 1494 |
1495 |
1496 | 1497 |
1498 | 1499 | 1500 | 1501 | 1502 | 1503 | # 10 | Mathematical Expressions 1504 | 1505 | You can use LaTeX-style syntax to render math expressions in Markdown, allowing you to present mathematical content both inline (using `$` delimiters) and as blocks (using `$$` delimiters) 1506 | 1507 | 1508 | 1509 | ## 1510 | ### 10.1 ‣ Inline expressions 1511 | To include a math expression inline, simply place the expression between two dollar ( `$` ) signs. 1512 | Here’s a basic example: 1513 | 1514 | $\sqrt{5x}+(25+x)^2$ 1515 | 1516 | Additionally, you can use the following expression to demonstrate inline math: 1517 |
1518 | 1519 | `Preview :` 1520 |
1521 | 1522 | This sentence uses `$` delimiters to show math inline: 1523 | $\frac{2a+b}{c} = d$ 1524 | 1525 |
1526 | 1527 | ` Syntax : ` 1528 | 1529 | ```md 1530 | This sentence uses `$` delimiters to show math inline: 1531 | $\frac{2a+b}{c} = d$ 1532 | ``` 1533 |
1534 | 1535 | 1536 | 1537 | ## 1538 | ### 10.2 ‣ Block Expressions 1539 | 1540 | To display a mathematical expression as a multiline block, start a new line and enclose the expression with two dollar symbols `$$`. 1541 | This format is particularly useful for complex equations or when you want to emphasize the math content. 1542 | 1543 | Here’s an example of a block expression: 1544 | 1545 | `Preview :` 1546 |
1547 | 1548 | $$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$ 1549 | 1550 |
1551 | 1552 | ` Syntax : ` 1553 | 1554 | ```md 1555 | $$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$ 1556 | ``` 1557 |
1558 | 1559 |
1560 | 1561 |
1562 |
1563 | 1564 | [  ⮝   BACK TO TOP    ](#contents) 1565 | 1566 |
1567 |
1568 | 1569 |
1570 | 1571 | 1572 | 1573 | 1574 | 1575 | # 11 | View Components 1576 | 1577 | 1578 | 1579 | ### 11.1 ‣ CheckBox 1580 | 1581 | `Preview :` 1582 |
1583 | 1584 | * [ ] Checkbox 1 1585 | 1586 | * [x] Checkbox 2 Selected 1587 | 1588 | * [ ] Checkbox 3 1589 | 1590 |
1591 | 1592 | ` Syntax : ` 1593 |
1594 | 1595 | ```md 1596 | * [ ] Checkbox 1 1597 | 1598 | * [x] Checkbox 2 Selected 1599 | 1600 | * [ ] Checkbox 3 1601 | ``` 1602 |
1603 | 1604 | 1605 | 1606 | ## 1607 | ### 11.2 ‣ Pie Chart 1608 | 1609 |
1610 | 1611 | `Preview :` 1612 |
1613 | 1614 | ```mermaid 1615 | pie 1616 | "Dogs" : 450 1617 | "Cats" : 500 1618 | "Parrots" : 50 1619 | ``` 1620 | 1621 | ` Syntax : ` 1622 |
1623 | 1624 | ````md 1625 | ```mermaid 1626 | pie 1627 | "Dogs" : 450 1628 | "Cats" : 500 1629 | "Parrots" : 50 1630 | ``` 1631 | ```` 1632 |
1633 | 1634 | 1635 | 1636 | ## 1637 | ### 11.3 ‣ Badges 1638 | 1639 | To get dynamically generated GitHub stats on your READMEs, check out [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats) ! 1640 | 1641 | 1642 | `Preview :` 1643 | 1644 | [![GitHub stats](https://github-readme-stats.vercel.app/api?username=NovaLogics)](https://github.com/NovaLogics/github-readme-stats) 1645 | 1646 | ` Syntax : ` 1647 |
1648 | **Change the `?username= value` to your GitHub username.** 1649 | ````md 1650 | [![GitHub stats](https://github-readme-stats.vercel.app/api?username=NovaLogics)](https://github.com/NovaLogics/github-readme-stats) 1651 | ```` 1652 | 1653 | # 1654 | `Preview :` 1655 |
1656 | [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=NovaLogics)](https://github.com/NovaLogics) 1657 | 1658 |
1659 | 1660 | ` Syntax : ` 1661 |
1662 | **Change the `?username= value` to your GitHub username.** 1663 | ````md 1664 | [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=NovaLogics)](https://github.com/NovaLogics) 1665 | ```` 1666 | 1667 |
1668 | 1669 | 1670 | 1671 | ## 1672 | ### 11.4 ‣ Custom Buttons 1673 | 1674 | `Preview :` 1675 | 1676 | [ GitHub Login ](https://github.com/login) 1677 | 1678 |
1679 | 1680 | ` Syntax : ` 1681 | 1682 | ```md 1683 | [ GitHub Login ](https://github.com/login) 1684 | ``` 1685 | # 1686 | 1687 | `Preview :` 1688 | 1689 | [
  🌘 GitHub Login ┈➤  

](https://github.com/login) 1690 | 1691 |
1692 | 1693 | ` Syntax : ` 1694 | 1695 | ```md 1696 | [
  🌘 GitHub Login ┈➤  

](https://github.com/login) 1697 | ``` 1698 | 1699 |
1700 | 1701 |
1702 | 1703 |
1704 |
1705 | 1706 | [  ⮝   BACK TO TOP    ](#contents) 1707 | 1708 |
1709 |
1710 | 1711 |
1712 | 1713 | 1714 | 1715 | 1716 | 1717 | # 12 | Markdown Alerts 1718 | 1719 | Alerts are special features in Markdown used to highlight important information. 1720 | On GitHub, these alerts are shown with different colors and icons to help users quickly understand how important the content is. 1721 | 1722 | 1723 | 1724 | ## 1725 | ### 12.1 ‣ NOTE 1726 | 1727 | `Preview :` 1728 | 1729 | > [!NOTE] 1730 | > Essential details that users should not overlook, even when browsing quickly. 1731 | 1732 |
1733 | 1734 | ` Syntax : ` 1735 | 1736 | ```md 1737 | > [!NOTE] 1738 | > Essential details that users should not overlook, even when browsing quickly. 1739 | ``` 1740 |
1741 | 1742 | 1743 | 1744 | ## 1745 | ### 12.2 ‣ TIP 1746 | 1747 | `Preview :` 1748 | 1749 | > [!TIP] 1750 | > Additional advice to aid users in achieving better outcomes. 1751 | 1752 |
1753 | 1754 | ` Syntax : ` 1755 | 1756 | ```md 1757 | > [!TIP] 1758 | > Additional advice to aid users in achieving better outcomes. 1759 | ``` 1760 |
1761 | 1762 | 1763 | 1764 | ## 1765 | ### 12.3 ‣ IMPORTANT 1766 | 1767 | `Preview :` 1768 | 1769 | > [!IMPORTANT] 1770 | > Vital information required for users to attain success. 1771 | 1772 |
1773 | 1774 | ` Syntax : ` 1775 | 1776 | ```md 1777 | > [!IMPORTANT] 1778 | > Vital information required for users to attain success. 1779 | ``` 1780 |
1781 | 1782 | 1783 | 1784 | ## 1785 | ### 12.4 ‣ WARNING 1786 | 1787 | `Preview :` 1788 | 1789 | > [!WARNING] 1790 | > Urgent content that requires immediate user focus due to possible risks. 1791 | 1792 |
1793 | 1794 | ` Syntax : ` 1795 | 1796 | ```md 1797 | > [!WARNING] 1798 | > Urgent content that requires immediate user focus due to possible risks. 1799 | ``` 1800 |
1801 | 1802 | 1803 | 1804 | ## 1805 | ### 12.5 ‣ CAUTION 1806 | 1807 | `Preview :` 1808 | 1809 | > [!CAUTION] 1810 | > Possible negative outcomes resulting from an action. 1811 | 1812 |
1813 | 1814 | ` Syntax : ` 1815 | 1816 | ```md 1817 | > [!CAUTION] 1818 | > Possible negative outcomes resulting from an action. 1819 | ``` 1820 |
1821 | 1822 |
1823 | 1824 |
1825 |
1826 | 1827 | [  ⮝   BACK TO TOP    ](#contents) 1828 | 1829 |
1830 |
1831 | 1832 |
1833 | 1834 | 1835 | 1836 | 1837 | 1838 | # 13 | Tables 1839 | 1840 | 1841 | 1842 | ### 13.1 ‣ Basic Table types 1843 | 1844 | `Preview :` 1845 |
1846 | 1847 | |Header 1|Header 2|Header 3| 1848 | | --- | --- | --- | 1849 | | First | Data | Row | 1850 | | Second | Data | Row | 1851 | | Third | Data | Row | 1852 | 1853 |
1854 | 1855 | ` Syntax : ` 1856 | 1857 | ```md 1858 | |Header 1|Header 2|Header 3| 1859 | | --- | --- | --- | 1860 | | First | Data | Row | 1861 | | Second | Data | Row | 1862 | | Third | Data | Row | 1863 | ``` 1864 | 1865 | Alternative ways 1866 | 1867 | ```md 1868 | 1869 | 1870 | 1871 | 1872 | 1873 | 1874 | 1875 | 1876 | 1877 | 1878 | 1879 | 1880 |
Header 1Header 2Header 3
FirstDataRow
1881 | ``` 1882 | 1883 | 1884 | 1885 | ## 1886 | ### 13.2 ‣ Table Alignment 1887 | 1888 | - `-` Default 1889 | - `:-` Align Left 1890 | - `:-:` Align Center 1891 | - `-:` Align Right 1892 | 1893 | 1894 | `Preview :` 1895 | 1896 | | Default | Left | Center | Right | 1897 | | - | :- | :-: | -: | 1898 | | 10000 | 10000 | 10000 | 10000 | 1899 | | 1000000000001 | 1000000000001 | 1000000000001 | 1000000000001 | 1900 | | 20002 | 20002 | 20002 | 20002 | 1901 | 1902 |
1903 | 1904 | ` Syntax : ` 1905 | 1906 | ```md 1907 | | Default | Left | Center | Right | 1908 | | - | :- | :-: | -: | 1909 | | 10000 | 10000 | 10000 | 10000 | 1910 | | 1000000000001 | 1000000000001 | 1000000000001 | 1000000000001 | 1911 | | 20002 | 20002 | 20002 | 20002 | 1912 | ``` 1913 | 1914 |
1915 | 1916 | 1917 | 1918 | ## 1919 | ### 13.3 ‣ Multi-line data 1920 | 1921 | `Preview :` 1922 | 1923 | |Header 1|Header 2|Header 3| 1924 | |---|---|---| 1925 | | Data 1 | Data 2
Data 3
Data 4 | Data 5 | 1926 | 1927 |
1928 | 1929 | ` Syntax : ` 1930 | 1931 | ```md 1932 | |Header 1|Header 2|Header 3| 1933 | |---|---|---| 1934 | | Data 1 | Data 2
Data 3
Data 4 | Data 5 | 1935 | ``` 1936 | 1937 |
1938 | 1939 | 1940 | 1941 | ## 1942 | ### 13.4 ‣ Nested Table 1943 | 1944 | `Preview :` 1945 | 1946 | 1947 | 1948 | 1949 | 1950 | 1951 | 1952 | 1953 | 1966 |
Header 1Header 2
1954 | 1955 | | H 1 | H 2 | 1956 | |--|--| 1957 | | Data 1 | Data 2 | 1958 | 1959 | 1960 | 1961 | | H 1 | H 2 | H 3 | 1962 | |--|--|--| 1963 | | Data 1 | Data 2 | Data 3 | 1964 | 1965 |
1967 | 1968 |
1969 | 1970 | ` Syntax : ` 1971 | 1972 | ```md 1973 | 1974 | 1975 | 1976 | 1977 | 1978 | 1979 | 1980 | 1993 |
Header 1Header 2
1981 | 1982 | | H 1 | H 2 | 1983 | |--|--| 1984 | | Data 1 | Data 2 | 1985 | 1986 | 1987 | 1988 | | H 1 | H 2 | H 3 | 1989 | |--|--|--| 1990 | | Data 1 | Data 2 | Data 3 | 1991 | 1992 |
1994 | ``` 1995 | 1996 |
1997 | 1998 | 1999 | 2000 | ## 2001 | ### 13.5 ‣ Styling 2002 | 2003 | `Preview :` 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2025 | 2035 | 2036 |
Header 1Header 2
2012 | 2013 | 
2014 |     
 This is a Cool Icon  

2015 | 
2016 |     
2021 | 
2022 |
2023 | 2024 | 		2026 | 2027 | 
2028 |     console.log('Hello');
2029 |     console.log('World!');
2030 |     console.log('This is');
2031 |     console.log('JavaScript');
2032 |
2033 | 2034 |
2037 | 2038 |
2039 | 2040 | ` Syntax : ` 2041 | 2042 | ```md 2043 | 2044 | 2045 | 2046 | 2047 | 2048 | 2049 | 2063 | 2073 | 2074 |
Header 1Header 2
2050 | 2051 | 
2052 |     
 This is a Cool Icon  

2053 | 
2054 |     
2059 | 
2060 |
2061 | 2062 | 		2064 | 2065 | 
2066 |     console.log('Hello');
2067 |     console.log('World!');
2068 |     console.log('This is');
2069 |     console.log('JavaScript');
2070 |
2071 | 2072 |
2075 | ``` 2076 | 2077 |
2078 | 2079 |
2080 | 2081 |
2082 |
2083 | 2084 | [  ⮝   BACK TO TOP    ](#contents) 2085 | 2086 |
2087 |
2088 | 2089 |
--------------------------------------------------------------------------------