Heading 1	Heading 2
333 \| 334 \| \| A \| B \| C \| 335 \| \| --- \| --- \| --- \| 336 \| \| 1 \| 2 \| 3 \| 337 \| 338 \|	339 \| 340 \| \| A \| B \| C \| 341 \| \| --- \| --- \| --- \| 342 \| \| 1 \| 2 \| 3 \| 343 \| 344 \|

Heading 1	Heading 2
355 \| 356 \| \| A \| B \| C \| 357 \| \| --- \| --- \| --- \| 358 \| \| 1 \| 2 \| 3 \| 359 \| 360 \|	361 \| 362 \| \| A \| B \| C \| 363 \| \| --- \| --- \| --- \| 364 \| \| 1 \| 2 \| 3 \| 365 \| 366 \|

` tag. I actually changed my 'Back to Top' link to be an `` link inside of a `

` so that I could align the link to the right and use an HTML entity for an arrow up: 491 | 492 | ```html 493 | 494 |

500 | ``` 501 | 502 |

503 | 504 | ### Footnotes 505 | 506 | **Footnote links**: I assume footnotes would be useful in a very technical or long README file. Use square brackets where you want a footnote link to appear and use a caret symbol (^) followed by the number of the footnote. 507 | 508 | Then below that add the same syntax followed by a colon and the note itself - none of that will display on the page. That will make the footnote text appear at the bottom of your file: 509 | 510 | Footnote.[^1] 511 | 512 | Some other important footnote.[^2] 513 | 514 | Use this for where you want the link: `[^1]` 515 | 516 | Here is the actual footnote syntax: 517 | 518 | ```markdown 519 | [^1]: This is footnote number one. 520 | [^2]: Here is the second footnote. 521 | ``` 522 | 523 | [^1]: This is footnote number one. 524 | [^2]: Here is the second footnote. 525 | 526 | ### At mentions 527 | 528 | At mentions do not seem to work as links. This is an at mention test: 529 | 530 | @Kernix13: Hello. This does not work in a markdown file, but it does create a link in Issues and PRs, and maybe in other areas as well. I need to do more research into this. Like Hidden text, this may only work on different platforms like Discord. 531 | 532 |

⇡ Back to Top

533 | 534 | --- 535 | 536 | ## Lists 537 | 538 | This category has: 539 | 540 | - Unordered lists 541 | - Ordered lists 542 | - Nested lists 543 | - Task lists 544 | 545 | You can use all text effects but with one exception: None of the effects work for Task lists. 546 | 547 | ### Unordered 548 | 549 | **Unordered lists**: You can use either an asterisk (`*`) or a dash (`-`) followed by a space to make a bulleted list. I prefer using a dash since you do not need to use the SHIFT key: 550 | 551 | - _List item 1_ 552 | - **List item 2** 553 | - List ~~item 3~~ 554 | 555 | ```markdown 556 | - _List item 1_ 557 | - **List item 2** 558 | - List ~~item 3~~ 559 | ``` 560 | 561 |

⇡ Back to Top

562 | 563 | ### Ordered 564 | 565 | **Ordered lists**: use a number followed by a period (1., 2., 3. etc.) and then a space to create an ordered list: 566 | 567 | 1. Ordered **item 1** 568 | 1. Ordered _item 2_ 569 | 1. Ordered ~~item 3~~ 570 | 571 | ```markdown 572 | 1. Ordered **item 1** 573 | 1. Ordered _item 2_ 574 | 1. Ordered ~~item 3~~ 575 | ``` 576 | 577 | **NOTE**: By using "1." for each list item, you can cut & paste to change the order of items and the numbering will change to match the new order. 578 | 579 | Does this make sense? You can use both unordered and ordered together -> bullets with roamn numerals, or numbers with bullets: 580 | 581 | 1. - What? 582 | 1. - Really? 583 | 1. - Why? 584 | 585 | - 10. What is this 586 | - 15. Again? 587 | - 20. Any use cases? 588 | 589 |

⇡ Back to Top

⇡ Back to Top

⇡ Back to Top

658 | 659 | --- 660 | 661 | ## Code 662 | 663 | This category deals with inline code and various typs of code blocks and none of them accept Styles with the exception of `inline` and language code blocks using _markdown_ as the language: 664 | 665 | - Inline code 666 | - Generic code blocks 667 | - TAB code blocks 668 | - Code language blocks 669 | - `Diff` code blocks 670 | 671 | ### Inline 672 | 673 | Use a `single backtick` before and after text to display it as inline code: 674 | 675 | ```markdown 676 | `single backtick` 677 | ``` 678 | 679 | Here are examples on inline as **`bold`**, _`italic`_, and ~~`strikethrough`~~. There is also a way to show language syntax highlighting (see _Language block_ section below) for inline code, but I think you need to use a package called `highlight.js`. 680 | 681 | ### Tab 682 | 683 | It took me a while how to show the 3 backticks for a code block (next section). For that and other tricky markdown that will not dispay, hit the TAB button twice then enter your code: 684 | 685 | This is a **code** _block_ made by ~~hitting~~ TAB 2 X's 686 | 687 | ### Generic 688 | 689 | To add code that requires more than 1 line then use 3 backticks, hit ENTER, add your code block, hit ENTER again and add 3 more back ticks. 690 | 691 | ``` 692 | *, *::before, *::after { 693 | box-sizing: border-box; 694 | } 695 | ``` 696 | 697 | ``` 698 | *, *::before, *::after { 699 | box-sizing: border-box; 700 | } 701 | ``` 702 | 703 | **From GitHub docs**: _To display triple backticks in a fenced code block, wrap them inside quadruple backticks_. 704 | 705 | However, you can also hit TAB twice: 706 | 707 | ``` 708 | TAB twice to show the triple backticks 709 | ``` 710 | 711 | ```` 712 | ``` 713 | Triples inside quadruples - TAB x 2 is easier 714 | ``` 715 | ```` 716 | 717 |

⇡ Back to Top

718 | 719 | ### Language block 720 | 721 | This is what you want to use for code blocks. To highlight parts of your code add the language after the opening triple backticks. You'll have to do your own research but so far I've used the following languages: `md` or `markdown`, `html`, `css`, `js` or `javascript`, `jsx`, `php`, `xml`, `python`, `sql`, `bash` or `shell` or `sh`, and `apacheconf` (for Apache servers). I tried using `node` and `npm` for my node-npm repo but it had no effect. 722 | 723 | ```css 724 | rules here 725 | ``` 726 | 727 | **CSS**: 728 | 729 | ```css 730 | a { 731 | text-decoration: none; 732 | } 733 | ``` 734 | 735 | **HTML**: 736 | 737 | ```html 738 | 739 | ``` 740 | 741 | **JavaScript**: 742 | 743 | ```js 744 | console.log(${variable}) 745 | ``` 746 | 747 | **PHP**: 748 | 749 | ```php 750 | 751 | ``` 752 | 753 | Here is a new one that I found on [Discord Markdown Text 101](https://gist.github.com/matthewzring/9f7bbfd102003963f9be7dbcf7d40e51) with a language prefix of `fix`. I assume this works on Discord but itdoes not work on GitHub: 754 | 755 | ```fix 756 | everything is blue 757 | = light blue after equal sign (but not in VS Code) 758 | ``` 759 | 760 | ```fix 761 | everything is blue 762 | = light blue after equal sign (but not in VS Code) 763 | ``` 764 | 765 | Here is the full list of supported languages and code syntax highlighting. 766 | 767 | Check out the article [Languages Supported by Github Flavored Markdown](https://www.rubycoloredglasses.com/2013/04/languages-supported-by-github-flavored-markdown/) from 12-8-2020. Also check out the [highlight.js](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) repo: 768 | 769 | ```markdown 770 | actionscript3 771 | apache 772 | applescript 773 | asp 774 | brainfuck 775 | c 776 | cfm 777 | cjs 778 | clojure 779 | cmake 780 | coffee-script, coffeescript, coffee 781 | cpp - C++ 782 | cs 783 | csharp 784 | css 785 | csv 786 | bash, sh, zsh 787 | diff 788 | elixir 789 | erb - HTML + Embedded Ruby 790 | go 791 | haml 792 | http 793 | java 794 | javascript 795 | js 796 | json 797 | jsx 798 | less 799 | lolcode 800 | make - Makefile 801 | markdown 802 | matlab 803 | nginx 804 | objectivec 805 | pascal 806 | PHP 807 | Perl 808 | python 809 | profile - python profiler output 810 | rust 811 | salt, saltstate - Salt 812 | shell, sh, zsh, bash - Shell scripting 813 | scss 814 | sql 815 | svg 816 | swift 817 | rb, jruby, ruby - Ruby 818 | smalltalk 819 | vim, viml - Vim Script 820 | volt 821 | vhdl 822 | vue 823 | xml - XML and also used for HTML with inline CSS and Javascript 824 | yaml 825 | ``` 826 | 827 | I've also noticed that `ini` and `TOML` as the language block language also show syntax highlighting. 828 | 829 | For terminal commands like for NPM, use `bash`, `sh`, or `zsh`. 830 | 831 | Trying to find a language to style terminal errors or errors & warnings in DevTools is difficult. The best languages I found for that are `c++` and `python`. The syntax highlighting isn't perfect but it at least has some highlighting. 832 | 833 |

⇡ Back to Top

834 | 835 | ### Diff 836 | 837 | This is really nice for highlighting text or code that was changed. Use `diff` after the opening triple backticks. Then use a minus sign (`-`) for what was changed, and a plus symbol (`+`) for the new version: 838 | 839 | ```diff 840 | - this code or text is the old version 841 | + this is what it was changed to 842 | ``` 843 | 844 | ```` 845 | ```diff 846 | - this code or text is the old version 847 | + this is what it was changed to 848 | ``` 849 | ```` 850 | 851 |

⇡ Back to Top

852 | 853 | --- 854 | 855 | ## Hidden Elements 856 | 857 | This is an odd category with 3 effects, one of which you have probably only seen on Discord: 858 | 859 | - Comments 860 | - Spoiler text 861 | - Details 862 | 863 | Only Spoiler text accepts text effects. 864 | 865 | ### Comments 866 | 867 | This is a nice way to add a comment in the editor view of your markdown file. This would be good for teams members editing a documentation page. The best way is to use HTML syntax: 868 | 869 | 870 | 871 | ```markdown 872 | 873 | ``` 874 | 875 | Comments used in language code blocks will match the language. You can use the `CTRL+/` shortcut. For example, in JavaScript or PHP you will get `//` using that shortcut, or `/* */` in CSS, `#` in bash files, and `` in HTML. 876 | 877 | ### Spoiler 878 | 879 | On Discord you may sometimes see a black rectangle that reveals text or code when you click on it. Use double pipes before and after the word(s)/code that you want to conceal: 880 | 881 | ```markdown 882 | ||Spoiler text|| in Discord 883 | ``` 884 | 885 | **NOTE**: This does not work on Slack or here on GitHub. 886 | 887 |

⇡ Back to Top

888 | 889 | ### Details 890 | 891 | This isn't a markdown thing but it is another example of using HTML tags in a Markdown file. It has the same effect as an accordian. I'm not sure why you would use this but here is how you would do it: 892 | 893 |

894 |

Title 1

895 |

Some hidden content goes here

896 |

897 |

898 |

Title 2

899 |

Same stuff here

900 |

