Markdown

• Markdown
  • Dropdowns
  • Table of content TOC
  • Empty line break
  • Italic/ bold/ header
  • Making a code fence
  • Adding a shield.io badge
  • Transfer Typora TOC onto GitHub README.md
  • GitHub markdown
    • GitHub page customisation
    • GitHub markdown relative links
  • Reduce HTML elements in Markdown
  • Beautify and Markdown syntax
  • Space after HTML element for markdown syntax
  • Escaping Characters
    • Backstick in inline code
  • Tables in Markdown

Table of contents generated with markdown-toc

Markdown Cheat Sheet | Markdown Guide

Dropdowns

<details>
  <summary>Topic</summary>
  This text will be hidden.
</details>

Table of content TOC

Table of Contents
=================
  * [Topic](#class-name)
  <a href="class-name">Topic</a>

Empty line break

<!--sometimes an empty line break is required, so <br/> does not affect other syntax/elements in markdown-->
<br/>
<br/>

Italic/ bold/ header

<!--italic-->*Hello*
<!--bold-->**Hello**
<!--h3-->### Hello ###

Making a code fence

    ```html/css/markdown
      <!--insert code here-->
    ```

Adding a shield.io badge

GitHub: How to add Shields | Easy, visible info on your projects -YouTube
Shields.io: Quality metadata badges for open source projects

Study the web link address carefully, input in place of <input> and remove the < and > as well. Select the categories in the shields.io website for interactive, dynamic badges linked to GitHub

Markdown:

<!--https://shields.io/--> <!--Markdown-->
![name](https://img.shields.io/static/v1?label=<label>&message=<message>&color=<color>&logo=<name>)

HTML:

<!--https://shields.io/--> <!--HTML-->
<img alt="alt-text" src="https://img.shields.io/static/v1?label=<label>&message=<message>&color=<color>&logo=<name>">

<!--to make the badge into a link using anchor href-->
<a href="https://atom.io/" target="_blank"><img alt="Atom shields.io" src="https://img.shields.io/static/v1?label=Atom&message=editor&color=teal&logo=Atom"></a>

Activity: version
Click on the categories, e.g. activity, version is the release version tag e.g. v1.0.0, shield.io will automatically check if the version exist or not.

Transfer Typora TOC onto GitHub README.md

GitHub markdown uses pandoc markdown which differs from Typora markdown. To turn the Typora markdown table of content TOC into functional TOC in GitHub, we need to export the Typora file as Markdown (other spec).

1 - Go to File > Preferences > Export
2 - Add export type as Markdown (other spec) > variant: GitHub-flavored markdown
3 - Install pandoc as instructed
4 - Restart PC? or Typora
5 - Export your Typora file: File > Export > Markdown (other spec)
6 - Your new file should have TOC that works in GitHub README.md/ GitHub markdown

GitHub markdown

Create TOC in markdown File - GitHub TOC Generator by ecotrust-canada
// Special characters such as `` or ** or : will invalidate the TOC link, as TOC generator turn it into - character. For example:

[**Atom**](#--atom--) <!--invalid TOC link due to `**` special characters, conversion into `--` characters-->

GitHub page customisation

Example of basic customisation on GitHub page, see pages-themes minimal by parkr:

remote_theme: pages-themes/minimal@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one
title: html-learning
logo: assets/img/logo_bear2.png
description: Basic HTML, CSS learning with a test web building project to implement what I learnt.
show_downloads: true
google_analytics:

GitHub markdown relative links

Example of creating internal links (relative links) to other markdown (md) notes in repository with markdown, see stackoverflow GitHub Blog Relative Links:

[HTML Basics Notes](learning-notes/HTML-Basics-notes.md)  
[CSS Basics Notes](learning-notes/CSS-Basic-notes.md)  
[Markdown Notes](learning-notes/Markdown-notes.md)  
[Editor Notes](learning-notes/Editor-notes.md)  

Reduce HTML elements in Markdown

When possible, avoid using HTML elements in Markdown, e.g. links, italics, bold. Focus on using Markdown syntax.

Beautify and Markdown syntax

Beware that Beautify may affect some Markdown syntax. Use with caution in Markdown.

Space after HTML element for markdown syntax

It is important to have a blank line after HTML element to allow Markdown syntax to function.

Incorrect example:

<details>
  <summary>Wrong</summary>
This is a `wrong example` <!--no blank lines, md syntax will not work-->
</details>

Correct example:

<details>
  <summary>Correct</summary>

This is a `correct example` <!--add blank lines, md syntax works-->

</details>

Escaping Characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash \ in front of the character.

See markdownguide.org - Escaping Characters

Character	Name
\	backslash
`	backtick
*	asterisk
_	underscore
{,}	curly braces
[,]	brackets
<,>	angle brackets
(,)	parentheses
#	hash
+	plus sign
-	hyphen
.	dot
!	exclamation mark
\|	pipe

Backstick in inline code

To place the backstick ` in a inline code, spacing before and after the ` is needed, and double backstick quote is needed. See example:

`` ` `` //correct
```     //incorrect
`````   //incorrect

Tables in Markdown

See markdownguide - tables
To add a table, use three or more hyphens --- to create each column’s header, and use pipes | to separate each column. For compatibility, you should also add a pipe on either end of the row.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

Cell widths can vary, as shown below. The rendered output will look the same.

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

Alignment You can align text in the columns to the left, right, or centre by adding a colon : to the left, right, or on both side of the hyphens within the header row.

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |