{"id":19290950,"url":"https://github.com/kernix13/markdown-cheatsheet","last_synced_at":"2025-06-16T11:04:05.474Z","repository":{"id":38059350,"uuid":"441967937","full_name":"Kernix13/markdown-cheatsheet","owner":"Kernix13","description":"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.","archived":false,"fork":false,"pushed_at":"2024-08-11T11:50:57.000Z","size":623,"stargazers_count":50,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T20:09:22.556Z","etag":null,"topics":["github-markdown-cheat-sheet","markdown","markdown-cheat-sheet","markdown-codeblock","markdown-syntax","readme"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kernix13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-26T19:26:31.000Z","updated_at":"2025-01-01T19:42:17.000Z","dependencies_parsed_at":"2023-02-08T06:15:55.745Z","dependency_job_id":"def7ca73-ed67-4920-8ff6-ff6c30f13903","html_url":"https://github.com/Kernix13/markdown-cheatsheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fmarkdown-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fmarkdown-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fmarkdown-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fmarkdown-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kernix13","download_url":"https://codeload.github.com/Kernix13/markdown-cheatsheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240395749,"owners_count":19794573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-markdown-cheat-sheet","markdown","markdown-cheat-sheet","markdown-codeblock","markdown-syntax","readme"],"created_at":"2024-11-09T22:23:09.080Z","updated_at":"2025-02-23T23:52:41.981Z","avatar_url":"https://github.com/Kernix13.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MARKDOWN CHEAT SHEET\n\n![GitHub Repo Stars](https://img.shields.io/github/stars/Kernix13/markdown-cheatsheet?style=for-the-badge)\n![GitHub Watchers](https://img.shields.io/github/watchers/Kernix13/markdown-cheatsheet?style=for-the-badge)\n![GitHub Forks](https://img.shields.io/github/forks/Kernix13/markdown-cheatsheet?style=for-the-badge)\n![GitHub Commit Activity](https://img.shields.io/github/commit-activity/y/Kernix13/markdown-cheatsheet?style=for-the-badge)\n\n\u003c!-- ![GitHub Contributors](https://img.shields.io/github/contributors/Kernix13/markdown-cheatsheet?style=for-the-badge) --\u003e\n\n![GitHub Issues](https://img.shields.io/github/issues/Kernix13/markdown-cheatsheet?style=for-the-badge)\n\n\u003c!-- ![GitHub Search Hits](https://img.shields.io/github/search/Kernix13/markdown-cheatsheet/markdown?style=for-the-badge) --\u003e\n\n\u003c!-- \u003cspan\u003e\u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/Kernix13/markdown-cheatsheet?style=for-the-badge\"\u003e\u003c/span\u003e\n\u003cspan\u003e\u003cimg alt=\"GitHub commit activity\" src=\"https://img.shields.io/github/commit-activity/y/Kernix13/markdown-cheatsheet?style=for-the-badge\"\u003e\u003c/span\u003e\n\u003cspan\u003e\u003cimg alt=\"GitHub contributors\" src=\"https://img.shields.io/github/contributors/Kernix13/markdown-cheatsheet?style=for-the-badge\"\u003e\u003c/span\u003e --\u003e\n\nUse 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.\n\n\u003e 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.\n\nI'm breaking up all the markdown syntax into 8 categories:\n\n1. Basics\n1. Styles\n1. Miscellaneous\n1. Links\n1. Lists\n1. Code\n1. Hidden\n1. Visual Elements\n\n**NOTE**: To view markdown\u003e in VS Code hit \u003ckbd\u003eCTRL\u003c/kbd\u003e+\u003ckbd\u003eSHIFT\u003c/kbd\u003e + \u003ckbd\u003eV\u003c/kbd\u003e or click the preview button at top right in line with the file name tabs.\n\n\u003cdiv id=\"back-to-top\"\u003e\u003c/div\u003e\n\n## ~~A Literal~~ \u003cins\u003eTable\u003c/ins\u003e of _Contents_\n\n| Category | Element | Accepts styles? |\n| -----------------------------------: | :-------------------------------------------- | :-------------: |\n| [Basics](#basics): | [Paragraphs](#paragraphs) | Yes |\n| | [Special characters](#special-characters) | `N/A` |\n| [Styles](#styles): | [Bold](#bold) | `N/A` |\n| | [Italic](#italic) | `N/A` |\n| | [Strike thru](#strike-thru) | `N/A` |\n| | [Underline](#underline) | `N/A` |\n| [Miscellaneous](#miscellaneous): | [Headings](#headings) | Yes |\n| | [Blockquotes](#blockquotes) | Yes |\n| | [Alerts](#alerts) | Yes |\n| | [Tables](#tables) | Yes |\n| | [Horizontal rules](#horizontal-rules) | No |\n| | [Descriptions](#descriptions) | Yes\\* |\n| | [Frontmatter and YAML](#frontmatter-and-yaml) | No |\n| [Links](#links): | [External](#external) | Yes |\n| | [Anchor](#anchor) | Yes |\n| | [Footnotes](#footnotes) | Yes |\n| | [At mentions](#at-mentions) | `N/A` |\n| [Lists](#lists): | [Unordered](#unordered) | Yes |\n| | [Ordered](#ordered) | Yes |\n| | [Nested](#nested) | Yes |\n| | [Tasks](#tasks) | No |\n| [Code](#code): | [Inline](#inline) | Yes\\* |\n| | [Tab](#tab) | No |\n| | [Generic](#generic) | No |\n| | [Language block](#language-block) | No |\n| | [Diff](#diff) | No |\n| [Hidden Elements](#hidden-elements): | [Comments](#comments) | No |\n| | [Spoiler](#spoiler) | Yes |\n| | [Details](#details) | No |\n| [Visual Elements](#visual-elements): | [Images](#images) | No |\n| | [Math](#math) | No |\n| | [Emojis](#emojis) | No |\n| | [Shields](#shields) | No |\n| | [Devicons](#devicons) | No |\n| | [Mermaid Diagrams](#mermaid-diagrams) | No |\n| | [HTML entities](#html-entities) | Yes\\* |\n| [HTML](#html) | [Block elements](#block-elements) | - |\n| | [Inline elements](#inline-elements) | - |\n| | [HTML tag examples](#html-tag-examples) | - |\n| | [CSS Styles](#css-styles) | - |\n| | [Buttons](#buttons) | - |\n| [Resources](#resources) | N/A | - |\n\n\u003c!-- ~~`\u003ccite\u003e`~~ --\u003e\n\n---\n\n## Basics\n\nThis is a short section on basic paragraphs, the symbols used in Markdown and how to escape them.\n\n### Paragraphs\n\nSince paragraphs are a thing of their own, let's cover that one first:\n\n**Paragaphs**: Just use regular text but make sure to hit the \u003ckbd\u003eENTER\u003c/kbd\u003e key twice. Sometimes if you only hit \u003ckbd\u003eENTER\u003c/kbd\u003e once, the text will de displayed as the element directly above it _and_ there will not be a line break.\n\n### Special characters\n\nHere are the characters you will use in Markdown. They will be covered in each section after this one:\n\n````\n# Hash tags for headines and anchor links\n@ at symbol for at mentions\n[] for links, checked lists / tasks, and footnotes\n() for links\n! for images\n^ for footnote links\nx or X for tasks lists\n` and ``` for inline code and codeblocks respectively\n* and ** for italic and bold respectively\n_ underscore for italics\n~~ 2 tildes for strikethrough\n| for setting tables cells\n|| double pipes for spoiler text on Discord\n: with dashes - for table cell alignments, for footnotes, and emojis\n* or - and a space for unordered lists\n1., 2., 3., etc. for numbered lists\n* and + for diff code blocks\n\u003e for blockquotes\n\u003e \u003e for indented / nested blockquotes\n3 - or * for horizontal rules\n\u003c!-- for comments in markdown --\u003e\n\\ to escape most of the characters above, as in...\n\\* escape asterisk,\n\\| escape pipe, etc...\n\" for titles in links and images\n````\n\n**NOTE**: Some of the symbols have different effects when used in _Math Expressions_. See that section for information on those.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Styles\n\nThis 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:\n\n- Headings\n- Links\n- Lists (Not Tasks)\n- Blockquotes\n- Table cell values\n- HTML entities (except strikethrough)\n- Hidden (Spoiler only)\n\nThese do not work for the obvious ones (Horizontal Rules, Images, and Emojis), and for all options in the Code category except inline code.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Bold\n\n**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:\n\n```markdown\n**two asterisks**\n**two underscores**\n```\n\nThe 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__`.\n\n### Italic\n\n**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:\n\n```markdown\n_single asterisk_\n_single underscore_\n```\n\nHere is an inline example with a single asterisk: `*single asterisk*` (underscores preferred).\n\n**_Bold and Italic_**: use either **_3 asterisks_** or **_2 asterisks and 1 underscore_** for bold and italic text. The preffered syntax is the latter:\n\n```markdown\n**_3 asterisks_**\n**_2 asterisks and and 1 underscore_**\n```\n\n### Strike thru\n\n**Strikethrough**: use two tildes `~~` (~~) before and after text that you want to display as ~~strikethrough~~:\n\n```\n~~double tildes~~\n```\n\nIf you want, you can also do **~~bold strikethrough~~**, _~~italic strikethrough~~_, and **_~~bold italic strikethrough~~_**.\n\n### Underline\n\nThis can only be done with the `\u003cins\u003e` HTML element. This is **_NOT_** part of Markdown.\n\nThe links on GitHub are blue, bold and underlined (\u003cins\u003eon hover\u003c/ins\u003e). The `\u003cins\u003e` 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.\n\nThis is \u003cins\u003etext underlined\u003c/ins\u003e with the `ins` HTML tag.\n\n```markdown\nThis is \u003cins\u003etext underlined\u003c/ins\u003e with the `ins` HTML tag.\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n---\n\n## Miscellaneous\n\nThe elements in this category are all unique and do not fit into any of the other category:\n\n- Headings\n- Blockquotes\n- Descriptions\n- Tables\n- Horizontal rule\n- Frontmatter\n\nAll elements in this category allow the text effects listed above except for horizontal rules and Frontmatter, and with an exception for descriptions.\n\n### Headings\n\nThere 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.\n\n**NOTE**: There is an automatic horizontal rule added when you use syntax for H1 and H2.\n\n```markdown\n# MARKDOWN CHEAT SHEET (Heading 1)\n\n## Misc (Heading 2)\n\n### Headings (heading 3)\n\n### Heading 4 (you most likely will not use H5 or H6)\n```\n\nHere is an example of using Bold, Italic, and Strikethrough in a heading:\n\n```markdown\n## ~~A Literal~~ \u003cins\u003eTable\u003c/ins\u003e of _Contents_\n```\n\nAs 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.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Blockquotes\n\nThis is a nice effect which adds a border-left and padding-left to offset it from normal text:\n\n\u003e Use a **greater** than _sign_ (\u003e) to quote a team member\n\u003e\n\u003e Create a \u003cins\u003espace\u003c/ins\u003e like above using \u003e with no text (~~ignore~~)\n\n```markdown\n\u003e Use a **greater** than _sign_ (\u003e) to quote a team member\n\u003e\n\u003e Create a \u003cins\u003espace\u003c/ins\u003e like above using \u003e with no text (~~ignore~~)\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n#### Alerts\n\nAlerts 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:\n\n```md\n\u003e [!NOTE]\n\u003e Essential details that users should not overlook, even when browsing quickly.\n\n\u003e [!TIP]\n\u003e Additional advice to aid users in achieving better outcomes.\n\n\u003e [!IMPORTANT]\n\u003e Vital information required for users to attain success.\n\n\u003e [!WARNING]\n\u003e Urgent content that requires immediate user focus due to possible risks.\n\n\u003e [!CAUTION]\n\u003e Possible negative outcomes resulting from an action.\n```\n\n\u003e [!NOTE]\n\u003e Essential details that users should not overlook, even when browsing quickly.\n\n\u003e [!TIP]\n\u003e Additional advice to aid users in achieving better outcomes.\n\n\u003e [!IMPORTANT]\n\u003e Vital information required for users to attain success.\n\n\u003e [!WARNING]\n\u003e Urgent content that requires immediate user focus due to possible risks.\n\n\u003e [!CAUTION]\n\u003e Possible negative outcomes resulting from an action.\n\n### Tables\n\nHere 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:\n\n- A colon on the left of the dashes is left-aligned,\n- A colon on the right is right-aligned,\n- And a colon on both ends is centered\n\n| Left aligned Content | Center aligned Content | Right aligned Content |\n| :-------------------- | :--------------------: | --------------------: |\n| Content Left | Content Center | Content Right |\n| Content Left | Content Center | Content Right |\n| _Italic_ | **Bold** | ~~Strikethrough~~ |\n| \u003cins\u003eUnderlined\u003c/ins\u003e | Content Center | Content Right |\n\n\u003cbr\u003e\n\n```markdown\n| Left aligned Content | Center aligned Content | Right aligned Content |\n| :-------------------- | :--------------------: | --------------------: |\n| Content Left | Content Center | Content Right |\n| Content Left | Content Center | Content Right |\n| _Italic_ | **Bold** | ~~Strikethrough~~ |\n| \u003cins\u003eUnderlined\u003c/ins\u003e | Content Center | Content Right |\n```\n\nCombination HTML and markdown table\n\n```markdown\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003eHeading 1\u003c/th\u003e\n\u003cth\u003eHeading 2\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\n\u003ctd\u003e\n\n| A | B | C |\n| --- | --- | --- |\n| 1 | 2 | 3 |\n\n\u003c/td\u003e\u003ctd\u003e\n\n| A | B | C |\n| --- | --- | --- |\n| 1 | 2 | 3 |\n\n\u003c/td\u003e\u003c/tr\u003e \u003c/table\u003e\n```\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003eHeading 1\u003c/th\u003e\n\u003cth\u003eHeading 2\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\n\u003ctd\u003e\n\n| A | B | C |\n| --- | --- | --- |\n| 1 | 2 | 3 |\n\n\u003c/td\u003e\u003ctd\u003e\n\n| A | B | C |\n| --- | --- | --- |\n| 1 | 2 | 3 |\n\n\u003c/td\u003e\u003c/tr\u003e \u003c/table\u003e\n\nBoxed\n\n```markdown\n\u003ctable\u003e\u003ctr\u003e\u003ctd\u003eThe quick brown fox jumps over the lazy dog.\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n```\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd\u003eThe quick brown fox jumps over the lazy dog.\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Horizontal rules\n\nUse 3 asterisks or 3 dashes with or without a space to create a horizontal rule:\n\n---\n\n```\n- - -\n---\n* * *\n***\n```\n\n**NOTE**: Make sure to hit \u003ckbd\u003eENTER\u003c/kbd\u003e 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 `\u003chr\u003e` tag which looks identical to the HR at the top of this section.\n\n\u003chr\u003e\n\nHR's look good for visual breaks. You could also use other keyboard symbols like periods:\n\n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Descriptions\n\nThe following are HTML tags, **_NOT_** a part of markdown, but they do give you a nice indentation for visual variety.\n\nThe 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:\n\n- `dl`: description list, the wrapper element for the other two\n- `dt`: description term, that which you are defining or highlighting\n- `dd`: description details, the actual definition or explanantion\n\n\u003cdl\u003e\n \u003cdt\u003eDescription \u003cins\u003eList\u003c/ins\u003e\u003c/dt\u003e\n \u003cdd\u003eRepresents a description list. The \u003cins\u003e\u003cb\u003e\u003cem\u003edl\u003c/em\u003e\u003c/b\u003e\u003c/ins\u003e element encloses a list of groups of terms (specified using the \u003cins\u003e\u003cb\u003e\u003cem\u003edt\u003c/em\u003e\u003c/b\u003e\u003c/ins\u003e element) and descriptions (provided by \u003cins\u003e\u003cb\u003e\u003cem\u003edd\u003c/em\u003e\u003c/b\u003e\u003c/ins\u003e elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs) (\u003cs\u003eignore\u003c/s\u003e).\u003c/dd\u003e\n\u003c/dl\u003e\n\n```markdown\n\u003cdl\u003e\n \u003cdt\u003eDescription \u003cins\u003eList\u003c/ins\u003e\u003c/dt\u003e\n \u003cdd\u003eRepresents a description list. The \u003cins\u003e\u003cb\u003e\u003cem\u003edl\u003c/em\u003e\u003c/b\u003e\u003c/ins\u003e element encloses a list of groups of terms (specified using the \u003cins\u003e\u003cb\u003e\u003cem\u003edt\u003c/em\u003e\u003c/b\u003e\u003c/ins\u003e element) and descriptions (provided by \u003cins\u003e\u003cb\u003e\u003cem\u003edd\u003c/em\u003e\u003c/b\u003e\u003c/ins\u003e elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs) (\u003cs\u003eignore\u003c/s\u003e).\u003c/dd\u003e\n\u003c/dl\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Frontmatter and YAML\n\nFrontmatter 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.\n\nWhat is YAML? That is not pertinent to this repo, but GitHub actions are written in YAML.\n\nCheck 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.\n\nIn 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.\n\nHere is an error I got when I tried nesting:\n\n\u003e ERROR: `Error in user YAML: (\u003cunknown\u003e): did not find expected '-' indicator while parsing a block collection at line 4 column 3`\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Links\n\nThis category accepts all text effects and includes:\n\n- External links\n- Anchor links (same page)\n- Footnote links\n\n### External\n\n**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:\n\nHere is a link to my [Beginner Git Commands](https://github.com/Kernix13/beginner-git-commands) repositiory. And here is the syntax:\n\n```markdown\n[Link text](URL 'Optional link title')\n[Beginner Git Commands](https://github.com/Kernix13/beginner-git-commands 'Basic Git commands repo')\n```\n\n**NOTE**: Only use a title if it adds information. Don't set the title text to be the same as the link text.\n\nHere is a bold, italic and strikethrough link:\n\n- **[Google](https://google.com)**\n- _[Google](https://google.com)_\n- ~~[Google](https://google.com)~~\n- \u003cins\u003e[Google](https://google.com)\u003c/ins\u003e\n\nWhy would you use a strikethorugh effect on a link? I'm not sure. For a page under construction, being moved, etc?\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Anchor\n\n**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 `\u003ca\u003e` tag.\n\nFor the simple links, use the same syntax as for **External Links** above with 2 exceptions for the URL part:\n\n1. Precede the _URL_ with a hashtag\n1. Use the exact same text as where you are linking to but...\n 1. All the text needs to be in lowercase, and\n 1. All words need to be connected with a dash (no spaces)\n\nHere is an example for the _Strike thru_ section:\n\n```markdown\n[Strike thru](#strike-thru)\n```\n\nHere is the code for the anchor link using an HTML `\u003ca\u003e` and a `\u003cdiv\u003e` tag. I actually changed my 'Back to Top' link to be an `\u003ca\u003e` link inside of a `\u003cdiv\u003e` so that I could align the link to the right and use an HTML entity for an arrow up:\n\n```html\n\u003c!-- element with id at top of page --\u003e\n\u003cdiv id=\"back-to-top\"\u003e\u003c/div\u003e\n\n\u003c!-- The link you click to go back to top --\u003e\n\u003cdiv align=\"right\"\u003e\n \u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\n\u003c/div\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Footnotes\n\n**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.\n\nThen 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:\n\nFootnote.[^1]\n\nSome other important footnote.[^2]\n\nUse this for where you want the link: `[^1]`\n\nHere is the actual footnote syntax:\n\n```markdown\n[^1]: This is footnote number one.\n[^2]: Here is the second footnote.\n```\n\n[^1]: This is footnote number one.\n[^2]: Here is the second footnote.\n\n### At mentions\n\nAt mentions do not seem to work as links. This is an at mention test:\n\n@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.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n---\n\n## Lists\n\nThis category has:\n\n- Unordered lists\n- Ordered lists\n- Nested lists\n- Task lists\n\nYou can use all text effects but with one exception: None of the effects work for Task lists.\n\n### Unordered\n\n**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 \u003ckbd\u003eSHIFT\u003c/kbd\u003e key:\n\n- _List item 1_\n- **List item 2**\n- List ~~item 3~~\n\n```markdown\n- _List item 1_\n- **List item 2**\n- List ~~item 3~~\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Ordered\n\n**Ordered lists**: use a number followed by a period (1., 2., 3. etc.) and then a space to create an ordered list:\n\n1. Ordered **item 1**\n1. Ordered _item 2_\n1. Ordered ~~item 3~~\n\n```markdown\n1. Ordered **item 1**\n1. Ordered _item 2_\n1. Ordered ~~item 3~~\n```\n\n**NOTE**: By using \"1.\" for each list item, you can cut \u0026 paste to change the order of items and the numbering will change to match the new order.\n\nDoes this make sense? You can use both unordered and ordered together -\u003e bullets with roamn numerals, or numbers with bullets:\n\n1. - What?\n1. - Really?\n1. - Why?\n\n- 10. What is this\n- 15. Again?\n- 20. Any use cases?\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Nested\n\n**Nested list**: Use the \u003ckbd\u003eSPACEBAR\u003c/kbd\u003e key to align the dash or asterisk directly beneath the first character in the parent list item above it to create a nested list:\n\n- List item 1\n- List item 2\n - Child item 1\n - Child item 2\n - Third level item\n- List item 3\n\n```markdown\n- List item 1\n- List item 2\n - Child item 1\n - Child item 2\n - Third level item\n- List item 3\n```\n\nFor 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:\n\n1. Ordered item 1\n1. Ordered item 2\n 1. Child item 1\n 1. Child item 2\n 1. Third level item\n 1. Third level item 2\n 1. Third level item 3\n 1. Fourth level 1\n 1. Fourth level 2\n 1. Fourth level 3\n1. Ordered item 3\n\n```markdown\n1. Ordered item 1\n1. Ordered item 2\n 1. Child item 1\n 1. Child item 2\n 1. Third level item\n 1. Third level item 2\n 1. Third level item 3\n 1. Fourth level 1\n 1. Fourth level 2\n 1. Fourth level 3\n1. Ordered item 3\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Tasks\n\nYou 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\":\n\n- [ ] Incomplete _task_\n- [x] Completed **task**\n - [ ] Incomplete ~~subtask~~\n - [x] Completed subtask\n\n```markdown\n- [ ] Incomplete _task_\n- [x] Completed **task**\n - [ ] Incomplete ~~subtask~~\n - [x] Completed subtask\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n---\n\n## Code\n\nThis 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:\n\n- Inline code\n- Generic code blocks\n- \u003ckbd\u003eTAB\u003c/kbd\u003e code blocks\n- Code language blocks\n- `Diff` code blocks\n\n### Inline\n\nUse a `single backtick` before and after text to display it as inline code:\n\n```markdown\n`single backtick`\n```\n\nHere 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`.\n\n### Tab\n\nIt 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 \u003ckbd\u003eTAB\u003c/kbd\u003e button twice then enter your code:\n\n This is a **code** _block_ made by ~~hitting~~ TAB 2 X's\n\n### Generic\n\nTo add code that requires more than 1 line then use 3 backticks, hit \u003ckbd\u003eENTER\u003c/kbd\u003e, add your code block, hit \u003ckbd\u003eENTER\u003c/kbd\u003e again and add 3 more back ticks.\n\n ```\n *, *::before, *::after {\n box-sizing: border-box;\n }\n ```\n\n```\n*, *::before, *::after {\n box-sizing: border-box;\n}\n```\n\n**From GitHub docs**: _To display triple backticks in a fenced code block, wrap them inside quadruple backticks_.\n\nHowever, you can also hit \u003ckbd\u003eTAB\u003c/kbd\u003e twice:\n\n ```\n TAB twice to show the triple backticks\n ```\n\n ````\n ```\n Triples inside quadruples - TAB x 2 is easier\n ```\n ````\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Language block\n\nThis 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.\n\n ```css\n rules here\n ```\n\n**CSS**:\n\n```css\na {\n text-decoration: none;\n}\n```\n\n**HTML**:\n\n```html\n\u003cimg href=\"http://somewhere.com\" /\u003e\n```\n\n**JavaScript**:\n\n```js\nconsole.log(${variable})\n```\n\n**PHP**:\n\n```php\n\u003c?php the_content(); ?\u003e\n```\n\nHere 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:\n\n```fix\neverything is blue\n= light blue after equal sign (but not in VS Code)\n```\n\n ```fix\n everything is blue\n = light blue after equal sign (but not in VS Code)\n ```\n\nHere is the full list of supported languages and code syntax highlighting.\n\nCheck 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:\n\n```markdown\nactionscript3\napache\napplescript\nasp\nbrainfuck\nc\ncfm\ncjs\nclojure\ncmake\ncoffee-script, coffeescript, coffee\ncpp - C++\ncs\ncsharp\ncss\ncsv\nbash, sh, zsh\ndiff\nelixir\nerb - HTML + Embedded Ruby\ngo\nhaml\nhttp\njava\njavascript\njs\njson\njsx\nless\nlolcode\nmake - Makefile\nmarkdown\nmatlab\nnginx\nobjectivec\npascal\nPHP\nPerl\npython\nprofile - python profiler output\nrust\nsalt, saltstate - Salt\nshell, sh, zsh, bash - Shell scripting\nscss\nsql\nsvg\nswift\nrb, jruby, ruby - Ruby\nsmalltalk\nvim, viml - Vim Script\nvolt\nvhdl\nvue\nxml - XML and also used for HTML with inline CSS and Javascript\nyaml\n```\n\nI've also noticed that `ini` and `TOML` as the language block language also show syntax highlighting.\n\nFor terminal commands like for NPM, use `bash`, `sh`, or `zsh`.\n\nTrying to find a language to style terminal errors or errors \u0026 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.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Diff\n\nThis 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:\n\n```diff\n- this code or text is the old version\n+ this is what it was changed to\n```\n\n````\n```diff\n- this code or text is the old version\n+ this is what it was changed to\n```\n````\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n---\n\n## Hidden Elements\n\nThis is an odd category with 3 effects, one of which you have probably only seen on Discord:\n\n- Comments\n- Spoiler text\n- Details\n\nOnly Spoiler text accepts text effects.\n\n### Comments\n\nThis 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:\n\n\u003c!-- There is a comment here that you can't see --\u003e\n\n```markdown\n\u003c!-- There is a comment here that you can't see --\u003e\n```\n\nComments 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 `\u003c!-- --\u003e` in HTML.\n\n### Spoiler\n\nOn 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:\n\n```markdown\n||Spoiler text|| in Discord\n```\n\n**NOTE**: This does not work on Slack or here on GitHub.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Details\n\nThis 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:\n\n\u003cdetails\u003e\n \u003csummary\u003eTitle 1\u003c/summary\u003e\n \u003cp\u003eSome hidden content goes here\u003c/p\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n \u003csummary\u003eTitle 2\u003c/summary\u003e\n \u003cp\u003eSame stuff here\u003c/p\u003e\n\u003c/details\u003e\n\n```html\n\u003cdetails\u003e\n \u003csummary\u003eTitle 1\u003c/summary\u003e\n \u003cp\u003eSome hidden content goes here\u003c/p\u003e\n Here is some more without a paragraph tag\n\u003c/details\u003e\n\u003cdetails\u003e\n \u003csummary\u003eTitle 2\u003c/summary\u003e\n \u003cp\u003eSame stuff here\u003c/p\u003e\n\u003c/details\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n---\n\n## Visual Elements\n\nThe 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`.\n\n### Images\n\nImages 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:\n\n\u003cbr /\u003e\n\n![picture alt text](./markdown-image.png 'Title is optional')\n\n ![picture alt](./markdown-image.png 'Title is optional')\n\nraw.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:\n\n```html\n\u003cimg\n src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\"\n/\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Math\n\nFinally, per GitHub:\n\n\u003e ...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.\n\n1. Use a single dollar sign (`$`) at the beginning and end of an inline math expression.\n2. Use 2 dollar sign (`$$`) at the beginning and end for a block of math expressions.\n\nInline example: this `$(ax^2 + bx + c = 0)$` renders as $(ax^2 + bx + c = 0)$.\n\nInline 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)$\n\nInline exception 2: use `\u003cspan\u003e$\u003c/span\u003e` for inline use of dollar sign before a math expression.\n\nBlock example: `$$ x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a} $$` renders as:\n\n$$ x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a} $$\n\nBlock 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:\n\n$$\\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)$$\n\nHere are the important symbols to know:\n\n- `^` = exponent, e.g. $a^3$\n- `{ }` = required for certain expressions such as square root\n- `\\pm` = plus\\minus symbol: $\\pm$\n- `\\sqrt` = square root symbol: $\\sqrt{b}$\n- `\\over` = division: $a \\over b$\n- `\\leq` = less than or equal to: $\\leq$\n- `\\geq` = greater than or equal to: $\\geq$\n- `\\ne` = not equal to: $ \\ne $\n- `\\sum` = Sigma, summation symbol: $\\sum$\n- `\\val` = sub-script value: $a_i$\n- `\\{val=num}^n` = start val and max (n) val for sum\n- `\\Omega` and `\\omega` = greek Omega or omega\n- `\\int` = interval\n- `\\bmod` and `\\pmod` = modular operators\n- `\\frac` = fractions\n- `\\binom` = binomial coefficient\n\nNot sure for the following: `\\left`, `\\right`, `\\forall`, `\\partial`, `\\rho`, `\\nabla`, `\\cdot`, `\\vec`, `\\mathrm`, `\\in`, ...\n\nFor some reason the symbols in the lists above are not all displaying (?)\n\n#### Examples for Greek letters\n\nGreek 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.\n\nUse `\\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.\n\n#### Examples for Operators\n\nAn 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).\n\nUse `\\lim\\limits_{x \\to \\infty} \\exp(-x) = 0` for $\\lim\\limits_{x \\to \\infty} \\exp(-x) = 0$\n\n#### Examples of Powers and indices\n\nPowers 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}$.\n\nFor powers with more than one digit, surround the power with `{ }`: use `n^{22}` for $n^{22}$.\n\nAn 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}$.\n\n#### Examples of Fractions and Binomials\n\nA 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}$$\n\nYou can embed fractions within fractions using `\\frac{\\frac{1}{x}+\\frac{1}{y}}{y-z}`:\n\n$$\\frac{\\frac{1}{x}+\\frac{1}{y}}{y-z}$$\n\nThe `\\tfrac` and `\\dfrac` commands force the use of the respective styles, `\\textstyle` and `\\displaystyle`. Similarly, the `\\tbinom` and `\\dbinom` commands typeset the binomial coefficient.\n\nFor relatively simple fractions, especially within the text, it may be more aesthetically pleasing to use powers and indices instead: `^3/_7` for $^3/_7$\n\nIf 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.\n\nCheck 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:\n\n- [Multiplication of two numbers](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Multiplication_of_two_numbers)\n- [Roots](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Roots)\n- [Sums and integrals](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Sums_and_integrals)\n- [Brackets, braces and delimiters](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Brackets,_braces_and_delimiters)\n- [Matrices and arrays](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Matrices_and_arrays)\n- [Adding text to equations](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Adding_text_to_equations)\n- [Formatting mathematics symbols](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Formatting_mathematics_symbols)\n- [Color](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Color)\n\nColor example: try `k = {\\color{red}x} \\mathbin{\\color{blue}-} 2` for $k = {\\color{red}x} \\mathbin{\\color{blue}-} 2$\n\nOther links:\n\n- [MathJax](https://www.mathjax.org/)\n- GitHub blog post [Math support in Markdown](https://github.blog/2022-05-19-math-support-in-markdown/)\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Emojis\n\nI'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:\n\n```markdown\n:Emoji_code:\n```\n\nApproval: :+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:, :star:, :star2:, :heart:, :exclamation:\n\n```markdown\n:+1:, :smile:, :ok_hand:, :white_check_mark:, :heavy_check_mark:,\n:star:, :star2:, :heart:, :exclamation:\n```\n\nDisapproval, questions, problems: :-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:, :warning:, :interrobang:\n\n```markdown\n:-1:, :question:, :grey_question:, :x:, :boom:, :bomb:, :astonished:,\n:warning:, :interrobang:\n```\n\nDirectional: :point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down:\n\n```markdown\n:point_right:, :point_left:, :arrow_left:, :arrow_right:, :arrow_up:, :arrow_down:\n```\n\nTime, alarms: :bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar:\n\n```markdown\n:bell:, :no_bell:, :hourglass:, :alarm_clock:, :watch:, :calendar:\n```\n\nWeather/nature: :sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: πŸ’§ β˜” ⭐ 🌑️ ❄️ β›„ 🌱 🐚 🍁 πŸƒ 🌲 🌳\n\n```markdown\n:sunny:, :cloud:, :snowflake:, :zap:, :high_brightness: :droplet: :umbrella: :star: :thermometer: :snowflake: :snowman: :seedling: :shell: :maple_leaf: :leaves: :evergreen_tree: :deciduous_tree:\n```\n\nOffice/Business: :scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: πŸ’» πŸ“ž πŸ“« πŸ’΅ πŸ’³ πŸ”— πŸ“Ž πŸ’² ✏️\n\n```markdown\n:scissors:, :pushpin:, :paperclip:, :phone:, :copyright:, :email: :computer: :telephone_receiver: :mailbox: :dollar: :credit_card: :link: :paperclip: :heavy_dollar_sign: :pencil2:\n```\n\nMiscellaneous/playful: :alien:, :green_heart:, :blue_heart:, :purple_heart:, :mushroom:, :pizza:, :beer:, :icecream:, :sound:, :speaker:, :lock:, :guitar:, :one:, :two: (and other #'s), \u003cbr\u003e\n:link:, :speech_balloon:, :mag:, :mag_right:, :key:, :bulb: πŸ‘€ 🐱 🐢 🦴 🌐 🌎 πŸŽƒ πŸ‘» πŸŽ… πŸŽ„ 🎁 🎈 πŸ”¦ 🚽 πŸ”§ πŸ”¨ β›Ί β›΅ βš“ πŸš€ ✈️ πŸ”₯ πŸ’€ 🚩 ♾️ πŸ“ 🍷 πŸ’­\n\n```markdown\n:alien:, :green_heart:, :blue_heart:, :purple_heart:, :mushroom:, :pizza:, :beer:,\n:icecream:, :sound:, :speaker:, :lock:, :guitar:, :one:, :two: (and other #'s),\n: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:\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Shields\n\nCheck the file `shields.md` for a full list.\n\n[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:\n\n```md\nGitHub commit activity:\n![GitHub commit activity](https://img.shields.io/github/commit-activity/y/Kernix13/WriterAssist?style=flat-square)\nGitHub contributors:\n![GitHub contributors](https://img.shields.io/github/contributors/Kernix13/WriterAssist?style=flat-square)\nGitHub all releases:\n![GitHub all releases](https://img.shields.io/github/downloads/Kernix13/WriterAssist/total?style=flat-square)\nGitHub language count:\n![GitHub language count](https://img.shields.io/github/languages/count/Kernix13/WriterAssist?style=flat-square)\nGitHub top language:\n![GitHub top language](https://img.shields.io/github/languages/top/Kernix13/WriterAssist?style=flat-square)\nlicense\n![GitHub](https://img.shields.io/github/license/Kernix13/WriterAssist?style=flat-square)\n```\n\nIn 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:\n\n- **Analysis badges**: GitHub language count, GitHub top language, and GitHub search hit counter\n- **Size badge**: GitHub repo file count\n- **Downloads badge**: GitHub all releases\n- **Funding badge**: GitHub sponsors (probably not for beginners)\n- **Issue tracking badges**: GitHub issue/pull request detail, GitHub issues, GitHub closed issues, ...and many more, (_what is hacktoberfest?_)\n- **License badge**: GitHub license\n- **Social badges**: GitHub followers, forks, repo stars, users stars, watchers, ...\n- **Version badge**: GitHub manifest version\n- **Activity badges**: GitHub contributors, GitHub commit activity, GitHub last commit, GitHub release date,\n- **Other badges**: GitHub discussions, GitHub package.json dynamic (keywords)\n\nShield.io will build the links for you, but here is the breakdown of the structure:\n\n```markdown\nhttps://img.shields.io/github/ + Label/ + user/ + repo + ?options\n```\n\nYou 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/`:\n\n```markdown\n\u003c!-- Forks --\u003e\n\nconstant + forks/Kernix13/markdown-cheatsheet?style=flat-square\n\n\u003c!-- Commits --\u003e\n\nconstant + commit-activity/y/Kernix13/markdown-cheatsheet?style=flat-square\n\n\u003c!-- Contributors --\u003e\n\nconstant + contributors/Kernix13/markdown-cheatsheet?style=flat-square\n```\n\nFor 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 `\u003cspan\u003e` tags to get them to display inline:\n\n```markdown\n\u003cspan\u003e\u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/Kernix13/markdown-cheatsheet?style=for-the-badge\"\u003e\u003c/span\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Devicons\n\nDevicons 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:\n\n```markdown\n\u003c!-- img src example --\u003e\n\nhttps://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\n\n\u003c!-- full example on an img tag inside a link tag --\u003e\n\n\u003ca href=\"https://getbootstrap.com\" target=\"_blank\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\" alt=\"bootstrap\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e\n```\n\nYou 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:\n\n#### Devicons in an anchor and image tag\n\n\u003ca href=\"https://getbootstrap.com\" target=\"_blank\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\" alt=\"bootstrap\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e\n\u003ca href=\"https://getbootstrap.com\" target=\"_blank\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/vscode/vscode-original.svg\" alt=\"vs code\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e\n\n#### Devicons in an image tag only\n\n\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\" alt=\"bootstrap\" width=\"40\" height=\"40\"/\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/vscode/vscode-original.svg\" alt=\"vs code\" width=\"40\" height=\"40\"/\u003e\n\n#### Devicons in a span and image tag\n\n\u003cspan\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\" alt=\"bootstrap\" width=\"40\" height=\"40\"/\u003e \u003c/span\u003e\n\u003cspan\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/vscode/vscode-original.svg\" alt=\"vs code\" width=\"40\" height=\"40\"/\u003e \u003c/span\u003e\n\nThey 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.\n\nWhen 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.\n\n**NOTE 1**: The link attribute `target=\"_blank\"` does not open links in a new tab.\n\n**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.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Mermaid Diagrams\n\nThis 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:\n\n graph TD;\n A--\u003eB;\n A--\u003eC;\n B--\u003eD;\n C--\u003eD;\n\n```mermaid\n graph TD;\n A--\u003eB;\n A--\u003eC;\n B--\u003eD;\n C--\u003eD;\n```\n\nOr this\n\nflowchart LR\n\n A[Hard] --\u003e|Text| B(Round)\n B --\u003e C{Decision}\n C --\u003e|One| D[Result 1]\n C --\u003e|Two| E[Result 2]\n\n```mermaid\nflowchart LR\n\nA[Hard] --\u003e|Text| B(Round)\nB --\u003e C{Decision}\nC --\u003e|One| D[Result 1]\nC --\u003e|Two| E[Result 2]\n```\n\nAs I learn more I will add more but this is really cool! Check out my file `mermaid.md` for in-depth notes.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### HTML entities\n\nThis 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.\n\nBold, 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:\n\n\u003cbr\u003e\n\n**Business \u0026 Financial**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026copy;` | \u0026copy; | Copyright |\n| `\u0026#8471;` | \u0026#8471; | Sound Copyright |\n| `\u0026trade;` | \u0026trade; | Trademark |\n| `\u0026reg;` | \u0026reg; | Registered TM |\n| `\u0026dollar;` | \u0026dollar; | Dollar |\n| `\u0026cent;` | \u0026cent; | Cent |\n| `\u0026pound;` | \u0026pound; | Pound |\n| `\u0026euro;` | \u0026euro; | Euro |\n| `\u0026#9993;` | \u0026#9993; | Envelope |\n| `\u0026check;` | \u0026check; | Check mark |\n| `\u0026#9998;` | \u0026#9998; | Pencil |\n| `\u0026#10002;` | \u0026#10002; | Pen tip |\n| `\u0026#9990;` | \u0026#9990; | Phone |\n| `\u0026#9986;` | \u0026#9986; | Scissors |\n| `\u0026#9888;` | \u0026#9888; | Warning |\n\n\u003cbr\u003e\n\n**Directional**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026larr;` | \u0026larr; | Left arrow |\n| `\u0026rarr;` | \u0026rarr; | Right arrow |\n| `\u0026uarr;` | \u0026uarr; | Up arrow |\n| `\u0026darr;` | \u0026darr; | Down arrow |\n| `\u0026#8598;` | \u0026#8598; | Northwest arrow |\n| `\u0026#8599;` | \u0026#8599; | Northeast arrow |\n| `\u0026#8600;` | \u0026#8600; | Southeast arrow |\n| `\u0026#8601;` | \u0026#8601; | Southwest arrow |\n| `\u0026#9650;` | \u0026#9650; | Up triangle |\n| `\u0026#9660;` | \u0026#9660; | Down triangle |\n| `\u0026#9654;` | \u0026#9654; | Right triangle |\n| `\u0026#9664;` | \u0026#9664; | Left triangle |\n| `\u0026#10146;` | \u0026#10146; | Arrowhead |\n| `\u0026#10139;` | \u0026#10139; | Drafting point |\n\n\u003cbr\u003e\n\n**Math and science**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026deg;` | \u0026deg; | Degree |\n| `\u0026plusmn;` | \u0026plusmn; | Plus minus |\n| `\u0026sup2;` | 3\u0026sup2; | Supercript 2 |\n| `\u0026#8322;` | H\u0026#8322;O | Subscript 2 |\n| `\u0026#8323;` | NO\u0026#8323;| Subscript 3 |\n| `\u0026frac14;` | \u0026frac14; | 1/4 fraction |\n| `\u0026frac38;` | \u0026frac38; | 3/8 fraction |\n| `\u0026times;` | \u0026times; | Multiplication |\n| `\u0026divide;` | \u0026divide; | Division |\n| `\u0026minus;` | \u0026minus; | Subtraction |\n| `\u0026empty;` | \u0026empty; | Empty |\n| `\u0026Phi;` | \u0026Phi; | Phi |\n| `\u0026pi;` | \u0026pi; | Pi |\n| `\u0026#8486;` | \u0026#8486; | Omega |\n| `\u0026sum;` | \u0026sum; | Sum, Sigma |\n| `\u0026radic;` | \u0026radic; | Square root |\n| `\u0026infin;` | \u0026infin; | Infinity |\n| `\u0026sim;` | \u0026sim; | Proportional |\n| `\u0026asymp;` | \u0026asymp; | Approximately |\n| `β‰ ` | β‰  | Not equal |\n| `\u0026le;` | \u0026le; | Less or equal to |\n| `\u0026ge;` | \u0026ge; | Greater or equal |\n| `\u0026ang;` | \u0026ang; | Angle |\n| `\u0026angmsd;`| \u0026angmsd; | Measured angle |\n| `\u0026or;` | \u0026or; | Down angle |\n\n**NOTE**: For subscripts 0 thru 9, change the last number, e.g.:\n\nZero\u0026#8320; code = `\u0026#8320;` so change 8320 to 8321 for subscript 1 (One\u0026#8321;), change 8320 to 8322 for subscript 2 (Two\u0026#8322;), etc.\n\n\u003c!--\nhttp://thenewcode.com/1005/Writing-Musical-Notation-on-Web-Pages-The-Basics\n--\u003e\n\n\u003cbr\u003e\n\n**Music**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026#9837;`| \u0026#9837; | Music flat |\n| `\u0026#9838;`| \u0026#9838; | Music natural |\n| `\u0026#9839;`| \u0026#9839; | Music sharp |\n| `\u0026#119082;`| \u0026#119082; | Double Sharp |\n| `\u0026#119083;`| \u0026#119083; | Double flat |\n| `\u0026#119070;`| \u0026#119070; | G-clef |\n| `\u0026#119073;`| \u0026#119073; | C-clef |\n| `\u0026#119074;`| \u0026#119074; | F-clef |\n| `\u0026#119092;`| \u0026#119092; | Common time |\n| `\u0026#119093;`| \u0026#119093; | Cut time |\n| `\u0026#248;`| \u0026#248; | Half-diminished 7th |\n| `\u0026#119132;`| \u0026#119132; | Breve |\n| `\u0026#119133;`| \u0026#119133; | Whole note |\n| `\u0026#119134;`| \u0026#119134; | Half note |\n| `\u0026#9833;`| \u0026#9833; | Quarter note |\n| `\u0026#119135;`| \u0026#119135; | Quarter note |\n| `\u0026sung;`| \u0026sung; | 8th note |\n| `\u0026#9834;`| \u0026#9834; | 8th note |\n| `\u0026#119136;`| \u0026#119136; | 8th note |\n| `\u0026#9835;`| \u0026#9835; | Beamed 8th note |\n| `\u0026#119137;`| \u0026#119137; | 16th note |\n| `\u0026#9836;`| \u0026#9836; | Beamed 16th note |\n| `\u0026#119094;`| \u0026#119094; | Octave |\n| `\u0026#119057;` | \u0026#119057; | Fermata |\n| `\u0026#119058;` | \u0026#119058; | Breath mark |\n| `\u0026#119059;` | \u0026#119059; | Caesura |\n| `\u0026#119046;` | \u0026#119046; | Left repeat |\n| `\u0026#119047;` | \u0026#119047; | Right repeat |\n| `\u0026#119048;` | \u0026#119048; | Repeat |\n| `\u0026#119049;` | \u0026#119049; | Dal Segno |\n| `\u0026#119050;` | \u0026#119050; | Da Capo |\n| `\u0026#119051;` | \u0026#119051; | Segno |\n| `\u0026#119052;` | \u0026#119052; | Coda |\n| `\u0026#119183;` | \u0026#119183; | Piano |\n| `\u0026#119184;` | \u0026#119184; | Mezzo |\n| `\u0026#119185;` | \u0026#119185; | Forte |\n| `\u0026#119186;` | \u0026#119186; | Crescendo |\n| `\u0026#119187;` | \u0026#119187; | Decrescendo |\n| `\u0026#119040;` | \u0026#119040; | Single barline |\n| `\u0026#119041;` | \u0026#119041; | Double barline |\n| `\u0026#119042;` | \u0026#119042; | Final barline |\n| `\u0026#119217;` | \u0026#119217; | Glissando up |\n| `\u0026#119218;` | \u0026#119218; | Glissando down |\n| `\u0026#119188;` | \u0026#119188; | Grace note |\n| `\u0026#119191;` | \u0026#119191; | Turn |\n| `\u0026#119192;` | \u0026#119192; | Inverted turn |\n| `\u0026#119081;` | \u0026#119081; | Full measure rest |\n| `\u0026#119098;` | \u0026#119098; | Dbl whole note rest |\n| `\u0026#119099;` | \u0026#119099; | Whole rest |\n| `\u0026#119100;` | \u0026#119100; | Half rest |\n| `\u0026#119101;` | \u0026#119101; | Quarter rest |\n| `\u0026#119102;` | \u0026#119102; | Eigth rest |\n| `\u0026#119103;` | \u0026#119103; | Sixteenth rest |\n| `\u0026#119060;` | \u0026#119060; | Brace |\n| `\u0026#119061;` | \u0026#119061; | Bracket |\n| `\u0026#119163;` | \u0026#119163; | Accent |\n| `\u0026#119164;` | \u0026#119164; | Staccato |\n\n\u003cbr\u003e\n\n**Miscellaneous**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026spades;` | \u0026spades; | Spade |\n| `\u0026clubs;` | \u0026clubs; | Club |\n| `\u0026hearts;` | \u0026hearts; | Heart |\n| `\u0026diams;` | \u0026diams; | Diamond |\n| `\u0026star;`| \u0026star; | Star |\n| `\u0026#9812;`| \u0026#9812; | King |\n| `\u0026#9813;`| \u0026#9813; | Queen |\n| `\u0026#9814;`| \u0026#9814; | Rook |\n| `\u0026#9815;`| \u0026#9815; | Bishop |\n| `\u0026#9816;`| \u0026#9816; | Knight |\n| `\u0026#9817;`| \u0026#9817; | Pawn |\n| `\u0026starf;`| \u0026starf; | Filled star |\n| `\u0026female;`| \u0026female; | Female |\n| `\u0026male;`| \u0026male; | Male |\n| `\u0026para;` | \u0026para; | Paragraph |\n| `\u0026#167;` | \u0026#167; | Selection sign |\n| `\u0026#9992;` | \u0026#9992; | Airplane |\n| `\u0026#10007;` | \u0026#10007; | Ballot X |\n| `\u0026#10008;` | \u0026#10008; | Heavy Ballot X |\n| `\u0026#9728;` | \u0026#9728; | Black Sun |\n| `\u0026#9788;` | \u0026#9788; | White Sun |\n| `\u0026#x2601;` | \u0026#x2601; | Cloud |\n| `\u0026#10052;` | \u0026#10052; | Snowflake |\n| `\u0026#x2602;` | \u0026#x2602; | Umbrella |\n| `\u0026not;` | \u0026not; | Negation |\n| `\u0026macr;` | \u0026macr; | Spacing Macron |\n| `\u0026laquo;` | \u0026laquo; | Left quote |\n| `\u0026raquo;` | \u0026raquo; | Right quote |\n| `\u0026ndash;` | \u0026ndash; | En dash |\n| `\u0026mdash;` | \u0026mdash; | Em dash |\n| `\u0026#8416;` | \u0026#8416; | Circle slash |\n| `\u0026#9752;` | \u0026#9752; | Shamrock |\n| `\u0026#9774;` | \u0026#9774; | Peace symbol |\n| `\u0026#10084;` | \u0026#10084; | Heavy heart |\n\n\u003cbr\u003e\n\n**Astrology**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026oplus;` | \u0026oplus; | Earth |\n| `\u0026#9793;` | \u0026#9793; | Earth |\n| `\u0026#9737;` | \u0026#9737; | Sun |\n| `\u0026#9790;` | \u0026#9790; | Moon |\n| `\u0026#9800;`| \u0026#9800; | Aries |\n| `\u0026#9801;`| \u0026#9801; | Taurus |\n| `\u0026#9802;`| \u0026#9802; | Gemini |\n| `\u0026#9803;`| \u0026#9803; | Cancer |\n| `\u0026#9804;`| \u0026#9804; | Leo |\n| `\u0026#9805;`| \u0026#9805; | Virgo |\n| `\u0026#9806;`| \u0026#9806; | Libra |\n| `\u0026#9807;`| \u0026#9807; | Scorpio |\n| `\u0026#9808;`| \u0026#9808; | Sagittarius |\n| `\u0026#9809;`| \u0026#9809; | Capricorn |\n| `\u0026#9810;`| \u0026#9810; | Aquarius |\n| `\u0026#9811;`| \u0026#9811; | Pisces |\n| `\u0026#9791;`| \u0026#9791; | Mercury |\n| `\u0026#9792;`| \u0026#9792; | Venus|\n| `\u0026female;`| \u0026female; | Venus|\n| `\u0026#9794;`| \u0026#9794; | Mars |\n| `\u0026male;`| \u0026male; | Mars |\n| `\u0026#9795;`| \u0026#9795; | Jupiter |\n| `\u0026#9796;`| \u0026#9796; | Saturn |\n| `\u0026#9797;`| \u0026#9797; | Uranus |\n| `\u0026#9798;`| \u0026#9798; | Neptune |\n| `\u0026#9799;`| \u0026#9799; | Pluto |\n| `\u0026#9738;`| \u0026#9738; | Ascending node |\n| `\u0026#9739;`| \u0026#9739; | Descending node |\n| `\u0026#9740;`| \u0026#9740; | Conjunction (0\u0026deg;) |\n| `\u0026#9914;`| \u0026#9914; | Semi-sextile (30\u0026deg;) |\n| `\u0026ang;`| \u0026ang; | Semi-square (45\u0026deg;) |\n| `\u0026#9913;`| \u0026#9913; | Sextile (60\u0026deg;) |\n| `\u0026#9744;`| \u0026#9744; | Square (90\u0026deg;) |\n| ``| | Trine (120\u0026deg;) | | `\u0026#9915;`| \u0026#9915; | Quincunx (150\u0026deg;) | | `\u0026#9741;`| \u0026#9741; | Opposition (180\u0026deg;) |\n\n\u003cbr\u003e\n\n**Esoteric**:\n| Entity | Result| Title |\n| ---- | ---- | ---- |\n| `\u0026#8501;`| \u0026#8501; | Aleph |\n| `\u0026#8502;`| \u0026#8502; | Bet/Beth |\n| `\u0026#8503;`| \u0026#8503; | Gimel |\n| `\u0026#8504;`| \u0026#8504; | Dalet/Daleth |\n| `\u0026#9764;`| \u0026#9764; | Caduceus Staff |\n| `\u0026#9877;`| \u0026#9877; | Staff of Aesculapius |\n| `\u0026#9765;`| \u0026#9765; | Ankh |\n| `\u0026#9766;`| \u0026#9766; | Orthodox Cross |\n| `\u0026#9767;`| \u0026#9767; | Chi Rho |\n| `\u0026#9768;`| \u0026#9768; | Cross or Lorraine |\n| `\u0026#9769;`| \u0026#9769; | Cross of Jerusalem |\n| `\u0026#9775;`| \u0026#9775; | Yin Yan, Ying Yang |\n| `\u0026#9776;`| \u0026#9776; | Heaven I-Ching |\n| `\u0026#9777;`| \u0026#9777; | Lake |\n| `\u0026#9778;`| \u0026#9778; | Fire |\n| `\u0026#9779;`| \u0026#9779; | Thunder |\n| `\u0026#9780;`| \u0026#9780; | Wind |\n| `\u0026#9781;`| \u0026#9781; | Water |\n| `\u0026#9782;`| \u0026#9782; | Mountain |\n| `\u0026#9783;`| \u0026#9783; | Earth |\n| `\u0026#9866;`| \u0026#9866; | Yang |\n| `\u0026#9867;`| \u0026#9867; | Yin |\n| `\u0026#9868;`| \u0026#9868; | Greater Yang |\n| `\u0026#9869;`| \u0026#9869; | Greater Yin |\n| `\u0026#9870;`| \u0026#9870; | Lesser Yang |\n| `\u0026#9871;`| \u0026#9871; | Lesser Yin |\n| `\u0026#9784;`| \u0026#9784; | Wheel of Dharma |\n| `\u0026#10017;`| \u0026#10017; | Seal of Solomon |\n| `\u0026#10029;`| \u0026#10029; | Pentagram |\n\nNOTE: 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).\n\n\u003cbr\u003e\n\n**Hotkey list**:\n| Key | Symbol |\n| --- | --- |\n| Option | βŒ₯ |\n| Control | βŒƒ |\n| Command | ⌘ |\n| Shift | ⇧ |\n| Caps Lock | β‡ͺ |\n| Tab | β‡₯ |\n| Esc | βŽ‹ |\n| Power | ⌽ |\n| Return | ↩ |\n| Delete | ⌫ |\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n---\n\n## HTML\n\n\u003c!-- STOPPED EDITS/REVISIONS HERE DEC 18, 2022 --\u003e\n\nThe 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.\n\nI used a GitHub generator for my Profile README. In there are `\u003cp\u003e`, `\u003ca\u003e`, and `\u003cimg\u003e` tags. In the Details section above, there are `\u003cdetails\u003e`, `\u003csummary\u003e`, and `\u003cp\u003e` tags. I found this gist called \u003cq\u003e[HTML Tags You Can Use on GitHub](https://gist.github.com/seanh/13a93686bf4c2cb16e658b3cf96807f2)\u003c/q\u003e. That document mentions some tags you can use.\n\nI tested every HTML tag that made sense. I skipped tags like `section`, `header`, `nav`, etc. Here is a breakdown of that testing.\n\n### Block elements\n\nNOTE: I should not have pushed `index.html` because I was only using to test the syntax for some HTML tags.\n\n_Duplicates markdown_: `blockquote`, `h1` thru `h6`, `hr`, `ol` `ul` `li`, `pre`, `table`\n\n_No markdown equivalent_: `details` with `summary`, `dl` `dt` `dd` (indent), `div`, and `span`.\n\n\u003e Is **align** an attribute? How do I find similar attributes like that?\n\n**Attributes**:\n\n\u003e Is `align` an actual attribute or is it inline CSS?\n\nI 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:\n\n- `blockquote`: align (center, right)\n- `h1` thru `h4`: align (center, right)\n- `h5` and `h6`: align (center, right), very small font size!\n- `div`: align (center, right)\n- `p`: align (center, right)\n- `pre`: align (center, right) - looks odd\n- `ul`, `ol`, `li`: align (center, right) - looks odd\n\n\u003cblockquote align=\"center\"\u003eTesting alignment\u003c/blockquote\u003e\n\n\u003cpre align=\"center\"\u003e\n\u003ccode\u003etesting align=\"center\" in a pre block \u003c/code\u003e\n\u003c/pre\u003e\n\nUnless 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.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Inline elements\n\n\u003e `img` tags display as block level unless nested in table cells or `\u003cspan\u003e` tags\n\n_Duplicates markdown_: `\u003ca\u003e`, `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).\n\n_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`.\n\n**Attributes notes**:\n\n- `a`: target=\"\\_blank\" does not work\n- `img`: align, width, and height all work\n\nSome _Global attributes_ that may have a use: id, draggable, **style**, **title**, tabindex, contenteditable, autofocus.\n\n\u003e What is **_align_**? Do all these accept inline CSS?\n\nThe only tags worth using IMO:\n\n- `a` for anchor links with HTML entities in the link text\n- `headings` align center or right\n- `p` for align center or right\n- `div` as visual dividers using dash (-) or underscore (\\_) or equals (=) or other characters. But can't you just use the characters instead?\n- `br` for line breaks of paragrpah text or as a alternate spacer to `div`\n- `img` to set width and height and align center or right\n- `ins` for underline (`u` is actually better but does not display on GitHub)\n- `kbd` for keyboard keys\n- `samp` for monospaced font as a styling choice\n- `sup` and `sub` for superscript and subscript\n- `dl` `dt` `dd` maybe for the indentation of the definition\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n#### HTML tag examples\n\nThe large gap above the title is from 2 `\u003cbr\u003e` tags. Use only one for a normal separation.\n\n| HTML Tag | Result |\n| :------- | :--------------------------------------------: |\n| `ins` | \u003cins\u003eunderlined text\u003c/ins\u003e |\n| `u` | \u003cu\u003eNo underline on GitHub\u003c/u\u003e |\n| `kbd` | \u003ckbd\u003eCTRL\u003c/kbd\u003e+\u003ckbd\u003eC\u003c/kbd\u003e, \u003ckbd\u003eENTER\u003c/kbd\u003e |\n| `samp` | \u003csamp\u003eThis is monospaced font\u003c/samp\u003e |\n| `sup` | 2\u003csup\u003e3\u003c/sup\u003e |\n| `sub` | H\u003csub\u003e2\u003c/sub\u003eO |\n\n\u003ch3 align=\"center\"\u003eH3 tag with align=\"center\"\u003c/h3\u003e\n\u003cp align=\"center\"\u003eParagraph tag with align=\"center\"\u003c/p\u003e\n\u003ch3 align=\"right\"\u003eH3 tag with align=\"right\"\u003c/h3\u003e\n\u003cp align=\"right\"\u003eParagraph tag with align=\"right\"\u003c/p\u003e\n\n\u003e I think an H2 heading that is center aligned would look great but not a paragraph. When would align right look good?\n\nHere is an example of an HTML entity in an `\u003ca\u003e` tag: \u003ca href=\"#html-entities\"\u003e\u0026uarr; HTML Entities Section\u003c/a\u003e\u003cbr\u003e\nHere is an example of an Emoji in an `\u003ca\u003e` tag: \u003ca href=\"#emojis\"\u003e:smile: Emoji section\u003c/a\u003e\n\n**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 `\u003ca\u003e` 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:\n\n \u003ch3 id=\"commands-after-initial-push\"\u003e\u0026#10551; Commands after initial push\u003c/h3\u003e\n\nAnd here are 2 images with `width=\"200px\"` in a table. The first has `align=\"right\"` and the second has `align=\"left\"`:\n\n| | |\n| :---------------------------------------------------------------: | :--------------------------------------------------------------: |\n| \u003cimg src=\"./graphic-design-tips.jpg\" width=\"200px\" align=\"right\"\u003e | \u003cimg src=\"./graphic-design-tips.jpg\" width=\"200px\" align=\"left\"\u003e |\n\nIt 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 `\u003cspan\u003e` 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 `\u003cdiv\u003e` tag with `align=\"center\"` though you could use `align=\"right\"` as well:\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"./graphic-design-tips.jpg\" width=\"200px\" title=\"Image example\"\u003e\u003c/div\u003e\n\n\u003cbr\u003e\n\n**`dl`, `dt`, and `dd`** example (use for indentation):\n\n\u003cdl\u003e\n \u003cdt\u003eMarkdown Cheat Sheet\u003c/dt\u003e\n \u003cdd\u003eA quick source for making your readme files look great!\u003c/dd\u003e\n\u003c/dl\u003e\n\n```markdown\n\u003cdl\u003e\n \u003cdt\u003eMarkdown Cheat Sheet\u003c/dt\u003e\n \u003cdd\u003eA quick source for making your readme files look great!\u003c/dd\u003e\n\u003c/dl\u003e\n```\n\nPertaining 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.\n\nAlso, 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.\n\n#### How about H4 as a comparison\n\n##### Really small H5 heading\n\n###### Even smaller text for an H6\n\nHere is code to copy instead of having to type it out each time:\n\n```\n\u003ch3 align=\"center\"\u003eHeading3\u003c/h3\u003e\n\n\u003cp align=\"right\"\u003eParagraph\u003c/p\u003e\n\n\u003cimg src=\"link.png\" width=\"200px\" title=\"title\" align\"center\" alt=\"whatever\"\u003e\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"link.png\" width=\"200px\" title=\"Image example\"\u003e\u003c/div\u003e\n```\n\nI 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:\n\n[![Watch the video](./markdown-image.png)](https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420\u0026profile_id=164)\n\n[\u003cimg src=\"./markdown-image.png\" width=\"600\" height=\"300\"\n/\u003e](https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420\u0026profile_id=164)\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n#### CSS Styles\n\nIf 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 `\u003cstyle\u003e` tag or add inline CSS.\n\nHere is an example of a style tag:\n\n```html\n\u003cstyle\u003e\n .red {\n color: red;\n font-weight: 700;\n font-size: 1.5rem;\n }\n .flex {\n display: flex;\n justify-content: space-between;\n }\n .flex-child {\n background-color: #777;\n padding: 0.5em 1em;\n margin: 0.75em auto;\n }\n\u003c/style\u003e\n\n\u003cdiv class=\"red\"\u003eMarkdown css styles\u003c/div\u003e\n\n\u003cdiv class=\"flex\"\u003e\n \u003cp class=\"flex-child\"\u003eBox 1\u003c/p\u003e\n \u003cp class=\"flex-child\"\u003eBox 2\u003c/p\u003e\n \u003cp class=\"flex-child\"\u003eBox 3\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003cstyle\u003e\n.red {\n color: red;\n font-weight:700;\n font-size: 1.5rem;\n}\n.flex {\n display: flex;\n justify-content: space-between;\n}\n.flex-child {\n background-color: #777;\n padding: 0.5em 1em;\n margin: 0.75em auto;\n}\n\u003c/style\u003e\n\n\u003cdiv class=\"red\"\u003e\n Markdown css styles\n\u003c/div\u003e\n\n\u003cdiv class=\"flex\"\u003e\n\u003cp class=\"flex-child\"\u003e\n Box 1\n\u003c/p\u003e\n\u003cp class=\"flex-child\"\u003e\n Box 2\n\u003c/p\u003e\n\u003cp class=\"flex-child\"\u003e\n Box 3\n\u003c/p\u003e\n\u003c/div\u003e\n\n\u003e _**BAD NEWS**: You can not use a `\u003cstyle\u003e` 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._\n\nI 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.\n\n## Buttons\n\n```markdown\n\u003ckbd\u003ecmd + shift + p\u003c/kbd\u003e\n```\n\n\u003ckbd\u003ecmd + shift + p\u003c/kbd\u003e\n\nButton with padding:\n\n```markdown\n\u003ckbd\u003e \u003cbr\u003e cmd + shift + p \u003cbr\u003e \u003c/kbd\u003e\n```\n\n\u003ckbd\u003e \u003cbr\u003e cmd + shift + p \u003cbr\u003e \u003c/kbd\u003e\n\nButton as a link:\n\n```markdown\n\u003ckbd\u003e[Markdown-Cheatsheet](https://github.com/Kernix13/markdown-cheatsheet)\u003c/kbd\u003e\n```\n\n\u003ckbd\u003e[Markdown-Cheatsheet](https://github.com/Kernix13/markdown-cheatsheet)\u003c/kbd\u003e\n\nButton as a link with padding:\n\n```markdown\n\u003ckbd\u003e \u003cbr\u003e [Markdown-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet) \u003cbr\u003e \u003c/kbd\u003e\n```\n\n\u003ckbd\u003e \u003cbr\u003e [Markdown-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet) \u003cbr\u003e \u003c/kbd\u003e\n\nButton as a link without underlin:\n\n```markdown\n[\u003ckbd\u003eMarkdown-Cheatsheet\u003c/kbd\u003e](https://github.com/Kernix13/markdown-cheatsheet)\n```\n\n[\u003ckbd\u003eMarkdown-Cheatsheet\u003c/kbd\u003e](https://github.com/Kernix13/markdown-cheatsheet)\n\n## Resources\n\n1. [Daring Fireball](https://daringfireball.net/projects/markdown/basics 'Detailed markdown syntax') - more markdown documentation\n1. [Complete list of github markdown emojis](https://dev.to/nikolab/complete-list-of-github-markdown-emoji-markup-5aia) - Emojis list\n1. [GitHub emoji list](https://gist.github.com/rxaviers/7360908) - Emojis list\n1. [Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet) - Excellent!\n1. [Emoji list](https://github.com/caiyongji/emoji-list) - there are a lot here as well\n1. [HTML Entities](https://www.toptal.com/designers/htmlarrows/symbols/) - Excellent!\n1. [HTML Entities2](http://mcdlr.com/8/) - maybe only a few unique vs the above link\n1. [Shields.io](https://shields.io/) - Shields for your projects\n1. [Devicons on Github](https://github.com/devicons/devicon/tree/master/icons): scan the list for icons you want to use.\n\n\u003cdiv align=\"right\"\u003e\u0026#8673; \u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernix13%2Fmarkdown-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkernix13%2Fmarkdown-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernix13%2Fmarkdown-cheatsheet/lists"}