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
2. Styles
3. Miscellaneous
4. Links
5. Lists
6. Code
7. Hidden
8. 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:	Paragraphs	Yes
	Special characters	N/A
Styles:	Bold	N/A
	Italic	N/A
	Strike thru	N/A
	Underline	N/A
Miscellaneous:	Headings	Yes
	Blockquotes	Yes
	Alerts	Yes
	Tables	Yes
	Horizontal rules	No
	Descriptions	Yes*
	Frontmatter and YAML	No
Links:	External	Yes
	Anchor	Yes
	Footnotes	Yes
	At mentions	N/A
Lists:	Unordered	Yes
	Ordered	Yes
	Nested	Yes
	Tasks	No
Code:	Inline	Yes*
	Tab	No
	Generic	No
	Language block	No
	Diff	No
Hidden Elements:	Comments	No
	Spoiler	Yes
	Details	No
Visual Elements:	Images	No
	Math	No
	Emojis	No
	Shields	No
	Devicons	No
	Mermaid Diagrams	No
	HTML entities	Yes*
HTML	Block elements	-
	Inline elements	-
	HTML tag examples	-
	CSS Styles	-
	Buttons	-
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
<!-- for comments in markdown -->
\ 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.

⇡ Back to Top

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.

⇡ Back to Top

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:

**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:

_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:

**_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 <ins> HTML element. This is NOT part of Markdown.

The links on GitHub are blue, bold and underlined (on hover). The <ins> 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.

This is <ins>text underlined</ins> with the `ins` HTML tag.

⇡ Back to Top

---

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 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:

## ~~A Literal~~ <ins>Table</ins> 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.

⇡ Back to Top

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)

> Use a **greater** than _sign_ (>) to quote a team member
>
> Create a <ins>space</ins> like above using > with no text (~~ignore~~)

⇡ Back to Top

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:

> [!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

| Left aligned Content  | Center aligned Content | Right aligned Content |
| :-------------------- | :--------------------: | --------------------: |
| Content Left          |     Content Center     |         Content Right |
| Content Left          |     Content Center     |         Content Right |
| _Italic_              |        **Bold**        |     ~~Strikethrough~~ |
| <ins>Underlined</ins> |     Content Center     |         Content Right |

Combination HTML and markdown table

<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>

<td>

| A   | B   | C   |
| --- | --- | --- |
| 1   | 2   | 3   |

</td><td>

| A   | B   | C   |
| --- | --- | --- |
| 1   | 2   | 3   |

</td></tr> </table>

Heading 1	Heading 2
A B C 1 2 3	A B C 1 2 3

Boxed

<table><tr><td>The quick brown fox jumps over the lazy dog.</td></tr></table>

The quick brown fox jumps over the lazy dog.

⇡ Back to Top

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 <hr> 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:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

⇡ Back to Top

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).

<dl>
  <dt>Description <ins>List</ins></dt>
  <dd>Represents a description list. The <ins><b><em>dl</em></b></ins> element encloses a list of groups of terms (specified using the <ins><b><em>dt</em></b></ins> element) and descriptions (provided by <ins><b><em>dd</em></b></ins> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs) (<s>ignore</s>).</dd>
</dl>

⇡ Back to Top

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 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: (<unknown>): did not find expected '-' indicator while parsing a block collection at line 4 column 3

⇡ Back to Top

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 repositiory. And here is the syntax:

