Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kernix13/markdown-cheatsheet
Markdown cheat sheet: A structured cheat sheet for markdown syntax that is easy to follow. I breakdown the syntax into 8 categories and I include sections for HTML entities and which HTML tags you can use in your README files.
https://github.com/kernix13/markdown-cheatsheet
github-markdown-cheat-sheet markdown markdown-cheat-sheet markdown-codeblock markdown-syntax readme
Last synced: about 1 month ago
JSON representation
Markdown cheat sheet: A structured cheat sheet for markdown syntax that is easy to follow. I breakdown the syntax into 8 categories and I include sections for HTML entities and which HTML tags you can use in your README files.
- Host: GitHub
- URL: https://github.com/kernix13/markdown-cheatsheet
- Owner: Kernix13
- Created: 2021-12-26T19:26:31.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-11T11:50:57.000Z (5 months ago)
- Last Synced: 2024-08-11T12:53:10.249Z (5 months ago)
- Topics: github-markdown-cheat-sheet, markdown, markdown-cheat-sheet, markdown-codeblock, markdown-syntax, readme
- Language: HTML
- Homepage:
- Size: 608 KB
- Stars: 42
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MARKDOWN CHEAT SHEET
Use this markdown cheat sheet as a guide for writing your markdown files. If you like it then clone or fork it, or at least click the **star** button.
> FYI: if you are using the Vs Code extension `Prettier - Code formatter`, then you want to create a `.prettierignore` file and add markdown files (see my file) because it _WILL_ mess with your markdown.
I'm breaking up all the markdown syntax into 8 categories:
1. Basics
1. Styles
1. Miscellaneous
1. Links
1. Lists
1. Code
1. Hidden
1. Visual Elements
**NOTE**: To view markdown> in VS Code hit CTRL+SHIFT + V or click the preview button at top right in line with the file name tabs.
## ~~A Literal~~ Table of _Contents_
| Category | Element | Accepts styles? |
| -----------------------------------: | :-------------------------------------------- | :-------------: |
| [Basics](#basics): | [Paragraphs](#paragraphs) | Yes |
| | [Special characters](#special-characters) | `N/A` |
| [Styles](#styles): | [Bold](#bold) | `N/A` |
| | [Italic](#italic) | `N/A` |
| | [Strike thru](#strike-thru) | `N/A` |
| | [Underline](#underline) | `N/A` |
| [Miscellaneous](#miscellaneous): | [Headings](#headings) | Yes |
| | [Blockquotes](#blockquotes) | Yes |
| | [Alerts](#alerts) | Yes |
| | [Tables](#tables) | Yes |
| | [Horizontal rules](#horizontal-rules) | No |
| | [Descriptions](#descriptions) | Yes\* |
| | [Frontmatter and YAML](#frontmatter-and-yaml) | No |
| [Links](#links): | [External](#external) | Yes |
| | [Anchor](#anchor) | Yes |
| | [Footnotes](#footnotes) | Yes |
| | [At mentions](#at-mentions) | `N/A` |
| [Lists](#lists): | [Unordered](#unordered) | Yes |
| | [Ordered](#ordered) | Yes |
| | [Nested](#nested) | Yes |
| | [Tasks](#tasks) | No |
| [Code](#code): | [Inline](#inline) | Yes\* |
| | [Tab](#tab) | No |
| | [Generic](#generic) | No |
| | [Language block](#language-block) | No |
| | [Diff](#diff) | No |
| [Hidden Elements](#hidden-elements): | [Comments](#comments) | No |
| | [Spoiler](#spoiler) | Yes |
| | [Details](#details) | No |
| [Visual Elements](#visual-elements): | [Images](#images) | No |
| | [Math](#math) | No |
| | [Emojis](#emojis) | No |
| | [Shields](#shields) | No |
| | [Devicons](#devicons) | No |
| | [Mermaid Diagrams](#mermaid-diagrams) | No |
| | [HTML entities](#html-entities) | Yes\* |
| [HTML](#html) | [Block elements](#block-elements) | - |
| | [Inline elements](#inline-elements) | - |
| | [HTML tag examples](#html-tag-examples) | - |
| | [CSS Styles](#css-styles) | - |
| | [Buttons](#buttons) | - |
| [Resources](#resources) | N/A | - |
---
## Basics
This is a short section on basic paragraphs, the symbols used in Markdown and how to escape them.
### Paragraphs
Since paragraphs are a thing of their own, let's cover that one first:
**Paragaphs**: Just use regular text but make sure to hit the ENTER key twice. Sometimes if you only hit ENTER once, the text will de displayed as the element directly above it _and_ there will not be a line break.
### Special characters
Here are the characters you will use in Markdown. They will be covered in each section after this one:
````
# Hash tags for headines and anchor links
@ at symbol for at mentions
[] for links, checked lists / tasks, and footnotes
() for links
! for images
^ for footnote links
x or X for tasks lists
` and ``` for inline code and codeblocks respectively
* and ** for italic and bold respectively
_ underscore for italics
~~ 2 tildes for strikethrough
| for setting tables cells
|| double pipes for spoiler text on Discord
: with dashes - for table cell alignments, for footnotes, and emojis
* or - and a space for unordered lists
1., 2., 3., etc. for numbered lists
* and + for diff code blocks
> for blockquotes
> > for indented / nested blockquotes
3 - or * for horizontal rules
\ to escape most of the characters above, as in...
\* escape asterisk,
\| escape pipe, etc...
" for titles in links and images
````
**NOTE**: Some of the symbols have different effects when used in _Math Expressions_. See that section for information on those.
## Styles
This category deals with the styling of words and can be used with every category with a few exceptions. You may not have thought of it but you can apply these effects to all or some of the words in:
- Headings
- Links
- Lists (Not Tasks)
- Blockquotes
- Table cell values
- HTML entities (except strikethrough)
- Hidden (Spoiler only)
These do not work for the obvious ones (Horizontal Rules, Images, and Emojis), and for all options in the Code category except inline code.
### Bold
**Bold**: use either 2 **asterisks** or 2 **underscores** before and after the text for bold styling. The preferred syntax is to use asterisks for bold:
```markdown
**two asterisks**
**two underscores**
```
The two underscores is being converted to asterisks in the block above (asterisks preferred), so let's try it in an inline code block: `__two underscores__`.
### Italic
**Italic**: use a _single asterisk_ or _underscore_ before and after the text for italic styling. The preferred syntax is to use an underscore for italics:
```markdown
_single asterisk_
_single underscore_
```
Here is an inline example with a single asterisk: `*single asterisk*` (underscores preferred).
**_Bold and Italic_**: use either **_3 asterisks_** or **_2 asterisks and 1 underscore_** for bold and italic text. The preffered syntax is the latter:
```markdown
**_3 asterisks_**
**_2 asterisks and and 1 underscore_**
```
### Strike thru
**Strikethrough**: use two tildes `~~` (~~) before and after text that you want to display as ~~strikethrough~~:
```
~~double tildes~~
```
If you want, you can also do **~~bold strikethrough~~**, _~~italic strikethrough~~_, and **_~~bold italic strikethrough~~_**.
### Underline
This can only be done with the `` HTML element. This is **_NOT_** part of Markdown.
The links on GitHub are blue, bold and underlined (on hover). The `` HTML element underlines text and has normal font color and normal font-weight. No one familiar with GitHub will confuse it for a link. It's another styling effect that I find more useful than srikethrough.
This is text underlined with the `ins` HTML tag.
```markdown
This is text underlined with the `ins` HTML tag.
```
---
## Miscellaneous
The elements in this category are all unique and do not fit into any of the other category:
- Headings
- Blockquotes
- Descriptions
- Tables
- Horizontal rule
- Frontmatter
All elements in this category allow the text effects listed above except for horizontal rules and Frontmatter, and with an exception for descriptions.
### Headings
There are 6 headings just like in HTML. Use a single hashtag for H1 and 6 hashtags for H6. The top title of this docuement is an H1 with a single hash, this section (**Miscellaneous**) uses 2 hashtags, and this sub-section (**Headings**) uses 3 hashtags.
**NOTE**: There is an automatic horizontal rule added when you use syntax for H1 and H2.
```markdown
# MARKDOWN CHEAT SHEET (Heading 1)
## Misc (Heading 2)
### Headings (heading 3)
### Heading 4 (you most likely will not use H5 or H6)
```
Here is an example of using Bold, Italic, and Strikethrough in a heading:
```markdown
## ~~A Literal~~ Table of _Contents_
```
As you can see, strikethrough and italic worked on the heading, but using bold did not increase the font weight for headings because they are already bold.
### Blockquotes
This is a nice effect which adds a border-left and padding-left to offset it from normal text:
> Use a **greater** than _sign_ (>) to quote a team member
>
> Create a space like above using > with no text (~~ignore~~)
```markdown
> Use a **greater** than _sign_ (>) to quote a team member
>
> Create a space like above using > with no text (~~ignore~~)
```
#### Alerts
Alerts are used to highlight important text with colours and icons. There is support for five distinct kinds of alerts. They have syntax similar to blockquotes but include syntax for images which is what displays the specific icons for each alert type:
```md
> [!NOTE]
> Essential details that users should not overlook, even when browsing quickly.
> [!TIP]
> Additional advice to aid users in achieving better outcomes.
> [!IMPORTANT]
> Vital information required for users to attain success.
> [!WARNING]
> Urgent content that requires immediate user focus due to possible risks.
> [!CAUTION]
> Possible negative outcomes resulting from an action.
```
> [!NOTE]
> Essential details that users should not overlook, even when browsing quickly.
> [!TIP]
> Additional advice to aid users in achieving better outcomes.
> [!IMPORTANT]
> Vital information required for users to attain success.
> [!WARNING]
> Urgent content that requires immediate user focus due to possible risks.
> [!CAUTION]
> Possible negative outcomes resulting from an action.
### Tables
Here is a generic table but the Table of Contents above is another version. The pipes create the columns, the colons with dashes create the alignment:
- A colon on the left of the dashes is left-aligned,
- A colon on the right is right-aligned,
- And a colon on both ends is centered
| Left aligned Content | Center aligned Content | Right aligned Content |
| :-------------------- | :--------------------: | --------------------: |
| Content Left | Content Center | Content Right |
| Content Left | Content Center | Content Right |
| _Italic_ | **Bold** | ~~Strikethrough~~ |
| Underlined | Content Center | Content Right |
```markdown
| Left aligned Content | Center aligned Content | Right aligned Content |
| :-------------------- | :--------------------: | --------------------: |
| Content Left | Content Center | Content Right |
| Content Left | Content Center | Content Right |
| _Italic_ | **Bold** | ~~Strikethrough~~ |
| Underlined | Content Center | Content Right |
```
Combination HTML and markdown table
```markdown
Heading 1
Heading 2
| A | B | C |
| --- | --- | --- |
| 1 | 2 | 3 |
| A | B | C |
| --- | --- | --- |
| 1 | 2 | 3 |
```
Heading 1
Heading 2
| A | B | C |
| --- | --- | --- |
| 1 | 2 | 3 |
| A | B | C |
| --- | --- | --- |
| 1 | 2 | 3 |
Boxed
```markdown
The quick brown fox jumps over the lazy dog.
```
The quick brown fox jumps over the lazy dog.
### Horizontal rules
Use 3 asterisks or 3 dashes with or without a space to create a horizontal rule:
---
```
- - -
---
* * *
***
```
**NOTE**: Make sure to hit ENTER twice if you intend to use 3 asterisks without spaces or it will set the text above it to an H3 tag. Directly below this paragraph is an HTML `
` tag which looks identical to the HR at the top of this section.
HR's look good for visual breaks. You could also use other keyboard symbols like periods:
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
### Descriptions
The following are HTML tags, **_NOT_** a part of markdown, but they do give you a nice indentation for visual variety.
The text in the tags can only be styled with the HTML tags related to bold, italic, strikethrough, or _underline_. As you can see, I used the `ins`, `b`, `em`, and `s` tags in the example below:
- `dl`: description list, the wrapper element for the other two
- `dt`: description term, that which you are defining or highlighting
- `dd`: description details, the actual definition or explanantion
- Description List
- Represents a description list. The dl element encloses a list of groups of terms (specified using the dt element) and descriptions (provided by dd elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs) (ignore).
```markdown
- Description List
- Represents a description list. The dl element encloses a list of groups of terms (specified using the dt element) and descriptions (provided by dd elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs) (ignore).
```
### Frontmatter and YAML
Frontmatter in markdown files is not something you will use in general, but you should at least be aware of it. The actual syntax for markdown frontmatter (or _front matter_) is YAML syntax.
What is YAML? That is not pertinent to this repo, but GitHub actions are written in YAML.
Check out the file in this repo named [frontmatter.md](https://github.com/Kernix13/markdown-cheatsheet/blob/master/frontmatter.md) for an example of how it displays at the top of the file, as well as a description of what frontmatter is, and notes on syntax and YAML.
In that file I use frontmatter and it looks like it prints out as if it was a table. It has just 2 rows: 1st) the keys which become the table headers, and 2nd) the values in the first row. What is interesting is how the _tags_ are output with borders. I did not use nesting in that example, but I would assume that would output differently.
Here is an error I got when I tried nesting:
> ERROR: `Error in user YAML: (): did not find expected '-' indicator while parsing a block collection at line 4 column 3`
## Links
This category accepts all text effects and includes:
- External links
- Anchor links (same page)
- Footnote links
### External
**External Links**: The syntax is to use square brackets around the link text and parentheses for the URL. You can also add an additional title for the link by adding a space after the URL and adding the link title in double quotes:
Here is a link to my [Beginner Git Commands](https://github.com/Kernix13/beginner-git-commands) repositiory. And here is the syntax:
```markdown
[Link text](URL 'Optional link title')
[Beginner Git Commands](https://github.com/Kernix13/beginner-git-commands 'Basic Git commands repo')
```
**NOTE**: Only use a title if it adds information. Don't set the title text to be the same as the link text.
Here is a bold, italic and strikethrough link:
- **[Google](https://google.com)**
- _[Google](https://google.com)_
- ~~[Google](https://google.com)~~
- [Google](https://google.com)
Why would you use a strikethorugh effect on a link? I'm not sure. For a page under construction, being moved, etc?
### Anchor
**Same page anchor links**: This can be done in at least two ways. For all the links in the table of contents above I use the simpler method. But for the **Back to Top** link I use an actual `` tag.
For the simple links, use the same syntax as for **External Links** above with 2 exceptions for the URL part:
1. Precede the _URL_ with a hashtag
1. Use the exact same text as where you are linking to but...
1. All the text needs to be in lowercase, and
1. All words need to be connected with a dash (no spaces)
Here is an example for the _Strike thru_ section:
```markdown
[Strike thru](#strike-thru)
```
Here is the code for the anchor link using an HTML `` and a ` ```html ### Footnotes **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. 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: Footnote.[^1] Some other important footnote.[^2] Use this for where you want the link: `[^1]` Here is the actual footnote syntax: ```markdown
[^1]: This is footnote number one.
### At mentions At mentions do not seem to work as links. This is an at mention test: @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. --- ## Lists This category has: - Unordered lists
You can use all text effects but with one exception: None of the effects work for Task lists. ### Unordered **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: - _List item 1_
```markdown
### Ordered **Ordered lists**: use a number followed by a period (1., 2., 3. etc.) and then a space to create an ordered list: 1. Ordered **item 1**
```markdown
**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. Does this make sense? You can use both unordered and ordered together -> bullets with roamn numerals, or numbers with bullets: 1. - What?
- 10. What is this
### Nested **Nested list**: Use the SPACEBAR key to align the dash or asterisk directly beneath the first character in the parent list item above it to create a nested list: - List item 1
```markdown
For a nested ordered list, do the same as for nested unordered lists - align the number to be below the first character of the parent item: 1. Ordered item 1
```markdown
### Tasks You can create what looks like checkboxes and display completed tasks with a checkmark. It takes the form of an unordered list with the first characters being a set of square brackets which **_MUST_** have a space in them. For a completed task, add either a lower or uppercase "X": - [ ] Incomplete _task_
```markdown
--- ## Code 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: - Inline code
### Inline Use a `single backtick` before and after text to display it as inline code: ```markdown
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`. ### Tab 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: This is a **code** _block_ made by ~~hitting~~ TAB 2 X's ### Generic 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. ```
```
**From GitHub docs**: _To display triple backticks in a fenced code block, wrap them inside quadruple backticks_. However, you can also hit TAB twice: ```
````
### Language block 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. ```css
**CSS**: ```css
**HTML**: ```html
**JavaScript**: ```js
**PHP**: ```php ``` 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: ```fix
```fix
Here is the full list of supported languages and code syntax highlighting. 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: ```markdown
I've also noticed that `ini` and `TOML` as the language block language also show syntax highlighting. For terminal commands like for NPM, use `bash`, `sh`, or `zsh`. 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. ### Diff 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: ```diff
````
--- ## Hidden Elements This is an odd category with 3 effects, one of which you have probably only seen on Discord: - Comments
Only Spoiler text accepts text effects. ### Comments 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: ```markdown ``` 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. ### Spoiler 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: ```markdown
**NOTE**: This does not work on Slack or here on GitHub. ### Details 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: Title 1
Some hidden content goes here Title 2
Same stuff here ```html Title 1
Some hidden content goes here Title 2
Same stuff here ``` --- ## Visual Elements 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`. ### Images 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:   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: ```html
### Math Finally, per GitHub: > ...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. 1. Use a single dollar sign (`$`) at the beginning and end of an inline math expression.
Inline example: this `$(ax^2 + bx + c = 0)$` renders as $(ax^2 + bx + c = 0)$. 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)$ Inline exception 2: use `$` for inline use of dollar sign before a math expression. Block example: `$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$` renders as: $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ 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: $$\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)$$ Here are the important symbols to know: - `^` = exponent, e.g. $a^3$
Not sure for the following: `\left`, `\right`, `\forall`, `\partial`, `\rho`, `\nabla`, `\cdot`, `\vec`, `\mathrm`, `\in`, ... For some reason the symbols in the lists above are not all displaying (?) #### Examples for Greek letters 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. 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. #### Examples for Operators 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). Use `\lim\limits_{x \to \infty} \exp(-x) = 0` for $\lim\limits_{x \to \infty} \exp(-x) = 0$ #### Examples of Powers and indices 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}$. For powers with more than one digit, surround the power with `{ }`: use `n^{22}` for $n^{22}$. 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}$. #### Examples of Fractions and Binomials 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}$$ You can embed fractions within fractions using `\frac{\frac{1}{x}+\frac{1}{y}}{y-z}`: $$\frac{\frac{1}{x}+\frac{1}{y}}{y-z}$$ 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. 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$ 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. 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: - [Multiplication of two numbers](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Multiplication_of_two_numbers)
Color example: try `k = {\color{red}x} \mathbin{\color{blue}-} 2` for $k = {\color{red}x} \mathbin{\color{blue}-} 2$ Other links: - [MathJax](https://www.mathjax.org/)
### Emojis 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: ```markdown
Approval: :+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:, :star:, :star2:, :heart:, :exclamation: ```markdown
Disapproval, questions, problems: :-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:, :warning:, :interrobang: ```markdown
Directional: :point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down: ```markdown
Time, alarms: :bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar: ```markdown
Weather/nature: :sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: 💧 ☔ ⭐ 🌡️ ❄️ ⛄ 🌱 🐚 🍁 🍃 🌲 🌳 ```markdown
Office/Business: :scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: 💻 📞 📫 💵 💳 🔗 📎 💲 ✏️ ```markdown
Miscellaneous/playful: :alien:, :green_heart:, :blue_heart:, :purple_heart:, :mushroom:, :pizza:, :beer:, :icecream:, :sound:, :speaker:, :lock:, :guitar:, :one:, :two: (and other #'s), ```markdown
### Shields Check the file `shields.md` for a full list. [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: ```md
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: - **Analysis badges**: GitHub language count, GitHub top language, and GitHub search hit counter
Shield.io will build the links for you, but here is the breakdown of the structure: ```markdown
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/`: ```markdown constant + forks/Kernix13/markdown-cheatsheet?style=flat-square constant + commit-activity/y/Kernix13/markdown-cheatsheet?style=flat-square constant + contributors/Kernix13/markdown-cheatsheet?style=flat-square
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: ```markdown
### Devicons 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: ```markdown https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg 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: #### Devicons in an anchor and image tag #### Devicons in an image tag only #### Devicons in a span and image tag 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. 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. **NOTE 1**: The link attribute `target="_blank"` does not open links in a new tab. **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. ### Mermaid Diagrams 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: graph TD;
```mermaid
Or this flowchart LR A[Hard] -->|Text| B(Round)
```mermaid
A[Hard] -->|Text| B(Round)
As I learn more I will add more but this is really cool! Check out my file `mermaid.md` for in-depth notes. ### HTML entities 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. 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: **Business & Financial**:
**Directional**:
**Math and science**:
**NOTE**: For subscripts 0 thru 9, change the last number, e.g.: Zero₀ code = `₀` so change 8320 to 8321 for subscript 1 (One₁), change 8320 to 8322 for subscript 2 (Two₂), etc. **Music**:
**Miscellaneous**:
**Astrology**:
**Esoteric**:
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). **Hotkey list**:
--- ## HTML 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. I used a GitHub generator for my Profile README. In there are ` 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. ### Inline elements > `img` tags display as block level unless nested in table cells or `` tags _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). _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`. **Attributes notes**: - `a`: target="\_blank" does not work
Some _Global attributes_ that may have a use: id, draggable, **style**, **title**, tabindex, contenteditable, autofocus. > What is **_align_**? Do all these accept inline CSS? The only tags worth using IMO: - `a` for anchor links with HTML entities in the link text
#### HTML tag examples The large gap above the title is from 2 ` | HTML Tag | Result |
Paragraph tag with align="center" Paragraph tag with align="right" > I think an H2 heading that is center aligned would look great but not a paragraph. When would align right look good? Here is an example of an HTML entity in an `` tag: ↑ HTML Entities Section **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: And here are 2 images with `width="200px"` in a table. The first has `align="right"` and the second has `align="left"`: | | |
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 ` **`dl`, `dt`, and `dd`** example (use for indentation): ```markdown
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. 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. #### How about H4 as a comparison ##### Really small H5 heading ###### Even smaller text for an H6 Here is code to copy instead of having to type it out each time: ```
Paragraph 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: [](https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164) [ #### CSS Styles 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 `` tag or add inline CSS. Here is an example of a style tag: ```html
Box 1 Box 2 Box 3 .red {
> _**BAD NEWS**: You can not use a `` tag on GitHub, however the above works in VS Code on in the browser using the extension Markdown Preview Plus. That means it should work in other scenarios or platforms._ I could try and add the CSS as inline CSS for the div and paragraph tags, but I'm not that interested in spending time on that. I want my markdown files to look good and to have visual separation but I'd rather spend my time writing actual CSS for my projects. However, if you have a client that wants more CSS then you can experiment with inline CSS. ## Buttons ```markdown
<kbd>cmd + shift + p</kbd> Button with padding: ```markdown
<kbd> <br> cmd + shift + p <br> </kbd> Button as a link: ```markdown
<kbd>[Markdown-Cheatsheet](https://github.com/Kernix13/markdown-cheatsheet)</kbd> Button as a link with padding: ```markdown
<kbd> <br> [Markdown-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet) <br> </kbd> Button as a link without underlin: ```markdown
[<kbd>Markdown-Cheatsheet</kbd>](https://github.com/Kernix13/markdown-cheatsheet) ## Resources 1. [Daring Fireball](https://daringfireball.net/projects/markdown/basics 'Detailed markdown syntax') - more markdown documentation
<div align="right">⇡ <a href="#back-to-top" title="Table of Contents">Back to Top</a></div>
```
[^1]: This is footnote number one.
[^2]: Here is the second footnote.
```
[^2]: Here is the second footnote.
- Ordered lists
- Nested lists
- Task lists
- **List item 2**
- List ~~item 3~~
- _List item 1_
- **List item 2**
- List ~~item 3~~
```
1. Ordered _item 2_
1. Ordered ~~item 3~~
1. Ordered **item 1**
1. Ordered _item 2_
1. Ordered ~~item 3~~
```
1. - Really?
1. - Why?
- 15. Again?
- 20. Any use cases?
- List item 2
- Child item 1
- Child item 2
- Third level item
- List item 3
- List item 1
- List item 2
- Child item 1
- Child item 2
- Third level item
- List item 3
```
1. Ordered item 2
1. Child item 1
1. Child item 2
1. Third level item
1. Third level item 2
1. Third level item 3
1. Fourth level 1
1. Fourth level 2
1. Fourth level 3
1. Ordered item 3
1. Ordered item 1
1. Ordered item 2
1. Child item 1
1. Child item 2
1. Third level item
1. Third level item 2
1. Third level item 3
1. Fourth level 1
1. Fourth level 2
1. Fourth level 3
1. Ordered item 3
```
- [x] Completed **task**
- [ ] Incomplete ~~subtask~~
- [x] Completed subtask
- [ ] Incomplete _task_
- [x] Completed **task**
- [ ] Incomplete ~~subtask~~
- [x] Completed subtask
```
- Generic code blocks
- TAB code blocks
- Code language blocks
- `Diff` code blocks
`single backtick`
```
*, *::before, *::after {
box-sizing: border-box;
}
```
*, *::before, *::after {
box-sizing: border-box;
}
```
TAB twice to show the triple backticks
```
```
Triples inside quadruples - TAB x 2 is easier
```
````
rules here
```
a {
text-decoration: none;
}
```
```
console.log(${variable})
```
everything is blue
= light blue after equal sign (but not in VS Code)
```
everything is blue
= light blue after equal sign (but not in VS Code)
```
actionscript3
apache
applescript
asp
brainfuck
c
cfm
cjs
clojure
cmake
coffee-script, coffeescript, coffee
cpp - C++
cs
csharp
css
csv
bash, sh, zsh
diff
elixir
erb - HTML + Embedded Ruby
go
haml
http
java
javascript
js
json
jsx
less
lolcode
make - Makefile
markdown
matlab
nginx
objectivec
pascal
PHP
Perl
python
profile - python profiler output
rust
salt, saltstate - Salt
shell, sh, zsh, bash - Shell scripting
scss
sql
svg
swift
rb, jruby, ruby - Ruby
smalltalk
vim, viml - Vim Script
volt
vhdl
vue
xml - XML and also used for HTML with inline CSS and Javascript
yaml
```
- this code or text is the old version
+ this is what it was changed to
```
```diff
- this code or text is the old version
+ this is what it was changed to
```
````
- Spoiler text
- Details
||Spoiler text|| in Discord
```
Here is some more without a paragraph tag
```
2. Use 2 dollar sign (`$$`) at the beginning and end for a block of math expressions.
- `{ }` = required for certain expressions such as square root
- `\pm` = plus\minus symbol: $\pm$
- `\sqrt` = square root symbol: $\sqrt{b}$
- `\over` = division: $a \over b$
- `\leq` = less than or equal to: $\leq$
- `\geq` = greater than or equal to: $\geq$
- `\ne` = not equal to: $ \ne $
- `\sum` = Sigma, summation symbol: $\sum$
- `\val` = sub-script value: $a_i$
- `\{val=num}^n` = start val and max (n) val for sum
- `\Omega` and `\omega` = greek Omega or omega
- `\int` = interval
- `\bmod` and `\pmod` = modular operators
- `\frac` = fractions
- `\binom` = binomial coefficient
- [Roots](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Roots)
- [Sums and integrals](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Sums_and_integrals)
- [Brackets, braces and delimiters](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Brackets,_braces_and_delimiters)
- [Matrices and arrays](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Matrices_and_arrays)
- [Adding text to equations](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Adding_text_to_equations)
- [Formatting mathematics symbols](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Formatting_mathematics_symbols)
- [Color](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Color)
- GitHub blog post [Math support in Markdown](https://github.blog/2022-05-19-math-support-in-markdown/)
:Emoji_code:
```
:+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:,
:star:, :star2:, :heart:, :exclamation:
```
:-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:,
:warning:, :interrobang:
```
:point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down:
```
:bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar:
```
:sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: :droplet: :umbrella: :star: :thermometer: :snowflake: :snowman: :seedling: :shell: :maple_leaf: :leaves: :evergreen_tree: :deciduous_tree:
```
:scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: :computer: :telephone_receiver: :mailbox: :dollar: :credit_card: :link: :paperclip: :heavy_dollar_sign: :pencil2:
```
:link:, :speech_balloon:, :mag:, :mag_right:, :key:, :bulb: 👤 🐱 🐶 🦴 🌐 🌎 🎃 👻 🎅 🎄 🎁 🎈 🔦 🚽 🔧 🔨 ⛺ ⛵ ⚓ 🚀 ✈️ 🔥 💀 🚩 ♾️ 📐 🍷 💭
:alien:, :green_heart:, :blue_heart:, :purple_heart:, :mushroom:, :pizza:, :beer:,
:icecream:, :sound:, :speaker:, :lock:, :guitar:, :one:, :two: (and other #'s),
: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:
```
GitHub commit activity:
GitHub contributors:
GitHub all releases:
GitHub language count:
GitHub top language:
license
```
- **Size badge**: GitHub repo file count
- **Downloads badge**: GitHub all releases
- **Funding badge**: GitHub sponsors (probably not for beginners)
- **Issue tracking badges**: GitHub issue/pull request detail, GitHub issues, GitHub closed issues, ...and many more, (_what is hacktoberfest?_)
- **License badge**: GitHub license
- **Social badges**: GitHub followers, forks, repo stars, users stars, watchers, ...
- **Version badge**: GitHub manifest version
- **Activity badges**: GitHub contributors, GitHub commit activity, GitHub last commit, GitHub release date,
- **Other badges**: GitHub discussions, GitHub package.json dynamic (keywords)
https://img.shields.io/github/ + Label/ + user/ + repo + ?options
```
```
```
```
A-->B;
A-->C;
B-->D;
C-->D;
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
flowchart LR
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
| Entity | Result| Title |
| ---- | ---- | ---- |
| `©` | © | Copyright |
| `℗` | ℗ | Sound Copyright |
| `™` | ™ | Trademark |
| `®` | ® | Registered TM |
| `$` | $ | Dollar |
| `¢` | ¢ | Cent |
| `£` | £ | Pound |
| `€` | € | Euro |
| `✉` | ✉ | Envelope |
| `✓` | ✓ | Check mark |
| `✎` | ✎ | Pencil |
| `✒` | ✒ | Pen tip |
| `✆` | ✆ | Phone |
| `✂` | ✂ | Scissors |
| `⚠` | ⚠ | Warning |
| Entity | Result| Title |
| ---- | ---- | ---- |
| `←` | ← | Left arrow |
| `→` | → | Right arrow |
| `↑` | ↑ | Up arrow |
| `↓` | ↓ | Down arrow |
| `↖` | ↖ | Northwest arrow |
| `↗` | ↗ | Northeast arrow |
| `↘` | ↘ | Southeast arrow |
| `↙` | ↙ | Southwest arrow |
| `▲` | ▲ | Up triangle |
| `▼` | ▼ | Down triangle |
| `▶` | ▶ | Right triangle |
| `◀` | ◀ | Left triangle |
| `➢` | ➢ | Arrowhead |
| `➛` | ➛ | Drafting point |
| Entity | Result| Title |
| ---- | ---- | ---- |
| `°` | ° | Degree |
| `±` | ± | Plus minus |
| `²` | 3² | Supercript 2 |
| `₂` | H₂O | Subscript 2 |
| `₃` | NO₃| Subscript 3 |
| `¼` | ¼ | 1/4 fraction |
| `⅜` | ⅜ | 3/8 fraction |
| `×` | × | Multiplication |
| `÷` | ÷ | Division |
| `−` | − | Subtraction |
| `∅` | ∅ | Empty |
| `Φ` | Φ | Phi |
| `π` | π | Pi |
| `Ω` | Ω | Omega |
| `∑` | ∑ | Sum, Sigma |
| `√` | √ | Square root |
| `∞` | ∞ | Infinity |
| `∼` | ∼ | Proportional |
| `≈` | ≈ | Approximately |
| `≠` | ≠ | Not equal |
| `≤` | ≤ | Less or equal to |
| `≥` | ≥ | Greater or equal |
| `∠` | ∠ | Angle |
| `∡`| ∡ | Measured angle |
| `∨` | ∨ | Down angle |
| Entity | Result| Title |
| ---- | ---- | ---- |
| `♭`| ♭ | Music flat |
| `♮`| ♮ | Music natural |
| `♯`| ♯ | Music sharp |
| `𝄪`| 𝄪 | Double Sharp |
| `𝄫`| 𝄫 | Double flat |
| `𝄞`| 𝄞 | G-clef |
| `𝄡`| 𝄡 | C-clef |
| `𝄢`| 𝄢 | F-clef |
| `𝄴`| 𝄴 | Common time |
| `𝄵`| 𝄵 | Cut time |
| `ø`| ø | Half-diminished 7th |
| `𝅜`| 𝅜 | Breve |
| `𝅝`| 𝅝 | Whole note |
| `𝅗𝅥`| 𝅗𝅥 | Half note |
| `♩`| ♩ | Quarter note |
| `𝅘𝅥`| 𝅘𝅥 | Quarter note |
| `♪`| ♪ | 8th note |
| `♪`| ♪ | 8th note |
| `𝅘𝅥𝅮`| 𝅘𝅥𝅮 | 8th note |
| `♫`| ♫ | Beamed 8th note |
| `𝅘𝅥𝅯`| 𝅘𝅥𝅯 | 16th note |
| `♬`| ♬ | Beamed 16th note |
| `𝄶`| 𝄶 | Octave |
| `𝄑` | 𝄑 | Fermata |
| `𝄒` | 𝄒 | Breath mark |
| `𝄓` | 𝄓 | Caesura |
| `𝄆` | 𝄆 | Left repeat |
| `𝄇` | 𝄇 | Right repeat |
| `𝄈` | 𝄈 | Repeat |
| `𝄉` | 𝄉 | Dal Segno |
| `𝄊` | 𝄊 | Da Capo |
| `𝄋` | 𝄋 | Segno |
| `𝄌` | 𝄌 | Coda |
| `𝆏` | 𝆏 | Piano |
| `𝆐` | 𝆐 | Mezzo |
| `𝆑` | 𝆑 | Forte |
| `𝆒` | 𝆒 | Crescendo |
| `𝆓` | 𝆓 | Decrescendo |
| `𝄀` | 𝄀 | Single barline |
| `𝄁` | 𝄁 | Double barline |
| `𝄂` | 𝄂 | Final barline |
| `𝆱` | 𝆱 | Glissando up |
| `𝆲` | 𝆲 | Glissando down |
| `𝆔` | 𝆔 | Grace note |
| `𝆗` | 𝆗 | Turn |
| `𝆘` | 𝆘 | Inverted turn |
| `𝄩` | 𝄩 | Full measure rest |
| `𝄺` | 𝄺 | Dbl whole note rest |
| `𝄻` | 𝄻 | Whole rest |
| `𝄼` | 𝄼 | Half rest |
| `𝄽` | 𝄽 | Quarter rest |
| `𝄾` | 𝄾 | Eigth rest |
| `𝄿` | 𝄿 | Sixteenth rest |
| `𝄔` | 𝄔 | Brace |
| `𝄕` | 𝄕 | Bracket |
| `𝅻` | 𝅻 | Accent |
| `𝅼` | 𝅼 | Staccato |
| Entity | Result| Title |
| ---- | ---- | ---- |
| `♠` | ♠ | Spade |
| `♣` | ♣ | Club |
| `♥` | ♥ | Heart |
| `♦` | ♦ | Diamond |
| `☆`| ☆ | Star |
| `♔`| ♔ | King |
| `♕`| ♕ | Queen |
| `♖`| ♖ | Rook |
| `♗`| ♗ | Bishop |
| `♘`| ♘ | Knight |
| `♙`| ♙ | Pawn |
| `★`| ★ | Filled star |
| `♀`| ♀ | Female |
| `♂`| ♂ | Male |
| `¶` | ¶ | Paragraph |
| `§` | § | Selection sign |
| `✈` | ✈ | Airplane |
| `✗` | ✗ | Ballot X |
| `✘` | ✘ | Heavy Ballot X |
| `☀` | ☀ | Black Sun |
| `☼` | ☼ | White Sun |
| `☁` | ☁ | Cloud |
| `❄` | ❄ | Snowflake |
| `☂` | ☂ | Umbrella |
| `¬` | ¬ | Negation |
| `¯` | ¯ | Spacing Macron |
| `«` | « | Left quote |
| `»` | » | Right quote |
| `–` | – | En dash |
| `—` | — | Em dash |
| `⃠` | ⃠ | Circle slash |
| `☘` | ☘ | Shamrock |
| `☮` | ☮ | Peace symbol |
| `❤` | ❤ | Heavy heart |
| Entity | Result| Title |
| ---- | ---- | ---- |
| `⊕` | ⊕ | Earth |
| `♁` | ♁ | Earth |
| `☉` | ☉ | Sun |
| `☾` | ☾ | Moon |
| `♈`| ♈ | Aries |
| `♉`| ♉ | Taurus |
| `♊`| ♊ | Gemini |
| `♋`| ♋ | Cancer |
| `♌`| ♌ | Leo |
| `♍`| ♍ | Virgo |
| `♎`| ♎ | Libra |
| `♏`| ♏ | Scorpio |
| `♐`| ♐ | Sagittarius |
| `♑`| ♑ | Capricorn |
| `♒`| ♒ | Aquarius |
| `♓`| ♓ | Pisces |
| `☿`| ☿ | Mercury |
| `♀`| ♀ | Venus|
| `♀`| ♀ | Venus|
| `♂`| ♂ | Mars |
| `♂`| ♂ | Mars |
| `♃`| ♃ | Jupiter |
| `♄`| ♄ | Saturn |
| `♅`| ♅ | Uranus |
| `♆`| ♆ | Neptune |
| `♇`| ♇ | Pluto |
| `☊`| ☊ | Ascending node |
| `☋`| ☋ | Descending node |
| `☌`| ☌ | Conjunction (0°) |
| `⚺`| ⚺ | Semi-sextile (30°) |
| `∠`| ∠ | Semi-square (45°) |
| `⚹`| ⚹ | Sextile (60°) |
| `☐`| ☐ | Square (90°) |
| ``| | Trine (120°) | | `⚻`| ⚻ | Quincunx (150°) | | `☍`| ☍ | Opposition (180°) |
| Entity | Result| Title |
| ---- | ---- | ---- |
| `ℵ`| ℵ | Aleph |
| `ℶ`| ℶ | Bet/Beth |
| `ℷ`| ℷ | Gimel |
| `ℸ`| ℸ | Dalet/Daleth |
| `☤`| ☤ | Caduceus Staff |
| `⚕`| ⚕ | Staff of Aesculapius |
| `☥`| ☥ | Ankh |
| `☦`| ☦ | Orthodox Cross |
| `☧`| ☧ | Chi Rho |
| `☨`| ☨ | Cross or Lorraine |
| `☩`| ☩ | Cross of Jerusalem |
| `☯`| ☯ | Yin Yan, Ying Yang |
| `☰`| ☰ | Heaven I-Ching |
| `☱`| ☱ | Lake |
| `☲`| ☲ | Fire |
| `☳`| ☳ | Thunder |
| `☴`| ☴ | Wind |
| `☵`| ☵ | Water |
| `☶`| ☶ | Mountain |
| `☷`| ☷ | Earth |
| `⚊`| ⚊ | Yang |
| `⚋`| ⚋ | Yin |
| `⚌`| ⚌ | Greater Yang |
| `⚍`| ⚍ | Greater Yin |
| `⚎`| ⚎ | Lesser Yang |
| `⚏`| ⚏ | Lesser Yin |
| `☸`| ☸ | Wheel of Dharma |
| `✡`| ✡ | Seal of Solomon |
| `✭`| ✭ | Pentagram |
| Key | Symbol |
| --- | --- |
| Option | ⌥ |
| Control | ⌃ |
| Command | ⌘ |
| Shift | ⇧ |
| Caps Lock | ⇪ |
| Tab | ⇥ |
| Esc | ⎋ |
| Power | ⌽ |
| Return | ↩ |
| Delete | ⌫ |
testing align="center" in a pre block
- `img`: align, width, and height all work
- `headings` align center or right
- `p` for align center or right
- `div` as visual dividers using dash (-) or underscore (\_) or equals (=) or other characters. But can't you just use the characters instead?
- `br` for line breaks of paragrpah text or as a alternate spacer to `div`
- `img` to set width and height and align center or right
- `ins` for underline (`u` is actually better but does not display on GitHub)
- `kbd` for keyboard keys
- `samp` for monospaced font as a styling choice
- `sup` and `sub` for superscript and subscript
- `dl` `dt` `dd` maybe for the indentation of the definition
` tags. Use only one for a normal separation.
| :------- | :--------------------------------------------: |
| `ins` | underlined text |
| `u` | No underline on GitHub |
| `kbd` | CTRL+C, ENTER |
| `samp` | This is monospaced font |
| `sup` | 23 |
| `sub` | H2O |H3 tag with align="center"
H3 tag with align="right"
Here is an example of an Emoji in an `` tag: :smile: Emoji section⤷ Commands after initial push
| :---------------------------------------------------------------: | :--------------------------------------------------------------: |
| 
| |
```
Heading3
```
](https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164)
<style>
.red {
color: red;
font-weight: 700;
font-size: 1.5rem;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex-child {
background-color: #777;
padding: 0.5em 1em;
margin: 0.75em auto;
}
```
color: red;
font-weight:700;
font-size: 1.5rem;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex-child {
background-color: #777;
padding: 0.5em 1em;
margin: 0.75em auto;
}
Markdown css styles
Box 1
Box 2
Box 3
<kbd>cmd + shift + p</kbd>
```
<kbd> <br> cmd + shift + p <br> </kbd>
```
<kbd>[Markdown-Cheatsheet](https://github.com/Kernix13/markdown-cheatsheet)</kbd>
```
<kbd> <br> [Markdown-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet) <br> </kbd>
```
[<kbd>Markdown-Cheatsheet</kbd>](https://github.com/Kernix13/markdown-cheatsheet)
```
1. [Complete list of github markdown emojis](https://dev.to/nikolab/complete-list-of-github-markdown-emoji-markup-5aia) - Emojis list
1. [GitHub emoji list](https://gist.github.com/rxaviers/7360908) - Emojis list
1. [Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet) - Excellent!
1. [Emoji list](https://github.com/caiyongji/emoji-list) - there are a lot here as well
1. [HTML Entities](https://www.toptal.com/designers/htmlarrows/symbols/) - Excellent!
1. [HTML Entities2](http://mcdlr.com/8/) - maybe only a few unique vs the above link
1. [Shields.io](https://shields.io/) - Shields for your projects
1. [Devicons on Github](https://github.com/devicons/devicon/tree/master/icons): scan the list for icons you want to use.