901 | 902 | ```html 903 |

904 |

Title 1

905 |

Some hidden content goes here

906 | Here is some more without a paragraph tag 907 |

908 |

909 |

Title 2

910 |

Same stuff here

911 |

912 | ``` 913 | 914 |

⇡ Back to Top

915 | 916 | --- 917 | 918 | ## Visual Elements 919 | 920 | The five sections below deal with adding visual-based elements to your markdown file that require some kind of extra code/syntax: `images`, `math expressions`, `emojis`, `shields`, `diagrams`, and `HTML entities`. 921 | 922 | ### Images 923 | 924 | Images use the same syntax as **Links** except for the addition of an exclamation mark (`!`) immediately before the opening square bracket. You can also use the optional title text. The example image below shows the dimensions but that is just an example. It's up to you to decide the image sizes you want for your files: 925 | 926 |
927 | 928 | ![picture alt text](./markdown-image.png 'Title is optional') 929 | 930 | ![picture alt](./markdown-image.png 'Title is optional') 931 | 932 | raw.githubusercontent: I noticed that you can paste images into parts of GitHub. You can do it in a markdown file, but then you will have to pull the changes. I've also seen it done in `Pull requests` and `Issues` tabs. Here is an example: 933 | 934 | ```html 935 |

938 | ``` 939 | 940 |

⇡ Back to Top

941 | 942 | ### Math 943 | 944 | Finally, per GitHub: 945 | 946 | > ...math expressions can be rendered in Markdown on GitHub using $$ as a delimiter for code blocks with math content or the $ delimiter for inline math expressions. 947 | 948 | 1. Use a single dollar sign (`$`) at the beginning and end of an inline math expression. 949 | 2. Use 2 dollar sign (`$$`) at the beginning and end for a block of math expressions. 950 | 951 | Inline example: this `$(ax^2 + bx + c = 0)$` renders as $(ax^2 + bx + c = 0)$. 952 | 953 | Inline exception: use `\$` to escape, and therefore use, a dollar sign in an equation (`$(\$4.00 - \$1.50 = \$2.50)$`): $(\$4.00 - \$1.50 = \$2.50)$ 954 | 955 | Inline exception 2: use `$` for inline use of dollar sign before a math expression. 956 | 957 | Block example: `$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$` renders as: 958 | 959 | $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ 960 | 961 | Block example 2: This `$$\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)$$` renders as: 962 | 963 | $$\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)$$ 964 | 965 | Here are the important symbols to know: 966 | 967 | - `^` = exponent, e.g. $a^3$ 968 | - `{ }` = required for certain expressions such as square root 969 | - `\pm` = plus\minus symbol: $\pm$ 970 | - `\sqrt` = square root symbol: $\sqrt{b}$ 971 | - `\over` = division: $a \over b$ 972 | - `\leq` = less than or equal to: $\leq$ 973 | - `\geq` = greater than or equal to: $\geq$ 974 | - `\ne` = not equal to: $ \ne $ 975 | - `\sum` = Sigma, summation symbol: $\sum$ 976 | - `\val` = sub-script value: $a_i$ 977 | - `\{val=num}^n` = start val and max (n) val for sum 978 | - `\Omega` and `\omega` = greek Omega or omega 979 | - `\int` = interval 980 | - `\bmod` and `\pmod` = modular operators 981 | - `\frac` = fractions 982 | - `\binom` = binomial coefficient 983 | 984 | Not sure for the following: `\left`, `\right`, `\forall`, `\partial`, `\rho`, `\nabla`, `\cdot`, `\vec`, `\mathrm`, `\in`, ... 985 | 986 | For some reason the symbols in the lists above are not all displaying (?) 987 | 988 | #### Examples for Greek letters 989 | 990 | Greek letters are commonly used in mathematics, and they are very easy to type in math mode. You just have to type the name of the letter after a backslash: if the first letter is lowercase, you will get a lowercase Greek letter, if the first letter is uppercase (and only the first letter), then you will get an uppercase letter. Note that some uppercase Greek letters look like Latin ones. 991 | 992 | Use `\alpha, \Alpha, \beta, \Beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi, \Omega, \omega` for $\alpha \beta \gamma \Gamma \pi \Pi \phi \varphi \mu \Phi \Omega \omega \Theta \theta$, etc. 993 | 994 | #### Examples for Operators 995 | 996 | An operator is a function that is written as a word: e.g. trigonometric functions (sin, cos, tan), logarithms and exponentials (log, exp), limits (lim), as well as trace and determinant (tr, det). 997 | 998 | Use `\lim\limits_{x \to \infty} \exp(-x) = 0` for $\lim\limits_{x \to \infty} \exp(-x) = 0$ 999 | 1000 | #### Examples of Powers and indices 1001 | 1002 | Powers and indices are equivalent to superscripts and subscripts in normal text mode. The caret character (`^`) is used to raise something, and the underscore (`_`) is for lowering. For example, use `k_{n+1} = n^2 + k_n^2 - k_{n-1}` for $k_{n+1} = n^2 + k_n^2 - k_{n-1}$. 1003 | 1004 | For powers with more than one digit, surround the power with `{ }`: use `n^{22}` for $n^{22}$. 1005 | 1006 | An underscore (`_`) can be used with a vertical bar (`{\displaystyle |}|`) to denote evaluation using subscript notation: use `f(n) = n^5 + 4n^2 + 2 |_{n=17}` for $f(n) = n^5 + 4n^2 + 2 |_{n=17}$. 1007 | 1008 | #### Examples of Fractions and Binomials 1009 | 1010 | A fraction is created using the `\frac{numerator}{denominator}` command. Use `\frac{n!}{k!(n-k)!} = \binom{n}{k}` for $$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$ 1011 | 1012 | You can embed fractions within fractions using `\frac{\frac{1}{x}+\frac{1}{y}}{y-z}`: 1013 | 1014 | $$\frac{\frac{1}{x}+\frac{1}{y}}{y-z}$$ 1015 | 1016 | The `\tfrac` and `\dfrac` commands force the use of the respective styles, `\textstyle` and `\displaystyle`. Similarly, the `\tbinom` and `\dbinom` commands typeset the binomial coefficient. 1017 | 1018 | For relatively simple fractions, especially within the text, it may be more aesthetically pleasing to use powers and indices instead: `^3/_7` for $^3/_7$ 1019 | 1020 | If you use them throughout the document, usage of `xfrac` package is recommended. This package provides `\sfrac` command to create slanted fractions. If fractions are used as an exponent, curly braces have to be used around the `\sfrac` command. 1021 | 1022 | Check out the Wikipedia article [LaTeX/Mathematics](https://en.wikibooks.org/wiki/LaTeX/Mathematics) for more information. Or click on the following links for specific sections not covered above: 1023 | 1024 | - [Multiplication of two numbers](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Multiplication_of_two_numbers) 1025 | - [Roots](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Roots) 1026 | - [Sums and integrals](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Sums_and_integrals) 1027 | - [Brackets, braces and delimiters](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Brackets,_braces_and_delimiters) 1028 | - [Matrices and arrays](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Matrices_and_arrays) 1029 | - [Adding text to equations](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Adding_text_to_equations) 1030 | - [Formatting mathematics symbols](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Formatting_mathematics_symbols) 1031 | - [Color](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Color) 1032 | 1033 | Color example: try `k = {\color{red}x} \mathbin{\color{blue}-} 2` for $k = {\color{red}x} \mathbin{\color{blue}-} 2$ 1034 | 1035 | Other links: 1036 | 1037 | - [MathJax](https://www.mathjax.org/) 1038 | - GitHub blog post [Math support in Markdown](https://github.blog/2022-05-19-math-support-in-markdown/) 1039 | 1040 |

⇡ Back to Top

1041 | 1042 | ### Emojis 1043 | 1044 | I'm not a huge fan of emojis, but here are some that I would consider using. The syntax is the emoji code in between colons: 1045 | 1046 | ```markdown 1047 | :Emoji_code: 1048 | ``` 1049 | 1050 | Approval: :+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:, :star:, :star2:, :heart:, :exclamation: 1051 | 1052 | ```markdown 1053 | :+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:, 1054 | :star:, :star2:, :heart:, :exclamation: 1055 | ``` 1056 | 1057 | Disapproval, questions, problems: :-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:, :warning:, :interrobang: 1058 | 1059 | ```markdown 1060 | :-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:, 1061 | :warning:, :interrobang: 1062 | ``` 1063 | 1064 | Directional: :point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down: 1065 | 1066 | ```markdown 1067 | :point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down: 1068 | ``` 1069 | 1070 | Time, alarms: :bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar: 1071 | 1072 | ```markdown 1073 | :bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar: 1074 | ``` 1075 | 1076 | Weather/nature: :sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: 💧 ☔ ⭐ 🌡️ ❄️ ⛄ 🌱 🐚 🍁 🍃 🌲 🌳 1077 | 1078 | ```markdown 1079 | :sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: :droplet: :umbrella: :star: :thermometer: :snowflake: :snowman: :seedling: :shell: :maple_leaf: :leaves: :evergreen_tree: :deciduous_tree: 1080 | ``` 1081 | 1082 | Office/Business: :scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: 💻 📞 📫 💵 💳 🔗 📎 💲 ✏️ 1083 | 1084 | ```markdown 1085 | :scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: :computer: :telephone_receiver: :mailbox: :dollar: :credit_card: :link: :paperclip: :heavy_dollar_sign: :pencil2: 1086 | ``` 1087 | 1088 | Miscellaneous/playful: :alien:, :green_heart:, :blue_heart:, :purple_heart:, :mushroom:, :pizza:, :beer:, :icecream:, :sound:, :speaker:, :lock:, :guitar:, :one:, :two: (and other #'s),
1089 | :link:, :speech_balloon:, :mag:, :mag_right:, :key:, :bulb: 👤 🐱 🐶 🦴 🌐 🌎 🎃 👻 🎅 🎄 🎁 🎈 🔦 🚽 🔧 🔨 ⛺ ⛵ ⚓ 🚀 ✈️ 🔥 💀 🚩 ♾️ 📐 🍷 💭 1090 | 1091 | ```markdown 1092 | :alien:, :green_heart:, :blue_heart:, :purple_heart:, :mushroom:, :pizza:, :beer:, 1093 | :icecream:, :sound:, :speaker:, :lock:, :guitar:, :one:, :two: (and other #'s), 1094 | :link:, :speech_balloon:, :mag:, :mag_right:, :key:, :bulb: :bust_in_silhouette: :cat: :dog: :bone: :globe_with_meridians: :earth_americas: :jack_o_lantern: :ghost: :santa: :christmas_tree: :gift: :balloon: :flashlight: :toilet: :wrench: :hammer: :tent: :sailboat: :anchor: :rocket: :airplane: :fire: :skull: :triangular_flag_on_post: :infinity: :triangular_ruler: :wine_glass: :thought_balloon: 1095 | ``` 1096 | 1097 |

⇡ Back to Top

1098 | 1099 | ### Shields 1100 | 1101 | Check the file `shields.md` for a full list. 1102 | 1103 | [Shields.io](https://shields.io/) generates shields/badges for different apects of your repo. Here are the shields I have for my [WriterAssist](https://github.com/Kernix13/WriterAssist) repo with descriptions above the badges: 1104 | 1105 | ```md 1106 | GitHub commit activity: 1107 | ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/Kernix13/WriterAssist?style=flat-square) 1108 | GitHub contributors: 1109 | ![GitHub contributors](https://img.shields.io/github/contributors/Kernix13/WriterAssist?style=flat-square) 1110 | GitHub all releases: 1111 | ![GitHub all releases](https://img.shields.io/github/downloads/Kernix13/WriterAssist/total?style=flat-square) 1112 | GitHub language count: 1113 | ![GitHub language count](https://img.shields.io/github/languages/count/Kernix13/WriterAssist?style=flat-square) 1114 | GitHub top language: 1115 | ![GitHub top language](https://img.shields.io/github/languages/top/Kernix13/WriterAssist?style=flat-square) 1116 | license 1117 | ![GitHub](https://img.shields.io/github/license/Kernix13/WriterAssist?style=flat-square) 1118 | ``` 1119 | 1120 | In the beginning just add what you can, even if the values are `0`, though some shields with a `null` value will display a zero, others will not even display the badge. Here are the badges I think are good for beginners: 1121 | 1122 | - **Analysis badges**: GitHub language count, GitHub top language, and GitHub search hit counter 1123 | - **Size badge**: GitHub repo file count 1124 | - **Downloads badge**: GitHub all releases 1125 | - **Funding badge**: GitHub sponsors (probably not for beginners) 1126 | - **Issue tracking badges**: GitHub issue/pull request detail, GitHub issues, GitHub closed issues, ...and many more, (_what is hacktoberfest?_) 1127 | - **License badge**: GitHub license 1128 | - **Social badges**: GitHub followers, forks, repo stars, users stars, watchers, ... 1129 | - **Version badge**: GitHub manifest version 1130 | - **Activity badges**: GitHub contributors, GitHub commit activity, GitHub last commit, GitHub release date, 1131 | - **Other badges**: GitHub discussions, GitHub package.json dynamic (keywords) 1132 | 1133 | Shield.io will build the links for you, but here is the breakdown of the structure: 1134 | 1135 | ```markdown 1136 | https://img.shields.io/github/ + Label/ + user/ + repo + ?options 1137 | ``` 1138 | 1139 | You do not have to go to the shields website if you want shields for a repo that you already. Just change the repo part of the link. As of 8/26/2022 I have 3 shields for this repo. Here they are following the sequence above with `constant` standing for the string `https://img.shields.io/github/`: 1140 | 1141 | ```markdown 1142 | 1143 | 1144 | constant + forks/Kernix13/markdown-cheatsheet?style=flat-square 1145 | 1146 | 1147 | 1148 | constant + commit-activity/y/Kernix13/markdown-cheatsheet?style=flat-square 1149 | 1150 | 1151 | 1152 | constant + contributors/Kernix13/markdown-cheatsheet?style=flat-square 1153 | ``` 1154 | 1155 | For the `?style=` part of the link, I like `flat-square` and `for-the-badge` (much larger). You can also choose _Copy HTML_ to get an `img` tag instead of a markdown link. I actually switched from the markdown syntax to an `img` tag inside of `` tags to get them to display inline: 1156 | 1157 | ```markdown 1158 |

1159 | ``` 1160 | 1161 |

⇡ Back to Top

1162 | 1163 | ### Devicons 1164 | 1165 | Devicons are the language and web tool icons you see mostly in people's profile README files. Check out [Devicons on GitHub](https://github.com/devicons/devicon/tree/master/icons) for the full list languages and tools and let me know if you find another/better list: 1166 | 1167 | ```markdown 1168 | 1169 | 1170 | https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg 1171 | 1172 | 1173 | 1174 |

1175 | ``` 1176 | 1177 | You will have to find all the language and tool icons that you want for your markdown files. Here are examples of Bootstrap and CSS3 devicons in 1) an `img` tag inside an `a` tag, 2) an `img` tag only, and 3) an `img` tag inside a `span` tag: 1178 | 1179 | #### Devicons in an anchor and image tag 1180 | 1181 |

1182 |

1183 | 1184 | #### Devicons in an image tag only 1185 | 1186 |

1187 |

1188 | 1189 | #### Devicons in a span and image tag 1190 | 1191 |

1192 |

1193 | 1194 | They are all inline except for the sole `img` tags. I think a span tag with `align="left"` or `center` would be best, although you could do `right` to have them stand out or as a visual change to the normal left alignment. 1195 | 1196 | When you see a profile README with language/tool icons that you would like to use, then go into the markdown to get a copy of the `src` and then add it to your profile README. Or go to the devicons repo linked above, search for your languages/tools in the icons folder and go into that folder. Click on an image, and if you like the image click the `Raw` button and copy the URL in the address bar to use as the `src` attribute. 1197 | 1198 | **NOTE 1**: The link attribute `target="_blank"` does not open links in a new tab. 1199 | 1200 | **NOTE 2**: You need to set the `width` and `height` for the devicon's `img` tags. Currently I have 40 or 48 pixels for my devicons. Find the pixel size that works for you. 1201 | 1202 |

⇡ Back to Top

1203 | 1204 | ### Mermaid Diagrams 1205 | 1206 | This is a new markdown element I just became aware of. Check out [Mermaid on GitHub](https://github.com/mermaid-js/mermaid#readme) for more information or go to their [docs page](https://mermaid.js.org/intro/). But it's basically a language code block that remders various diagrams with very specific syntax. And the diagrams have buttons for, zoom in/out, position change, and popout box. Check this out: 1207 | 1208 | graph TD; 1209 | A-->B; 1210 | A-->C; 1211 | B-->D; 1212 | C-->D; 1213 | 1214 | ```mermaid 1215 | graph TD; 1216 | A-->B; 1217 | A-->C; 1218 | B-->D; 1219 | C-->D; 1220 | ``` 1221 | 1222 | Or this 1223 | 1224 | flowchart LR 1225 | 1226 | A[Hard] -->|Text| B(Round) 1227 | B --> C{Decision} 1228 | C -->|One| D[Result 1] 1229 | C -->|Two| E[Result 2] 1230 | 1231 | ```mermaid 1232 | flowchart LR 1233 | 1234 | A[Hard] -->|Text| B(Round) 1235 | B --> C{Decision} 1236 | C -->|One| D[Result 1] 1237 | C -->|Two| E[Result 2] 1238 | ``` 1239 | 1240 | As I learn more I will add more but this is really cool! Check out my file `mermaid.md` for in-depth notes. 1241 | 1242 |

⇡ Back to Top

1243 | 1244 | ### HTML entities 1245 | 1246 | This actually is not a markdown thing but it's nice having a list for use in your README files. This would be helpful if you have a client needing work with a science website, math site, music site, etc. 1247 | 1248 | Bold, Italic and strikethough work for some of the elements below but not for all of them. And strikethorugh works the least of all. It's up for you to test them. Here is my list: 1249 | 1250 |
1251 | 1252 | **Business & Financial**: 1253 | | Entity | Result| Title | 1254 | | ---- | ---- | ---- | 1255 | | `©` | © | Copyright | 1256 | | `℗` | ℗ | Sound Copyright | 1257 | | `™` | ™ | Trademark | 1258 | | `®` | ® | Registered TM | 1259 | | `$` | $ | Dollar | 1260 | | `¢` | ¢ | Cent | 1261 | | `£` | £ | Pound | 1262 | | `€` | € | Euro | 1263 | | `✉` | ✉ | Envelope | 1264 | | `✓` | ✓ | Check mark | 1265 | | `✎` | ✎ | Pencil | 1266 | | `✒` | ✒ | Pen tip | 1267 | | `✆` | ✆ | Phone | 1268 | | `✂` | ✂ | Scissors | 1269 | | `⚠` | ⚠ | Warning | 1270 | 1271 |
1272 | 1273 | **Directional**: 1274 | | Entity | Result| Title | 1275 | | ---- | ---- | ---- | 1276 | | `←` | ← | Left arrow | 1277 | | `→` | → | Right arrow | 1278 | | `↑` | ↑ | Up arrow | 1279 | | `↓` | ↓ | Down arrow | 1280 | | `↖` | ↖ | Northwest arrow | 1281 | | `↗` | ↗ | Northeast arrow | 1282 | | `↘` | ↘ | Southeast arrow | 1283 | | `↙` | ↙ | Southwest arrow | 1284 | | `▲` | ▲ | Up triangle | 1285 | | `▼` | ▼ | Down triangle | 1286 | | `▶` | ▶ | Right triangle | 1287 | | `◀` | ◀ | Left triangle | 1288 | | `➢` | ➢ | Arrowhead | 1289 | | `➛` | ➛ | Drafting point | 1290 | 1291 |
1292 | 1293 | **Math and science**: 1294 | | Entity | Result| Title | 1295 | | ---- | ---- | ---- | 1296 | | `°` | ° | Degree | 1297 | | `±` | ± | Plus minus | 1298 | | `²` | 3² | Supercript 2 | 1299 | | `₂` | H₂O | Subscript 2 | 1300 | | `₃` | NO₃| Subscript 3 | 1301 | | `¼` | ¼ | 1/4 fraction | 1302 | | `⅜` | ⅜ | 3/8 fraction | 1303 | | `×` | × | Multiplication | 1304 | | `÷` | ÷ | Division | 1305 | | `−` | − | Subtraction | 1306 | | `∅` | ∅ | Empty | 1307 | | `Φ` | Φ | Phi | 1308 | | `π` | π | Pi | 1309 | | `Ω` | Ω | Omega | 1310 | | `∑` | ∑ | Sum, Sigma | 1311 | | `√` | √ | Square root | 1312 | | `∞` | ∞ | Infinity | 1313 | | `∼` | ∼ | Proportional | 1314 | | `≈` | ≈ | Approximately | 1315 | | `≠` | ≠ | Not equal | 1316 | | `≤` | ≤ | Less or equal to | 1317 | | `≥` | ≥ | Greater or equal | 1318 | | `∠` | ∠ | Angle | 1319 | | `∡`| ∡ | Measured angle | 1320 | | `∨` | ∨ | Down angle | 1321 | 1322 | **NOTE**: For subscripts 0 thru 9, change the last number, e.g.: 1323 | 1324 | Zero₀ code = `₀` so change 8320 to 8321 for subscript 1 (One₁), change 8320 to 8322 for subscript 2 (Two₂), etc. 1325 | 1326 | 1329 | 1330 |
1331 | 1332 | **Music**: 1333 | | Entity | Result| Title | 1334 | | ---- | ---- | ---- | 1335 | | `♭`| ♭ | Music flat | 1336 | | `♮`| ♮ | Music natural | 1337 | | `♯`| ♯ | Music sharp | 1338 | | `𝄪`| 𝄪 | Double Sharp | 1339 | | `𝄫`| 𝄫 | Double flat | 1340 | | `𝄞`| 𝄞 | G-clef | 1341 | | `𝄡`| 𝄡 | C-clef | 1342 | | `𝄢`| 𝄢 | F-clef | 1343 | | `𝄴`| 𝄴 | Common time | 1344 | | `𝄵`| 𝄵 | Cut time | 1345 | | `ø`| ø | Half-diminished 7th | 1346 | | `𝅜`| 𝅜 | Breve | 1347 | | `𝅝`| 𝅝 | Whole note | 1348 | | `𝅗𝅥`| 𝅗𝅥 | Half note | 1349 | | `♩`| ♩ | Quarter note | 1350 | | `𝅘𝅥`| 𝅘𝅥 | Quarter note | 1351 | | `♪`| ♪ | 8th note | 1352 | | `♪`| ♪ | 8th note | 1353 | | `𝅘𝅥𝅮`| 𝅘𝅥𝅮 | 8th note | 1354 | | `♫`| ♫ | Beamed 8th note | 1355 | | `𝅘𝅥𝅯`| 𝅘𝅥𝅯 | 16th note | 1356 | | `♬`| ♬ | Beamed 16th note | 1357 | | `𝄶`| 𝄶 | Octave | 1358 | | `𝄑` | 𝄑 | Fermata | 1359 | | `𝄒` | 𝄒 | Breath mark | 1360 | | `𝄓` | 𝄓 | Caesura | 1361 | | `𝄆` | 𝄆 | Left repeat | 1362 | | `𝄇` | 𝄇 | Right repeat | 1363 | | `𝄈` | 𝄈 | Repeat | 1364 | | `𝄉` | 𝄉 | Dal Segno | 1365 | | `𝄊` | 𝄊 | Da Capo | 1366 | | `𝄋` | 𝄋 | Segno | 1367 | | `𝄌` | 𝄌 | Coda | 1368 | | `𝆏` | 𝆏 | Piano | 1369 | | `𝆐` | 𝆐 | Mezzo | 1370 | | `𝆑` | 𝆑 | Forte | 1371 | | `𝆒` | 𝆒 | Crescendo | 1372 | | `𝆓` | 𝆓 | Decrescendo | 1373 | | `𝄀` | 𝄀 | Single barline | 1374 | | `𝄁` | 𝄁 | Double barline | 1375 | | `𝄂` | 𝄂 | Final barline | 1376 | | `𝆱` | 𝆱 | Glissando up | 1377 | | `𝆲` | 𝆲 | Glissando down | 1378 | | `𝆔` | 𝆔 | Grace note | 1379 | | `𝆗` | 𝆗 | Turn | 1380 | | `𝆘` | 𝆘 | Inverted turn | 1381 | | `𝄩` | 𝄩 | Full measure rest | 1382 | | `𝄺` | 𝄺 | Dbl whole note rest | 1383 | | `𝄻` | 𝄻 | Whole rest | 1384 | | `𝄼` | 𝄼 | Half rest | 1385 | | `𝄽` | 𝄽 | Quarter rest | 1386 | | `𝄾` | 𝄾 | Eigth rest | 1387 | | `𝄿` | 𝄿 | Sixteenth rest | 1388 | | `𝄔` | 𝄔 | Brace | 1389 | | `𝄕` | 𝄕 | Bracket | 1390 | | `𝅻` | 𝅻 | Accent | 1391 | | `𝅼` | 𝅼 | Staccato | 1392 | 1393 |
1394 | 1395 | **Miscellaneous**: 1396 | | Entity | Result| Title | 1397 | | ---- | ---- | ---- | 1398 | | `♠` | ♠ | Spade | 1399 | | `♣` | ♣ | Club | 1400 | | `♥` | ♥ | Heart | 1401 | | `♦` | ♦ | Diamond | 1402 | | `☆`| ☆ | Star | 1403 | | `♔`| ♔ | King | 1404 | | `♕`| ♕ | Queen | 1405 | | `♖`| ♖ | Rook | 1406 | | `♗`| ♗ | Bishop | 1407 | | `♘`| ♘ | Knight | 1408 | | `♙`| ♙ | Pawn | 1409 | | `★`| ★ | Filled star | 1410 | | `♀`| ♀ | Female | 1411 | | `♂`| ♂ | Male | 1412 | | `¶` | ¶ | Paragraph | 1413 | | `§` | § | Selection sign | 1414 | | `✈` | ✈ | Airplane | 1415 | | `✗` | ✗ | Ballot X | 1416 | | `✘` | ✘ | Heavy Ballot X | 1417 | | `☀` | ☀ | Black Sun | 1418 | | `☼` | ☼ | White Sun | 1419 | | `☁` | ☁ | Cloud | 1420 | | `❄` | ❄ | Snowflake | 1421 | | `☂` | ☂ | Umbrella | 1422 | | `¬` | ¬ | Negation | 1423 | | `¯` | ¯ | Spacing Macron | 1424 | | `«` | « | Left quote | 1425 | | `»` | » | Right quote | 1426 | | `–` | – | En dash | 1427 | | `—` | — | Em dash | 1428 | | `⃠` | ⃠ | Circle slash | 1429 | | `☘` | ☘ | Shamrock | 1430 | | `☮` | ☮ | Peace symbol | 1431 | | `❤` | ❤ | Heavy heart | 1432 | 1433 |
1434 | 1435 | **Astrology**: 1436 | | Entity | Result| Title | 1437 | | ---- | ---- | ---- | 1438 | | `⊕` | ⊕ | Earth | 1439 | | `♁` | ♁ | Earth | 1440 | | `☉` | ☉ | Sun | 1441 | | `☾` | ☾ | Moon | 1442 | | `♈`| ♈ | Aries | 1443 | | `♉`| ♉ | Taurus | 1444 | | `♊`| ♊ | Gemini | 1445 | | `♋`| ♋ | Cancer | 1446 | | `♌`| ♌ | Leo | 1447 | | `♍`| ♍ | Virgo | 1448 | | `♎`| ♎ | Libra | 1449 | | `♏`| ♏ | Scorpio | 1450 | | `♐`| ♐ | Sagittarius | 1451 | | `♑`| ♑ | Capricorn | 1452 | | `♒`| ♒ | Aquarius | 1453 | | `♓`| ♓ | Pisces | 1454 | | `☿`| ☿ | Mercury | 1455 | | `♀`| ♀ | Venus| 1456 | | `♀`| ♀ | Venus| 1457 | | `♂`| ♂ | Mars | 1458 | | `♂`| ♂ | Mars | 1459 | | `♃`| ♃ | Jupiter | 1460 | | `♄`| ♄ | Saturn | 1461 | | `♅`| ♅ | Uranus | 1462 | | `♆`| ♆ | Neptune | 1463 | | `♇`| ♇ | Pluto | 1464 | | `☊`| ☊ | Ascending node | 1465 | | `☋`| ☋ | Descending node | 1466 | | `☌`| ☌ | Conjunction (0°) | 1467 | | `⚺`| ⚺ | Semi-sextile (30°) | 1468 | | `∠`| ∠ | Semi-square (45°) | 1469 | | `⚹`| ⚹ | Sextile (60°) | 1470 | | `☐`| ☐ | Square (90°) | 1471 | | ``| | Trine (120°) | | `⚻`| ⚻ | Quincunx (150°) | | `☍`| ☍ | Opposition (180°) | 1472 | 1473 |
1474 | 1475 | **Esoteric**: 1476 | | Entity | Result| Title | 1477 | | ---- | ---- | ---- | 1478 | | `ℵ`| ℵ | Aleph | 1479 | | `ℶ`| ℶ | Bet/Beth | 1480 | | `ℷ`| ℷ | Gimel | 1481 | | `ℸ`| ℸ | Dalet/Daleth | 1482 | | `☤`| ☤ | Caduceus Staff | 1483 | | `⚕`| ⚕ | Staff of Aesculapius | 1484 | | `☥`| ☥ | Ankh | 1485 | | `☦`| ☦ | Orthodox Cross | 1486 | | `☧`| ☧ | Chi Rho | 1487 | | `☨`| ☨ | Cross or Lorraine | 1488 | | `☩`| ☩ | Cross of Jerusalem | 1489 | | `☯`| ☯ | Yin Yan, Ying Yang | 1490 | | `☰`| ☰ | Heaven I-Ching | 1491 | | `☱`| ☱ | Lake | 1492 | | `☲`| ☲ | Fire | 1493 | | `☳`| ☳ | Thunder | 1494 | | `☴`| ☴ | Wind | 1495 | | `☵`| ☵ | Water | 1496 | | `☶`| ☶ | Mountain | 1497 | | `☷`| ☷ | Earth | 1498 | | `⚊`| ⚊ | Yang | 1499 | | `⚋`| ⚋ | Yin | 1500 | | `⚌`| ⚌ | Greater Yang | 1501 | | `⚍`| ⚍ | Greater Yin | 1502 | | `⚎`| ⚎ | Lesser Yang | 1503 | | `⚏`| ⚏ | Lesser Yin | 1504 | | `☸`| ☸ | Wheel of Dharma | 1505 | | `✡`| ✡ | Seal of Solomon | 1506 | | `✭`| ✭ | Pentagram | 1507 | 1508 | NOTE: I ned to get the number ranges for the categories of entities. Check out the first entry of HTML symbols on W3Schools called [UTF-8 General Punctuation](https://www.w3schools.com/charsets/ref_utf_punctuation.asp). 1509 | 1510 |
1511 | 1512 | **Hotkey list**: 1513 | | Key | Symbol | 1514 | | --- | --- | 1515 | | Option | ⌥ | 1516 | | Control | ⌃ | 1517 | | Command | ⌘ | 1518 | | Shift | ⇧ | 1519 | | Caps Lock | ⇪ | 1520 | | Tab | ⇥ | 1521 | | Esc | ⎋ | 1522 | | Power | ⌽ | 1523 | | Return | ↩ | 1524 | | Delete | ⌫ | 1525 | 1526 |

⇡ Back to Top

1527 | 1528 | --- 1529 | 1530 | ## HTML 1531 | 1532 | 1533 | 1534 | The one thing I want to look into is using videos, animated GIFs, more HTML tags in my markdown files, and also column layouts using tables. 1535 | 1536 | I used a GitHub generator for my Profile README. In there are `

`, ``, and `` tags. In the Details section above, there are `

`, `

`, and `

` tags. I found this gist called [HTML Tags You Can Use on GitHub](https://gist.github.com/seanh/13a93686bf4c2cb16e658b3cf96807f2). That document mentions some tags you can use. 1537 | 1538 | I tested every HTML tag that made sense. I skipped tags like `section`, `header`, `nav`, etc. Here is a breakdown of that testing. 1539 | 1540 | ### Block elements 1541 | 1542 | NOTE: I should not have pushed `index.html` because I was only using to test the syntax for some HTML tags. 1543 | 1544 | _Duplicates markdown_: `blockquote`, `h1` thru `h6`, `hr`, `ol` `ul` `li`, `pre`, `table` 1545 | 1546 | _No markdown equivalent_: `details` with `summary`, `dl` `dt` `dd` (indent), `div`, and `span`. 1547 | 1548 | > Is **align** an attribute? How do I find similar attributes like that? 1549 | 1550 | **Attributes**: 1551 | 1552 | > Is `align` an actual attribute or is it inline CSS? 1553 | 1554 | I have only found that the `align` attribute works, other than the obvious ones like `href` and `src`. Below are the HTML elements that worked when I used `align` though they may work for other elements: 1555 | 1556 | - `blockquote`: align (center, right) 1557 | - `h1` thru `h4`: align (center, right) 1558 | - `h5` and `h6`: align (center, right), very small font size! 1559 | - `div`: align (center, right) 1560 | - `p`: align (center, right) 1561 | - `pre`: align (center, right) - looks odd 1562 | - `ul`, `ol`, `li`: align (center, right) - looks odd 1563 | 1564 |

Testing alignment

1565 | 1566 |

1567 | testing align="center" in a pre block 
1568 |

1569 | 1570 | Unless there is a way to display the tags differently, then I do not see the point of using `pre`, `table`, `lists`, or `blockquote`. Especially the `table` tag since there are a lot of tags you need to enter. 1571 | 1572 |

⇡ Back to Top

1573 | 1574 | ### Inline elements 1575 | 1576 | > `img` tags display as block level unless nested in table cells or `` tags 1577 | 1578 | _Duplicates markdown_: ``, `code`, `img` (width, align [center, right]), `b` and `strong` (display as Bold), `del` and `s` (display as Strikethrough), `em` and `i` and `var` (display as Italic). 1579 | 1580 | _No markdown equivalent_: `br` (line break), `ins` and `u` (underline), `sup` and `sub` (superscript and subscript), `samp` (Monospaced font), `q` (quotes), `kbd` (keyboard keys), `span`. 1581 | 1582 | **Attributes notes**: 1583 | 1584 | - `a`: target="\_blank" does not work 1585 | - `img`: align, width, and height all work 1586 | 1587 | Some _Global attributes_ that may have a use: id, draggable, **style**, **title**, tabindex, contenteditable, autofocus. 1588 | 1589 | > What is **_align_**? Do all these accept inline CSS? 1590 | 1591 | The only tags worth using IMO: 1592 | 1593 | - `a` for anchor links with HTML entities in the link text 1594 | - `headings` align center or right 1595 | - `p` for align center or right 1596 | - `div` as visual dividers using dash (-) or underscore (\_) or equals (=) or other characters. But can't you just use the characters instead? 1597 | - `br` for line breaks of paragrpah text or as a alternate spacer to `div` 1598 | - `img` to set width and height and align center or right 1599 | - `ins` for underline (`u` is actually better but does not display on GitHub) 1600 | - `kbd` for keyboard keys 1601 | - `samp` for monospaced font as a styling choice 1602 | - `sup` and `sub` for superscript and subscript 1603 | - `dl` `dt` `dd` maybe for the indentation of the definition 1604 | 1605 |

⇡ Back to Top

1606 | 1607 | #### HTML tag examples 1608 | 1609 | The large gap above the title is from 2 `
` tags. Use only one for a normal separation. 1610 | 1611 | | HTML Tag | Result | 1612 | | :------- | :--------------------------------------------: | 1613 | | `ins` | underlined text | 1614 | | `u` | No underline on GitHub | 1615 | | `kbd` | CTRL+C, ENTER | 1616 | | `samp` | This is monospaced font | 1617 | | `sup` | 2³ | 1618 | | `sub` | H₂O | 1619 | 1620 |

H3 tag with align="center"

1621 |

Paragraph tag with align="center"

1622 |

H3 tag with align="right"

1623 |

Paragraph tag with align="right"

1624 | 1625 | > I think an H2 heading that is center aligned would look great but not a paragraph. When would align right look good? 1626 | 1627 | Here is an example of an HTML entity in an `` tag: ↑ HTML Entities Section
1628 | Here is an example of an Emoji in an `` tag: :smile: Emoji section 1629 | 1630 | **NOTE**: For my anchor links (same page) in my [Beginner Git Commands](https://github.com/Kernix13/beginner-git-commands) repo, I wanted to use a downward arrow that points to the right for my H3 sections. I could not do that with `[text](#text)` so I had to use an `` tag. In that same repo I use a `div` tag with underscores with spaces between them for a visual separation between the start of H2 sections and the end of the section above. Here is an example of an H3 with the arrow entity code with an `id` for the anchor link in the Table of Contents: 1631 | 1632 |

⤷ Commands after initial push

1633 | 1634 | And here are 2 images with `width="200px"` in a table. The first has `align="right"` and the second has `align="left"`: 1635 | 1636 | | | | 1637 | | :---------------------------------------------------------------: | :--------------------------------------------------------------: | 1638 | |

| 1639 | 1640 | It appears if you want to get 2 or more images/graphics on a row, you need to put them in table cells or nest them in `` tags. Note that the actual href values are to my website but they are linking to github and are links that open in a new page. Here is the image with a `title`, and a `

` tag with `align="center"` though you could use `align="right"` as well: 1641 | 1642 |

1643 | 1644 |
1645 | 1646 | **`dl`, `dt`, and `dd`** example (use for indentation): 1647 | 1648 |

Markdown Cheat Sheet: A quick source for making your readme files look great!

1652 | 1653 | ```markdown 1654 |

Markdown Cheat Sheet: A quick source for making your readme files look great!

1658 | ``` 1659 | 1660 | Pertaining to spacers in between sections, I am experimenting with 8-16px high PNG files with a gradient. I have one of those in my _Beginner Git Commands_ repo. I want to make one with the gradient colors used for dark and light mode here on GitHub. 1661 | 1662 | Also, let's look at the small font-size for H5 and H6 tags (Markdown version). Regular paragraph size in markdown equals the font-size for `h4` or `###`. Where/when would using these be useful? H6 or 6 hashes is slightly larger than the footnote text at the bottom. 1663 | 1664 | #### How about H4 as a comparison 1665 | 1666 | ##### Really small H5 heading 1667 | 1668 | ###### Even smaller text for an H6 1669 | 1670 | Here is code to copy instead of having to type it out each time: 1671 | 1672 | ``` 1673 |

Heading3

1674 | 1675 |

Paragraph

1676 | 1677 | whatever

1678 | 1679 |

1680 | ``` 1681 | 1682 | I will be adding notes here on how to add videos to markdown files on GitHub. Here is some examples that I got from [bobbyhadz.com](https://bobbyhadz.com/blog/embed-video-into-github-readme-markdown). I haven't added a link to a valid thumbnail but the video links to the 10:00 minute _Buck Bunny video_ and it opens in a new tab: 1683 | 1684 | [![Watch the video](./markdown-image.png)](https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164) 1685 | 1686 | [

](https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164) 1688 | 1689 |

⇡ Back to Top

1690 | 1691 | #### CSS Styles 1692 | 1693 | If all of the above is not enough to differentiate your markdown files from a plain vanilla MD file, then you can also add CSS. You can not add a style sheet but you can add HTML as seen above. Which means you can add a ` 1714 | 1715 |

Markdown css styles

1716 | 1717 |

1718 |

Box 1

1719 |

Box 2

1720 |

Box 3

1721 |

1722 | ``` 1723 | 1724 | 1740 | 1741 |

1742 | Markdown css styles 1743 |

1744 | 1745 |

1746 |

1747 | Box 1 1748 |

1749 |

1750 | Box 2 1751 |

1752 |

1753 | Box 3 1754 |

1755 |

1756 | 1757 | > _**BAD NEWS**: You can not use a ` 24 | 25 | 26 | 27 |

28 | 29 |

Testing certain tags and related syntax

30 | 31 |

32 | 33 | 34 | {35 |}^{a 36 | 2 37 |} 38 | + 39 | {40 |}^{b 41 | 2 42 |} 43 | 44 | = 45 | {46 |}^{c 47 | 2 48 |} 49 | 50 |

51 |
52 |

You can use CSS to style your HTML.

54 | 55 |
56 | Nineteen Eighty-Four 57 |
58 | Nineteen Eighty-Four (without link) 59 |
60 |

li below the body tag, br tag above but not below

61 |

62 |

li in a div tag, no br tags above or below

63 |

64 |

65 |

li in a paragraph tag, br tag below

66 |

67 |
68 |

72 | 73 |

A validator is a program that checks for syntax errors in code or documents.

74 | 75 |

78 | 79 |
80 |
81 | 82 | 85 | 86 | 94 | 95 |

The Cure will be celebrating their 40th anniversary on July 7 in London's Hyde 96 | Park.

97 | 98 |

The concert starts at 20:00 and you'll be able to enjoy the band for at least 2h 30m.

100 | 101 |

107 | 108 |

109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 |

Items	Expenditure
Donuts	3,000
Stationery	18,000
Totals	21,000

134 |

135 | 136 | 137 | -------------------------------------------------------------------------------- /markdown-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kernix13/markdown-cheatsheet/9937d4451649b1091eca14be3926cd8fcff467b6/markdown-image.png -------------------------------------------------------------------------------- /mermaid.md: -------------------------------------------------------------------------------- 1 | # Mermaid Markdown Diagrams 2 | 3 | - [Mermaid on GitHub](https://github.com/mermaid-js/mermaid#readme) 4 | - [Mermaid docs page](https://mermaid.js.org/intro/) 5 | 6 | > _To preview the charts in VS Code you need the extension Markdown Preview Mermaid Support_ 7 | 8 | ## Syntax and examples 9 | 10 | Use `mermaid` as the code block language 11 | 12 | ```mermaid 13 | 14 | ``` 15 | 16 | Keywords and syntax 17 | 18 | 1. `TD`, `LR` 19 | 1. `%%{``}%%` - for comments 20 | 1. `-->` 21 | 1. `->>` 22 | 1. `-->>` 23 | 1. `:` 24 | 1. `()` 25 | 1. `[]` 26 | 1. `{}` 27 | 1. `[*]` 28 | 1. Diagram Types: graph, gantt, classDiagram, gitGraph, erDiagram, journey, quadrantChart, sequenceDiagram, stateDiagram-v2, pie, requirementDiagram, C4Context, mindmap, timeline, zenuml, sankey-beta, 29 | 1. `end`, participant, loop, Note, right of, dateFormat, title, section, state, as, excludes, click, style, fill, subgraph, class, autonumber, activate, deactivate, 30 | 1. `}|..|{`, `||--o{`, `||--|{`, `[(Database)]`, `((This is the text in the circle))` 31 | 1. node-name(Your Text Here) 32 | 1. `click` nodename "href" 33 | 1. `id))I am a bang((` 34 | 1. `id)I am a cloud(` 35 | 1. 36 | 37 | ## Flowchart example 38 | 39 | - `flowchart` or use graph, 40 | 41 | ```mermaid 42 | flowchart 43 | 44 | subgraph Nodes 45 | node-one(Label 1) 46 | 47 | node-two((Label 2)) 48 | node-three([Label 3]) 49 | node-four{Label 4} 50 | node-five{{Label 5}} 51 | style node-five fill:green 52 | 53 | node-one-->node-two 54 | node-two-->node-three 55 | node-three-->|No|node-four 56 | node-three-->|Yes|node-five 57 | end 58 | 59 | subgraph Fruit 60 | grape[Grapes] 61 | apple(Apples) 62 | 63 | grape-->apple 64 | end 65 | 66 | Nodes-->Fruit 67 | 68 | ``` 69 | 70 | - `-->` - used to connect 2 nodes 71 | - `[]` - square corners (default) 72 | - `()` - rectangle node with rounded corners 73 | - `(())` - circle node 74 | - `([])` - pill shaped node 75 | - `{}` - diamond shaped node 76 | - `{{}}` - 6 sided node 77 | - `|Line Label|` - add a label to an arrow line 78 | - `LR` - chart goes left to right, `TD` chart gors top down, `BT` for bottom to top, nothing is default 79 | 80 | ## Sequence diagram example 81 | 82 | ```mermaid 83 | sequenceDiagram 84 | autonumber 85 | participant Client 86 | participant OAuthProvider 87 | participant Server 88 | Client->>OAuthProvider: Request access 89 | activate OAuthProvider 90 | OAuthProvider->>Client: Access token 91 | deactivate OAuthProvider 92 | Client->>Server: Request resource 93 | activate Server 94 | Server->>OAuthProvider: Validate token 95 | activate OAuthProvider 96 | OAuthProvider->>Server: Token valid 97 | deactivate OAuthProvider 98 | Server->>Client: Send resource 99 | deactivate Server 100 | ``` 101 | 102 | - `autonumber` to number each sequence 103 | - `->>` - used in sequence diagrams to connect nodes 104 | - activate, deactivate 105 | 106 | ## Class diagram example 107 | 108 | ```mermaid 109 | classDiagram 110 | class Order { 111 | +OrderStatus status 112 | } 113 | class OrderStatus { 114 | <> 115 | FAILED 116 | PENDING 117 | PAID 118 | } 119 | class PaymentProcessor { 120 | <> 121 | -String apiKey 122 | #connect(String url, JSON header) 123 | +processPayment(Order order) OrderStatus 124 | } 125 | class Customer { 126 | +String name 127 | } 128 | Customer <|-- PrivateCustomer 129 | Customer <|-- BusinessCustomer 130 | PaymentProcessor <|-- StripeProcessor 131 | PaymentProcessor <|-- PayPalProcessor 132 | Order o-- Customer 133 | ``` 134 | 135 | - `<>` 136 | - `<>` 137 | - `-` indicates private 138 | - `+` indicates public 139 | - `#` indicates protected 140 | - inheritance, composition, and aggregation relationships 141 | - inheritance: class and sub-class relationship - use `<|--` 142 | - composition vs aggregation: special cases of associations 143 | - use `o--` for aggregation 144 | - use `*--` for composition 145 | 146 | ## Entity Relationship Diagram example 147 | 148 | This is more generic than a class diagram 149 | 150 | ```mermaid 151 | erDiagram 152 | Customer ||--o{ Order: places 153 | Order ||--o{ LineItem: contains 154 | Customer { 155 | String id 156 | String name 157 | } 158 | Order { 159 | String id 160 | OrderStats status 161 | } 162 | LineItem { 163 | String item-number 164 | String description 165 | int quantity 166 | int price 167 | } 168 | ``` 169 | 170 | - use `||--o{`, no 171 | - `|o` means 0 or 1 172 | - `||` exactly 1 173 | - `o{` 0 or more 174 | - `|{` 1 or more 175 | - attributes: 176 | 177 | ## Gantt chart 178 | 179 | ```mermaid 180 | gantt 181 | title A Gantt Diagram 182 | dateFormat YYYY-MM-DD 183 | tickInterval 5day 184 | section Main 185 | A task :a1, 2014-01-01, 30d 186 | Another task :after a1, 20d 187 | section Secondary 188 | Secondary :2014-01-12, 12d 189 | another task :24d 190 | ``` 191 | 192 | ```mermaid 193 | gantt 194 | dateFormat HH:mm 195 | %% This is a comment 196 | axisFormat %H:%M 197 | Initial milestone : milestone, m1, 17:49, 2m 198 | Task A : 10m 199 | Task B : 5m 200 | Final milestone : milestone, m2, 18:08, 4m 201 | ``` 202 | 203 | - dateFormat 204 | - axisFormat 205 | - tickInterval: `/^([1-9][0-9]*)(minute|hour|day|week|month)$/;` 206 | - weekday 207 | - `%%` = comment 208 | 209 | ## gitGraph example 210 | 211 | ```mermaid 212 | gitGraph 213 | commit 214 | commit 215 | branch develop 216 | checkout develop 217 | commit 218 | commit type: HIGHLIGHT 219 | checkout main 220 | merge develop 221 | commit 222 | commit 223 | ``` 224 | 225 | - gitGraph 226 | - where are the git hashes coming from? 227 | - commit 228 | - id, tag, type - `commit id: "your_custom_id"` - `commit id: "Normal" tag: "v1.0.0"` 229 | - branch 230 | - checkout 231 | - merge 232 | - `%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%` 233 | - the page on this is really long... 234 | 235 | ## Journey diagram 236 | 237 | ```mermaid 238 | journey 239 | title My working day 240 | section Go to work 241 | Make tea: 5: Me 242 | Go upstairs: 3: Me 243 | Do work: 1: Me, Cat 244 | section Go home 245 | Go downstairs: 5: Me 246 | Sit down: 5: Me 247 | ``` 248 | 249 | - journey, title, section 250 | - `Task name: : ` 251 | 252 | ## quadrantChart diagram 253 | 254 | ```mermaid 255 | quadrantChart 256 | title Reach and engagement of campaigns 257 | x-axis Low Reach --> High Reach 258 | y-axis Low Engagement --> High Engagement 259 | quadrant-1 We should expand 260 | quadrant-2 Need to promote 261 | quadrant-3 Re-evaluate 262 | quadrant-4 May be improved 263 | Campaign A: [0.3, 0.6] 264 | Campaign B: [0.45, 0.23] 265 | Campaign C: [0.57, 0.69] 266 | Campaign D: [0.78, 0.34] 267 | Campaign E: [0.40, 0.34] 268 | Campaign F: [0.35, 0.78] 269 | ``` 270 | 271 | > This chart is not displaying on GitHub?!? 272 | 273 | - title, 274 | - x-axis: `x-axis --> ` or `x-axis ` 275 | - y-axis: `y-axis --> ` or `y-axis ` 276 | - quadrant-1 - top right, moves counter-clockwise - `quadrant-1 ` 277 | - quadrant-2, quadrant-3, quadrant-4 278 | - `: [x, y]` - x and y value is in the range 0 - 1 279 | 280 | ## Pie chart 281 | 282 | ```mermaid 283 | pie 284 | title Pets adopted by volunteers 285 | "Dogs" : 386 286 | "Cats" : 185 287 | "Rabbits" : 85 288 | ``` 289 | 290 | - `%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%` 291 | 292 | ## requirementDiagram 293 | 294 | ```mermaid 295 | requirementDiagram 296 | 297 | requirement test_req { 298 | id: 1 299 | text: the test text. 300 | risk: high 301 | verifymethod: test 302 | } 303 | 304 | element test_entity { 305 | type: simulation 306 | } 307 | 308 | test_entity - satisfies -> test_req 309 | ``` 310 | 311 | - `{name of source} - -> {name of destination}` 312 | 313 | ## C4Context 314 | 315 | ```mermaid 316 | C4Context 317 | title System Context diagram for Internet Banking System 318 | Enterprise_Boundary(b0, "BankBoundary0") { 319 | Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") 320 | Person(customerB, "Banking Customer B") 321 | Person_Ext(customerC, "Banking Customer C", "desc") 322 | 323 | Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") 324 | 325 | System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") 326 | 327 | Enterprise_Boundary(b1, "BankBoundary") { 328 | 329 | SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") 330 | 331 | System_Boundary(b2, "BankBoundary2") { 332 | System(SystemA, "Banking System A") 333 | System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.") 334 | } 335 | 336 | System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") 337 | SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") 338 | 339 | Boundary(b3, "BankBoundary3", "boundary") { 340 | SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.") 341 | SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") 342 | } 343 | } 344 | } 345 | 346 | BiRel(customerA, SystemAA, "Uses") 347 | BiRel(SystemAA, SystemE, "Uses") 348 | Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") 349 | Rel(SystemC, customerA, "Sends e-mails to") 350 | 351 | UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") 352 | UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") 353 | UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") 354 | UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") 355 | UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") 356 | 357 | UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") 358 | ``` 359 | 360 | 5 types of C4 charts are supported. 361 | 362 | 1. System Context (C4Context) 363 | 2. Container diagram (C4Container) 364 | 3. Component diagram (C4Component) 365 | 4. Dynamic diagram (C4Dynamic) 366 | 5. Deployment diagram (C4Deployment) 367 | 368 | ## mindmap 369 | 370 | ```mermaid 371 | mindmap 372 | root((mindmap)) 373 | Origins 374 | Long history 375 | ::icon(fa fa-book) 376 | Popularisation 377 | British popular psychology author Tony Buzan 378 | Research 379 | On effectiveness
and features 380 | On Automatic creation 381 | Uses 382 | Creative techniques 383 | Strategic planning 384 | Argument mapping 385 | Tools 386 | Pen and paper 387 | Mermaid 388 | ``` 389 | 390 | With icons: 391 | 392 | ```mermaid 393 | mindmap 394 | Root 395 | A 396 | ::icon(fa fa-book) 397 | B(B) 398 | ::icon(mdi mdi-skull-outline) 399 | ``` 400 | 401 | syntax: 402 | 403 | ``` 404 | mindmap 405 | Root 406 | A 407 | B 408 | C 409 | ``` 410 | 411 | ## timeline 412 | 413 | ```mermaid 414 | timeline 415 | title History of Social Media Platform 416 | 2002 : LinkedIn 417 | 2004 : Facebook 418 | : Google 419 | 2005 : Youtube 420 | 2006 : Twitter 421 | ``` 422 | 423 | Syntax: 424 | 425 | ``` 426 | {time period} : {event} 427 | 428 | {time period} : {event} : {event} 429 | 430 | {time period} : {event} 431 | : {event} 432 | : {event} 433 | ``` 434 | 435 | ## ZenUML 436 | 437 | ```mermaid 438 | zenuml 439 | title Annotators 440 | @Actor Alice 441 | @Database Bob 442 | Alice->Bob: Hi Bob 443 | Bob->Alice: Hi Alice 444 | ``` 445 | 446 | > Not displaying in VS Code?!? 447 | 448 | ## State diagrams 449 | 450 | ```mermaid 451 | stateDiagram 452 | [*] --> Still 453 | Still --> [*] 454 | 455 | Still --> Moving 456 | Moving --> Still 457 | Moving --> Crash 458 | Crash --> [*] 459 | ``` 460 | 461 | > Not displaying in VS Code?!? 462 | 463 | ## Sankey diagram (beta) 464 | 465 | ```mermaid 466 | sankey-beta 467 | 468 | %% source,target,value 469 | Electricity grid,Over generation / exports,104.453 470 | Electricity grid,Heating and cooling - homes,113.726 471 | Electricity grid,H2 conversion,27.14 472 | ``` 473 | 474 | > Not displaying in VS Code?!? 475 | -------------------------------------------------------------------------------- /open-source-contributing.md: -------------------------------------------------------------------------------- 1 | # Open Source & Contributing Notes 2 | 3 | ## Basic README.md format 4 | 5 | Try to include the following section headings in your repo README file: 6 | 7 | 8 | 1. Description - absolutely necessary 9 | 2. Table of Contents - only include if your README is long 10 | 3. Installation - not necessary if it's a simple HTML, CSS & vanilla JS project. 11 | 4. Usage - not sure about this one 12 | 5. License - not necessary if it is a simple project 13 | 6. Contributing - you need this if you want contributors 14 | 7. Code of Conduct - same as above 15 | 7. Tests - skip if you do have a testing library as part of the repo 16 | 8. Questions - this could be helpful 17 | 18 | ## Best Of 19 | 20 | 1. License for your repo: [Choose a License](https://choosealicense.com/) 21 | 1. I prefer the [MIT Version](https://choosealicense.com/licenses/mit/). Just enter your GitHub repo link in the right sidebar. 22 | 1. Contributing Templates: 23 | 1. [Contributor guidelines template](https://opensource.com/life/16/3/contributor-guidelines-template-and-tips) 24 | 1. Check [contributing-template](https://github.com/nayafia/contributing-template/blob/master/CONTRIBUTING-template.md) 25 | 1. [Example 1](https://gist.github.com/briandk/3d2e8b3ec8daf5a27a62), [Example 2](https://gist.github.com/PurpleBooth/b24679402957c63ec426) 26 | 1. [Contributor Covenant](https://www.contributor-covenant.org/): A Code of Conduct for Open Source Communities 27 | 28 | ## Open Source 29 | 30 | Notes from Eddie Jaoude & freeCodeCamp 31 | 32 | - Labels: used to find your repos - need issues with labels – javascript, 33 | - review other people’s Prs to see what they do 34 | - find gist: [GitHub starred gists](https://gist.github.com/starred) 35 | - Must have elements in all OS projects: 36 | 37 | 1. License: If a project does not have an open-source license, then it is not open source 38 | 1. The license helps protect contributors and users. Businesses and savvy developers usually won't touch a project without this protection: [Choose a License](https://choosealicense.com/) 39 | 1. README file: explains how to get started with a project. It lists the requirements for contributing to the project 40 | 1. A good README should contain everything a potential contributor would want to know about the project 41 | 1. Contribution Guidelines: These are guidelines that help people who contribute to the project know exactly what is expected from them: [Contributor guidelines template](https://opensource.com/life/16/3/contributor-guidelines-template-and-tips) - no longer any good 42 | 1. Code of Conduct: a document that establishes your expectations for how your contributors and participants behave: [Code of Conduct](https://opensource.guide/code-of-conduct/) 43 | 44 | - Issue Tracker – a contributor can create an issue and link it to a pull request and fellow contributors can opt in to try and fix it 45 | - Pull Requests - tell others about changes you've pushed to a branch in a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with the collaborator and add follow-up commits before the're merged into the base branch 46 | - do everything on the insights tab to make sure your repos are good 47 | 48 | ## Places to find contributions 49 | 50 | 1. [First timers only](https://www.firsttimersonly.com/) 51 | 1. [GitHub first contributions](https://github.com/firstcontributions/first-contributions) 52 | 1. [Specref API](https://github.com/tobie/specref) - not sure what this one is 53 | 1. [GitHub Docs](https://github.com/github/docs) 54 | 1. Find new issues: [Mariner Issue Collector](https://github.com/indeedeng/Mariner-Issue-Collector) 55 | 1. [GitHub Odoo](https://github.com/odoo/odoo): a suite of web based open source business apps 56 | 1. [GitHub Good First Issues](https://github.com/iedr/goodfirstissues) 57 | 1. [Good First Issues](https://24pullrequests.com/) and [Good First Issues website](Good First Issues) 58 | 1. [CodeTriage](https://www.codetriage.com/) 59 | 60 | ## How to choose an Open-Source Project 61 | 62 | 1. Check if it has a license, 63 | 2. check the date of the last commit (is it recent?), 64 | 3. check the # of contributors, 65 | 4. how often do they make commits? 66 | 67 | Also, look for: 68 | 69 | 1. open issues, 70 | 2. time for maintainers to respond, 71 | 3. are there active discussions, 72 | 4. are issues closed regularly, 73 | 5. are there open pull requests 74 | 75 | ### Tips 76 | 77 | - Also search: `is:open is:issue archived:false label:"good first issue" language"javascript"` 78 | - Another Tip: search the project for "To D" or "ToDo" or "To-Do"- they often get forgotten about – find one, raise an issue, then fix it 79 | 80 | ## How to make money from open source 81 | 82 | Github now has a sponsorship 83 | 84 | - People can sponsor and github doesn’t take anything but they can match it 85 | - Click the Settings tab and go to the FEatures section 86 | - Click the checkbox for Sponsorships 87 | - There is a card with the title _Display a "Sponsor" button_ with the text _Add links to GitHub Sponsors or third-party methods your repository accepts for financial contributions to your project_ 88 | - There is also a button that says _Set up sponsor button_ 89 | - Clicking it takes you to a file named _FUNDING.yml_ - in that file are notes to add links to things like Patreon, Open Collective, Ko-fi and many more. 90 | 91 | ## TAGS 92 | 93 | A tag/release is where you are happy with the state of the project> It means it is a production ready asset. A tag is made up of multiple comits between tags – or they are after commits, a save point – and a tag is a collection of commits. 94 | 95 | ## Miscellaneous 96 | 97 | `config.yml` 98 | 99 | - YAML/yml files start with 3 dashes and end with 3 dots which allows you start and stop the the yaml data and allows you to have multiple in one file 100 | - Though the ending 3 dots are optional – you have key-value pairs 101 | - Values can be strings, integers, floats, booleans, arrays, lists and dictionaries – use the vscode extension YAML 102 | - Can be `.yml` or `.yaml` – both are good – yaml can detect strings so you don’t actually need the quotes but you need quotes when you have numbers/integer that needs to be interpreted as a string 103 | - For lists use an slight index and a dash then space like markdown 104 | - The dictionary data type has elements that have elements (Attibutes) inside it – or more importantly you can do nesting 105 | - It's important to have some pull requests and issues - and branches greater than 1 – main/master, develop, feature1, feature2, … but not more than 9, 106 | - Open source is more about communication and collaboration 107 | - README – can include technologies needed to run the app like node or MySQL – what is the goal of the project, why it is important, why people should get involved 108 | - Great GitHub README profiles: https://github.com/nhcarrigan/nhcarrigan | https://github.com/santoshyadavdev/santoshyadavdev | https://github.com/salitha10/salitha10 | https://github.com/iresharma/iresharma | https://github.com/joesinghh | 109 | - Great link: [Awesome GitHub Profile README](https://github.com/abhisheknaiidu/awesome-github-profile-readme) 110 | - [Awesome GitHub profiles](https://github.com/EddieHubCommunity/awesome-github-profiles/blob/main/profiles.md) 111 | -------------------------------------------------------------------------------- /shields.md: -------------------------------------------------------------------------------- 1 | # Shields io 2 | 3 | [Shields.io](https://shields.io/) 4 | 5 | Below are all the Shields.io badges for GitHub. I note the ones that would be good if you are a beginner with Git/GitHub. 6 | 7 | ## Build 8 | 9 | > Cirrus CI is a modern _Continuous Integration_ system built for the era of cloud computing. Cirrus CI supports Linux, Windows, macOS and FreeBSD environments... 10 | 11 | Continuous Improvement badges 12 | 13 | 1. Cirrus CI - Base Branch build status: `/cirrus/github/:user/:repo` 14 | 1. Cirrus CI - Base Specific build status:`/cirrus/github/:user/:repo/:branch` 15 | 1. Cirrus CI - Base Specific task build status`/cirrus/github/:user/:repo?task=build_docker` 16 | 1. Cirrus CI - task & script build:`/cirrus/github/:user/:repo?script=test&task=build_docker` 17 | 18 | Actions badges 19 | 20 | 1. GitHub Workflow status: `/github/actions/workflow/status/:user/:repo/:workflow+?branch=main` 21 | 1. GitHub Workflow status (with event): `/github/actions/workflow/status/:user/:repo/:workflow+?branch=main&event=push` 22 | 23 | Branch, tags, and PR checks (good for beginners maybe?): 24 | 25 | 1. GitHub branch checks state: `/github/checks-status/:user/:repo/:ref` 26 | 1. GitHub commit checks state: `/github/checks-status/:user/:repo/:ref` 27 | 1. GitHub tags checks state: `/github/checks-status/:user/:repo/:ref` 28 | 1. GitHub pull request checks state: `/github/status/s/pulls/:user/:repo/:number` 29 | 1. GitHub pull request check context: `/github/status/contexts/pulls/:user/:repo/:number` 30 | 31 | Scrutinizer build (?) 32 | 33 | 1. Scrutinizer build (GitHub/BitBucket): `/scrutinizer/build/:vcs/:user/:repo/:branch?` 34 | 35 | ## Code Coverage 36 | 37 | No clue what these are: 38 | 39 | 1. nycrc config on GitHub: `/nycrc/:user/:repo?config=.nycrc&preferredThreshold=lines` 40 | 1. Scrutinizer coverage (GitHub/BitBucket): `/scrutinizer/coverage/:vcs/:user/:repo/:branch?` 41 | 42 | ## Test Results 43 | 44 | I'm doing a search on _GitHub_ and there are no shields on this page specifically for GitHub. It appears they are for the following testing software: 45 | 46 | 1. AppVeyor 47 | 1. **Azure**: see this one in job openings a lot 48 | 1. **Jenkins**: also a common one 49 | 1. Sonar 50 | 1. TAS 51 | 1. Testspace 52 | 53 | > No Puppeteer? 54 | 55 | ## Analysis 56 | 57 | Language and search (These would be good for a beginners repo): 58 | 59 | 1. **GitHub language count**: `/github/languages/count/:user/:repo` 60 | 1. **GitHub search hit counter**: `/github/search/:user/:repo/:query` 61 | 1. **GitHub top language**: `/github/languages/top/:user/:repo` 62 | 63 | Scrutinizer & Snyk (?): 64 | 65 | 1. Scrutinizer code quality (GitHub/BitBucket): `/scrutinizer/quality/:vcs/:user/:repo/:branch?` 66 | 1. Snyk Vulnerabilities for GitHub repo: `/snyk/vulnerabilities/github/:user/:repo` 67 | 1. Snyk Vulnerabilities for GitHub repo (specific manifest): `/snyk/vulnerabilities/github/:user/:repo/:manifestFilePath` 68 | 69 | ## Chat 70 | 71 | Badges for: 72 | 73 | 1. **Discord**: 74 | 1. [general](/discord/:serverId) 75 | 1. [topics](/discourse/topics?server=https%3A%2F%2Fmeta.discourse.org) 76 | 1. [users](/discourse/users?server=https%3A%2F%2Fmeta.discourse.org) 77 | 1. [posts](/discourse/posts?server=https%3A%2F%2Fmeta.discourse.org) 78 | 1. [likes](/discourse/likes?server=https%3A%2F%2Fmeta.discourse.org) 79 | 1. [status](/discourse/status?server=https%3A%2F%2Fmeta.discourse.org) 80 | 2. Glitter: skip 81 | 3. Matrix: skip 82 | 4. Stack Exchange 83 | 1. [monthly questions]((/stackexchange/:stackexchangesite/qm/:query)) 84 | 1. [reputation](/stackexchange/:stackexchangesite/r/:query) 85 | 1. [questions](/stackexchange/:stackexchangesite/t/:query) 86 | 87 | ## Dependencies 88 | 89 | Depfu (?): 90 | 91 | 1. GitHub Pipenv locked dependency version: `/github/pipenv/locked/dependency-version/:user/:repo/:kind?/:packageName` 92 | 1. GitHub Pipenv locked dependency version (branch): `/github/pipenv/locked/dependency-version/:user/:repo/:kind?/:packageName/:branch` 93 | 1. Libraries.io dependency status for GitHub repo: `/librariesio/github/:user/:repo` 94 | 95 | ## Size 96 | 97 | Some of these would be good for a beginner's repo if you have a lot of files, folders, etc: 98 | 99 | 1. GitHub code size in bytes: `/github/languages/code-size/:user/:repo` 100 | 1. **GitHub repo file count**: `/github/directory-file-count/:user/:repo` 101 | 1. GitHub repo file count (custom path): `/github/directory-file-count/:user/:repo/:path` 102 | 1. GitHub repo directory count: `/github/directory-file-count/:user/:repo?type=dir` 103 | 1. GitHub repo directory count (custom path): `/github/directory-file-count/:user/:repo/:path?type=dir` 104 | 1. **GitHub repo file count (file type)**: `/github/directory-file-count/:user/:repo?type=file` 105 | 1. GitHub repo file count (custom path & file type): `/github/directory-file-count/:user/:repo/:path?type=file` 106 | 1. **GitHub repo file count (fiel extension)**: `/github/directory-file-count/:user/:repo/:path?extension=js&type=file` 107 | 1. GitHub repo size: `/github/repo-size/:user/:repo` 108 | 1. GitHub repo file size in bytes: `/github/size/:user/:repo/:path*` 109 | 1. GitHub repo file size in bytes on a specified ref (branch/commit/tag): `/github/size/:user/:repo/:path*?branch=master` 110 | 111 | ## Downloads 112 | 113 | Only good for repos that have a release(s) 114 | 115 | 1. GitHub all releases: `/github/downloads/:user/:repo/total` 116 | 1. GitHub release (latest by date): `/github/downloads/:user/:repo/:tag/total` 117 | 1. GitHub release (latest by SemVer): `/github/downloads/:user/:repo/:tag/total?sort=semver` 118 | 1. GitHub release (latest by date including pre-release): `/github/downloads-pre/:user/:repo/:tag/total` 119 | 1. GitHub release (latest by SemVer including pre-releases): `/github/downloads-pre/:user/:repo/:tag/total?sort=semver` 120 | 1. GitHub release (by tag): `/github/downloads/:user/:repo/:tag/total` 121 | 1. GitHub release (latest by date & asset): `/github/downloads/:user/:repo/:tag/:assetName` 122 | 1. GitHub release (latest by SemVer & asset): `/github/downloads/:user/:repo/:tag/:assetName?sort=semver` 123 | 1. GitHub release (latest by date & asset including pre-releases): `/github/downloads-pre/:user/:repo/:tag/:assetName` 124 | 1. GitHub release (latest by SemVer & asset including pre-releases): `/github/downloads-pre/:user/:repo/:tag/:assetName?sort=semver` 125 | 1. jsDeliver hits (GitHub): `/jsdelivr/gh/:period/:user/:repo` 126 | 127 | ## Funding 128 | 129 | 1. GitHub sponsors: `/github/sponsors/:user` 130 | 131 | ## Issue Tracking 132 | 133 | Add these if you have issues or PRs, use labels, have milestones, etc. 134 | 135 | Varied: 136 | 137 | 1. **GitHub commit merge status**: `/github/commit-status/:user/:repo/:branch/:commit` 138 | 1. GitHub Hacktoberfest combined status: `/github/hacktoberfest/:year/:user/:repo` 139 | 1. GitHub Hacktoberfest combined status (suggestion label override): `/github/hacktoberfest/:year/:user/:repo?suggestion_label=help%20wanted` 140 | 1. **GitHub issue/pull request detail**: `/github/:issueKind/detail/:property/:user/:repo/:number` 141 | 1. GitHub issue custom search: `/github/issues-search?query=repo%3Abadges%2Fshields%20is%3Aclosed%20label%3Abug%20author%3Aapp%2Fsentry-io` 142 | 1. GitHub issue custom search in repo: `/github/issues-search/:user/:repo?query=is%3Aclosed%20label%3Abug%20author%3Aapp%2Fsentry-io` 143 | 1. **Github labels**: `/github/labels/:user/:repo/:name` 144 | 1. Github milestone: `github/milestones/:variant/:user/:repo/:number` 145 | 1. Github milestones: `/github/milestones/:variant/:user/:repo` 146 | 147 | Issues: 148 | 149 | 1. **GitHub issues**: `/github/issues/:user/:repo` 150 | 1. GitHub issues: `/github/issues-raw/:user/:repo` 151 | 1. **GitHub issues by label**: `/github/issues/:user/:repo/:label` 152 | 1. GitHub issues by label: `/github/issues-raw/:user/:repo/:label` 153 | 1. **GitHub closed issues**: `/github/issues-closed/:user/:repo` 154 | 1. GitHub closed issues: `/github/issues-closed-raw/:user/:repo` 155 | 1. **GitHub closed issues by label**: `/github/issues-closed/:user/:repo/:label` 156 | 1. GitHub closed issues by label: `/github/issues-closed-raw/:user/:repo/:label` 157 | 158 | Pull requests: 159 | 160 | 1. GitHub pull requests: `/github/issues-pr/:user/:repo` 161 | 1. GitHub pull requests: `/github/issues-pr-raw/:user/:repo` 162 | 1. GitHub closed pull requests: `/github/issues-pr-closed/:user/:repo` 163 | 1. GitHub closed pull requests: `/github/issues-pr-closed-raw/:user/:repo` 164 | 1. GitHub pull requests by label: `/github/issues-pr/:user/:repo/:label` 165 | 1. GitHub pull requests by label: `/github/issues-pr-raw/:user/:repo/:label` 166 | 1. GitHub closed pull requests by label: `/github/issues-pr-closed/:user/:repo/:label` 167 | 1. GitHub closed pull requests by label: `/github/issues-pr-closed-raw/:user/:repo/:label` 168 | 169 | ## License 170 | 171 | 1. **GitHub**: `/github/license/:user/:repo` 172 | 173 | ## Rating 174 | 175 | Not sure about where these ratings are coming from but the options are: 176 | 177 | 1. Mozilla Add-on 178 | 1. AUR votes 179 | 1. Chrome web store 180 | 1. Docker 181 | 1. Greasy fork 182 | 1. JetBrains Plugins 183 | 1. Libraries.io 184 | 1. Open VSX 185 | 1. Ore 186 | 1. Package gist 187 | 1. Pub 188 | 1. Puppet Forge 189 | 1. Plugin on redmine.org 190 | 1. Spiget 191 | 1. Stream 192 | 1. Vaadin Directory 193 | 1. **Visual Studio Marketplace** 194 | 1. **WordPress theme** 195 | 1. **WordPress plugin** 196 | 197 | ## Social 198 | 199 | > These are all good (except Org stars)!!! 200 | 201 | 1. **GitHub gist stars**: `/github/gist/stars/:gistId` 202 | 1. **GitHub followers**: `/github/followers/:user?label=Follow` 203 | 1. **GitHub forks**: `/github/forks/:user/:repo?label=Fork` 204 | 1. **GitHub repo stars**: `/github/stars/:user/:repo?style=social` 205 | 1. **GitHub user's stars**: `/github/stars/:user?affiliations=OWNER%2CCOLLABORATOR` 206 | 1. GitHub Org's stars: `/github/stars/:org` 207 | 1. **GitHub watchers**: `/github/watchers/:user/:repo?label=Watch` 208 | 209 | ## Version 210 | 211 | This section is for when you have a pro version of code or something where you have versions, releases, etc. I'm skipping this one because it definitely does not apply to me. But go to [Shields.io Version](https://shields.io/category/version) to see the list for yourself. Options: 212 | 213 | 1. go.mod 214 | 1. lerna 215 | 1. Manifest version 216 | 1. package.json version 217 | 1. R package version 218 | 1. release 219 | 1. GitHub tag SemVer 220 | 1. **GitHub tag (latest by date)**: `/github/v/tag/:user/:repo` 221 | 222 | ## Platform & Version Support 223 | 224 | Skip if you are a newbie: 225 | 226 | 1. GitHub package.json dependency version (prod): `/github/package-json/dependency-version/:user/:repo/:packageName` 227 | 1. GitHub package.json dependency version (dev on branch): `/github/package-json/dependency-version/:user/:repo/dev/:scope?/:packageName/:branch*` 228 | 1. GitHub package.json dependency version (subfolder): ` /github/package-json/dependency-version/:user/:repo/:packageName?filename=packages%2Fchar-width-table-builder%2Fpackage.json` 229 | 1. GitHub Pipenv locked Python version: `/github/pipenv/locked/python-version/:user/:repo` 230 | 1. GitHub Pipenv locked Python version (branch): `/github/pipenv/locked/python-version/:user/:repo/:branch` 231 | 232 | ## Monitoring 233 | 234 | Nothing GitHub specific and not for beginners - categories are: 235 | 236 | 1. Chromium 237 | 1. Mozilla 238 | 1. NodePing 239 | 1. PingPong 240 | 1. Security Headers 241 | 1. Uptime Robot 242 | 243 | ## Activity 244 | 245 | > A lot of these look good! 246 | 247 | Various: 248 | 249 | 1. **GitHub contributors** (via allcontributors.org): `/github/all-contributors/:user/:repo/:branch*` 250 | 1. GitHub release date: `/github/release-date/:user/:repo` 251 | 1. GitHub (Pre-)release date: `/github/release-date-pre/:user/:repo` 252 | 1. GitHub release date published_at: `/github/release-date/:user/:repo?display_date=published_at` 253 | 254 | Commits: 255 | 256 | 1. **GitHub gist last commit**: `/github/gist/last-commit/:gistId` 257 | 1. **GitHub commit activity**: `/github/commit-activity/:interval/:user/:repo` 258 | 1. **GitHub commit activity (branch)**: `/github/commit-activity/:interval/:user/:repo/:branch*` 259 | 1. GitHub commits diff between...: `/github/commits-difference/:user/:repo?base=1.60.0&head=82f2db7` 260 | 1. GitHub commits since tagged version: `/github/commits-since/:user/:repo/:version/:branch*` 261 | 1. GitHub commits since tagged version (branch): `/github/commits-since/:user/:repo/:version/:branch*` 262 | 1. GitHub commits since latest release (by date): `/github/commits-since/:user/:repo/:version/:branch*` 263 | 1. GitHub commits since latest release (by date) for a branch: `/github/commits-since/:user/:repo/:version/:branch*` 264 | 1. GitHub commits since...: `/github/commits-since/:user/:repo/:version/:branch*?include_prereleases` 265 | 1. GitHub commits since... SemVeer: `/github/commits-since/:user/:repo/:version/:branch*?sort=semver` 266 | 1. GitHub commits since...: SKIP 267 | 1. **GitHub commits contributors**: `/github/:variant/:user/:repo` 268 | 1. **GitHub last commit**: `/github/last-commit/:user/:repo` 269 | 1. **GitHub last commit (branch)**: `/github/last-commit/:user/:repo/:branch` 270 | 1. **GitHub last commit (by commiter)**: `/github/last-commit/:user/:repo?display_timestamp=committer` 271 | 272 | ## Other 273 | 274 | 1 or 2 beginner badges in this section: 275 | 276 | 1. **GitHub deployments**: `/github/deployments/:user/:repo/:environment` 277 | 1. **GitHub discussions**: `/github/discussions/:user/:repo` 278 | 1. GitHub manifest.json dynamic: `/github/manifest-json/:key/:user/:repo` 279 | 1. GitHub manifest.json dynamic: `/github/manifest-json/:key/:user/:repo/:branch` 280 | 1. GitHub manifest.json dynamic (path): `/github/manifest-json/:key/:user/:repo?filename=extension%2Fmanifest.json` 281 | 1. GitHub manifest.json dynamic (path): `/github/manifest-json/:key/:user/:repo/:branch?filename=extension%2Fmanifest.json` 282 | 1. GitHub package.json dynamic: `/github/package-json/:key/:user/:repo` 283 | 1. GitHub package.json dynamic: `/github/package-json/:key/:user/:repo/:branch` --------------------------------------------------------------------------------

JIM KERNICKY

H3 tag with align="center"

H3 tag with align="right"

⤷ Commands after initial push

Heading3

Testing certain tags and related syntax