[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
• Google
• Google
• Google

Why would you use a strikethorugh effect on a link? I'm not sure. For a page under construction, being moved, etc?

⇡ Back to Top

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 <a> 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
2. Use the exact same text as where you are linking to but...
   1. All the text needs to be in lowercase, and
   2. All words need to be connected with a dash (no spaces)

Here is an example for the Strike thru section:

[Strike thru](#strike-thru)

Here is the code for the anchor link using an HTML <a> and a <div> tag. I actually changed my 'Back to Top' link to be an <a> link inside of a <div> so that I could align the link to the right and use an HTML entity for an arrow up:

<!-- element with id at top of page -->
<div id="back-to-top"></div>

<!-- The link you click to go back to top -->
<div align="right">
  &#8673; <a href="#back-to-top" title="Table of Contents">Back to Top</a>
</div>

⇡ Back to Top

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.¹

Some other important footnote.²

Use this for where you want the link: [^1]

Here is the actual footnote syntax:

[^1]: This is footnote number one.
[^2]: Here is the second footnote.

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.

⇡ Back to Top

---

Lists

This category has:

• Unordered lists
• Ordered lists
• Nested lists
• Task 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
• List item 2
• List item 3

- _List item 1_
- **List item 2**
- List ~~item 3~~

⇡ Back to Top

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
2. Ordered item 2
3. Ordered item 3

1. Ordered **item 1**
1. Ordered _item 2_
1. Ordered ~~item 3~~

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?
2. • Really?
3. • Why?

• 10. What is this
• 15. Again?
• 20. Any use cases?

⇡ Back to Top

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
• 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

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
2. Ordered item 2
   1. Child item 1
   2. Child item 2
      1. Third level item
      2. Third level item 2
      3. Third level item 3
         1. Fourth level 1
         2. Fourth level 2
         3. Fourth level 3
3. 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

⇡ Back to Top

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
• Completed task
  • Incomplete subtask
  • Completed subtask

- [ ] Incomplete _task_
- [x] Completed **task**
  - [ ] Incomplete ~~subtask~~
  - [x] Completed subtask

⇡ Back to Top

---

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
• Generic code blocks
• TAB code blocks
• Code language blocks
• Diff code blocks

Inline

Use a single backtick before and after text to display it as inline code:

`single backtick`

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.

```
*, *::before, *::after {
  box-sizing: border-box;
}
```

*, *::before, *::after {
  box-sizing: border-box;
}

From GitHub docs: To display triple backticks in a fenced code block, wrap them inside quadruple backticks.

However, you can also hit TAB twice:

```
TAB twice to show the triple backticks
```

````
```
Triples inside quadruples - TAB x 2 is easier
```
````

⇡ Back to Top

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
rules here
```

CSS:

a {
  text-decoration: none;
}

HTML:

<img href="http://somewhere.com" />

JavaScript:

console.log(${variable})

PHP:

<?php the_content(); ?>

Here is a new one that I found on Discord Markdown Text 101 with a language prefix of fix. I assume this works on Discord but itdoes not work on GitHub:

everything is blue
= light blue after equal sign (but not in VS Code)

```fix
everything is blue
= light blue after equal sign (but not in VS Code)
```

Here is the full list of supported languages and code syntax highlighting.

Check out the article Languages Supported by Github Flavored Markdown from 12-8-2020. Also check out the highlight.js repo:

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

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.

⇡ Back to Top

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:

- 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
```

⇡ Back to Top

---

Hidden Elements

This is an odd category with 3 effects, one of which you have probably only seen on Discord:

• Comments
• Spoiler text
• Details

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:

<!-- There is a comment here that you can't see -->

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:

||Spoiler text|| in Discord

NOTE: This does not work on Slack or here on GitHub.

⇡ Back to Top

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

<details>
  <summary>Title 1</summary>
  <p>Some hidden content goes here</p>
  Here is some more without a paragraph tag
</details>
<details>
  <summary>Title 2</summary>
  <p>Same stuff here</p>
</details>

⇡ Back to Top

---

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:

![picture alt](./markdown-image.png 'Title is optional')

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:

<img
  src="https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg"
/>

⇡ Back to Top

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.
2. Use 2 dollar sign ($$) at the beginning and end for a block of math expressions.

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 <span>$</span> 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$
• { } = 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

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 for more information. Or click on the following links for specific sections not covered above:

• Multiplication of two numbers
• Roots
• Sums and integrals
• Brackets, braces and delimiters
• Matrices and arrays
• Adding text to equations
• Formatting mathematics symbols
• Color

Color example: try k = {\color{red}x} \mathbin{\color{blue}-} 2 for $k = {\color{red}x} \mathbin{\color{blue}-} 2$

Other links:

• MathJax
• GitHub blog post Math support in Markdown

⇡ Back to Top

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:

:Emoji_code:

Approval: 👍, 😄, 👌, ✅, ✔️, ⭐, 🌟, ❤️, ❗

:+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:,
:star:, :star2:, :heart:, :exclamation:

Disapproval, questions, problems: 👎, ❓, ❔, ❌, 💥, 💣, 😲, ⚠️, ⁉️

:-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:,
:warning:, :interrobang:

Directional: 👉, 👈, ⬅️, ➡️, ⬆️, ⬇️

:point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down:

Time, alarms: 🔔, 🔕, ⌛, ⏰, ⌚, 📆

:bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar:

Weather/nature: ☀️, ☁️, ❄️, ⚡, 🔆 💧 ☔ ⭐ 🌡️ ❄️ ⛄ 🌱 🐚 🍁 🍃 🌲 🌳

:sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: :droplet: :umbrella: :star: :thermometer: :snowflake: :snowman: :seedling: :shell: :maple_leaf: :leaves: :evergreen_tree: :deciduous_tree:

Office/Business: ✂️, 📌, 📎, ☎️, ©️, 📧 💻 📞 📫 💵 💳 🔗 📎 💲 ✏️

:scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: :computer: :telephone_receiver: :mailbox: :dollar: :credit_card: :link: :paperclip: :heavy_dollar_sign: :pencil2:

Miscellaneous/playful: 👽, 💚, 💙, 💜, 🍄, 🍕, 🍺, 🍦, 🔉, 🔈, 🔒, 🎸, 1️⃣, 2️⃣ (and other #'s),
🔗, 💬, 🔍, 🔎, 🔑, 💡 👤 🐱 🐶 🦴 🌐 🌎 🎃 👻 🎅 🎄 🎁 🎈 🔦 🚽 🔧 🔨 ⛺ ⛵ ⚓ 🚀 ✈️ 🔥 💀 🚩 ♾️ 📐 🍷 💭

: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:

⇡ Back to Top

Shields

Check the file shields.md for a full list.

Shields.io generates shields/badges for different apects of your repo. Here are the shields I have for my WriterAssist repo with descriptions above the badges:

GitHub commit activity:
![GitHub commit activity](https://img.shields.io/github/commit-activity/y/Kernix13/WriterAssist?style=flat-square)
GitHub contributors:
![GitHub contributors](https://img.shields.io/github/contributors/Kernix13/WriterAssist?style=flat-square)
GitHub all releases:
![GitHub all releases](https://img.shields.io/github/downloads/Kernix13/WriterAssist/total?style=flat-square)
GitHub language count:
![GitHub language count](https://img.shields.io/github/languages/count/Kernix13/WriterAssist?style=flat-square)
GitHub top language:
![GitHub top language](https://img.shields.io/github/languages/top/Kernix13/WriterAssist?style=flat-square)
license
![GitHub](https://img.shields.io/github/license/Kernix13/WriterAssist?style=flat-square)

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
• 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)

Shield.io will build the links for you, but here is the breakdown of the structure:

https://img.shields.io/github/ + Label/ + user/ + repo + ?options

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/:

<!-- Forks -->

constant + forks/Kernix13/markdown-cheatsheet?style=flat-square

<!-- Commits -->

constant + commit-activity/y/Kernix13/markdown-cheatsheet?style=flat-square

<!-- Contributors -->

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 <span> tags to get them to display inline:

<span><img alt="GitHub forks" src="https://img.shields.io/github/forks/Kernix13/markdown-cheatsheet?style=for-the-badge"></span>

⇡ Back to Top

Devicons

Devicons are the language and web tool icons you see mostly in people's profile README files. Check out Devicons on GitHub for the full list languages and tools and let me know if you find another/better list:

<!-- img src example -->

https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg

<!-- full example on an img tag inside a link tag -->

<a href="https://getbootstrap.com" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg" alt="bootstrap" width="40" height="40"/> </a>

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.

⇡ Back to Top

Mermaid Diagrams

This is a new markdown element I just became aware of. Check out Mermaid on GitHub for more information or go to their docs page. 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;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

Loading

Or this

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Loading

As I learn more I will add more but this is really cool! Check out my file mermaid.md for in-depth notes.

⇡ Back to Top

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:

Entity	Result	Title
©	©	Copyright
℗	℗	Sound Copyright
™	™	Trademark
®	®	Registered TM
$	$	Dollar
¢	¢	Cent
£	£	Pound
€	€	Euro
✉	✉	Envelope
✓	✓	Check mark
✎	✎	Pencil
✒	✒	Pen tip
✆	✆	Phone
✂	✂	Scissors
⚠	⚠	Warning

Directional:

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

Math and science:

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

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:

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

Miscellaneous:

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

Astrology:

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°)

Esoteric:

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

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.

Hotkey list:

Key	Symbol
Option	⌥
Control	⌃
Command	⌘
Shift	⇧
Caps Lock	⇪
Tab	⇥
Esc	⎋
Power	⌽
Return	↩
Delete	⌫

⇡ Back to Top

---

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 <p>, <a>, and <img> tags. In the Details section above, there are <details>, <summary>, and <p> tags. I found this gist called HTML Tags You Can Use on GitHub. That document mentions some tags you can use.

I tested every HTML tag that made sense. I skipped tags like section, header, nav, etc. Here is a breakdown of that testing.

Block elements

NOTE: I should not have pushed index.html because I was only using to test the syntax for some HTML tags.

Duplicates markdown: blockquote, h1 thru h6, hr, ol ul li, pre, table

No markdown equivalent: details with summary, dl dt dd (indent), div, and span.

Is align an attribute? How do I find similar attributes like that?

Attributes:

Is align an actual attribute or is it inline CSS?

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:

• blockquote: align (center, right)
• h1 thru h4: align (center, right)
• h5 and h6: align (center, right), very small font size!
• div: align (center, right)
• p: align (center, right)
• pre: align (center, right) - looks odd
• ul, ol, li: align (center, right) - looks odd

Testing alignment

testing align="center" in a pre block 

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.

⇡ Back to Top

Inline elements

img tags display as block level unless nested in table cells or <span> tags

Duplicates markdown: <a>, 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
• img: align, width, and height all 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
• 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

⇡ Back to Top

HTML tag examples

The large gap above the title is from 2 <br> tags. Use only one for a normal separation.

HTML Tag	Result
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"

Paragraph tag with align="center"

H3 tag with align="right"

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 <a> tag: ↑ HTML Entities Section
Here is an example of an Emoji in an <a> tag: 😄 Emoji section

NOTE: For my anchor links (same page) in my 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 <a> 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:

<h3 id="commands-after-initial-push">&#10551; Commands after initial push</h3>

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 <span> 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 <div> tag with align="center" though you could use align="right" as well:

dl, dt, and dd example (use for indentation):

Markdown Cheat Sheet

A quick source for making your readme files look great!

<dl>
  <dt>Markdown Cheat Sheet</dt>
  <dd>A quick source for making your readme files look great!</dd>
</dl>

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:

<h3 align="center">Heading3</h3>

<p align="right">Paragraph</p>

<img src="link.png" width="200px" title="title" align"center" alt="whatever">

<div align="center"><img src="link.png" width="200px" title="Image example"></div>

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. 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:

⇡ Back to Top

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 <style> tag or add inline CSS.

Here is an example of a style tag:

<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;
  }
</style>

<div class="red">Markdown css styles</div>

<div class="flex">
  <p class="flex-child">Box 1</p>
  <p class="flex-child">Box 2</p>
  <p class="flex-child">Box 3</p>
</div>

<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; } </style>

Markdown css styles

Box 1

Box 2

Box 3

BAD NEWS: You can not use a <style> 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

<kbd>cmd + shift + p</kbd>

cmd + shift + p

Button with padding:

<kbd> <br> cmd + shift + p <br> </kbd>

 
 cmd + shift + p 
 

Button as a link:

<kbd>[Markdown-Cheatsheet](https://github.com/Kernix13/markdown-cheatsheet)</kbd>

Markdown-Cheatsheet

Button as a link with padding:

<kbd> <br> [Markdown-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet) <br> </kbd>

 
 Markdown-Cheatsheet 
 

Button as a link without underlin:

[<kbd>Markdown-Cheatsheet</kbd>](https://github.com/Kernix13/markdown-cheatsheet)

Markdown-Cheatsheet

Resources

1. Daring Fireball - more markdown documentation
2. Complete list of github markdown emojis - Emojis list
3. GitHub emoji list - Emojis list
4. Emoji Cheat Sheet - Excellent!
5. Emoji list - there are a lot here as well
6. HTML Entities - Excellent!
7. HTML Entities2 - maybe only a few unique vs the above link
8. Shields.io - Shields for your projects
9. Devicons on Github: scan the list for icons you want to use.

⇡ Back to Top

Footnotes

1. This is footnote number one. ↩

2. Here is the second footnote. ↩