Markdown Cheatsheet

Last modified: 18 Feb, 2020

Markdown syntax

Markdown is a lightweight markup language with plain text formatting syntax. Below is the syntax cheatsheet for quick reference to get things done with Markdown.

Headers

Heading 1 - Markup :  

# Heading 1
# Heading 1 #
============= (below H1 text)

Heading 2 - Markup :  

## Heading 2
## Heading 2 ##

Heading 3 - Markup :  

### Heading 3
### Heading 3 ###

Heading 4 - Markup :  

#### Heading 4
#### Heading 4 ####

Heading 5 - Markup :  

##### Heading 5
##### Heading 5 #####

Emphasis

Common text

Markup :  Common text

Emphasized text

Markup :  _Emphasized text_ or *Emphasized text*

~~Strikethrough text~~

Markup :  ~~Strikethrough text~~

Strong text

Markup :  __Strong text__ or **Strong text**

Strong emphasized text

Markup :  ___Strong emphasized text___ or ***Strong emphasized text***

Colored Text

Markup: <span style="color:red">**No**</span>

Backslash Escapes

Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax. For example, if you wanted to surround a word with literal asterisks (instead of an HTML tag), you can use backslashes before the asterisks, like this

\*literal asterisks\*

Markdown provides backslash escapes for the following characters:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

Links

Named Link and http://2much2learn.com or http://2much2learn.com/

Markup :  

[Named Link](http://2much2learn.com "Named link title") 
http://2much2learn.com
<http://2much2learn.com>
<a href="http://2much2learn.com" target="_blank">2 much 2 learn</a>

Internal Links

If you have headers in the markdown files, you can directly link them in the file.

Markdown Header

# Heading 1

this will generate an implicit id #heading-1 (replace internal spaces with hyphens and make lowercase).

To navigate to this id, you can create the link like this:

heading-1

Markup: [heading-1](#heading-1 "Goto heading-1")

Tables

Table, like this one :

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Markdown:

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

markdown:

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Each column can be aligned left, right, or center. The alignment is set by using a pattern of dashes and a colon separated by spaces and pipes.

To left-align a column, put a colon to the left of two dashes :--.
To right-align, put a colon to the right of two dashes --:.
To center-align, surround a dash with two colons :-:.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

markdown:

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

Code Blocks

code()

Markup :  `code()`

application.js

    var specificLanguage_code = 
    {
        "data": {
            "key": 1,
            "query": "2much+2learn",
            "lookedUpItem": {
                "name": "Java8",
                "author": "narramadan",
                "picture": null,
                "link": "http://2much2learn.com/java8"
            }
        }
    }

Markup : 

    ```java
    ```

    ```xml
    ```

    Code title
    ```javascript:title=application.js
    ```

    Code title with space
    ```json:title=Code%20Title%20With%20Space
    ```

Lists

Unordered List

Bullet list
- Nested bullet
  - Sub-nested bullet etc
Bullet list item 2

 Markup : * Bullet list
              * Nested bullet
                  * Sub-nested bullet etc
          * Bullet list item 2

Ordered List

A numbered list 1 A nested numbered list 2 Which is numbered
Which is numbered

 Markup : 1. A numbered list
              1.1 A nested numbered list
              1.2 Which is numbered
          2. Which is numbered

Task List

An uncompleted task
A completed task

 Markup : - [ ] An uncompleted task
          - [x] A completed task

Blockquotes

Blockquote

Markup :  > Blockquote

Horizontal Rules

Markup :  ---- (hyphens)
          **** (asterisks)
          ____ (underscores)

Images

Mouse over to see alt

Markup : 

![picture alt](http://via.placeholder.com/200x150 "Title is optional")
![picture alt](/images/logo.png)
![picture alt](/images/logo.png "Image Title")
![picture alt](http://via.placeholder.com/200x150)
![picture alt](http://via.placeholder.com/200x150 "Title")
[picture alt]: http://via.placeholder.com/200x150

Foldable text

Title 1

Content 1 Content 1 Content 1 Content 1 Content 1

Title 2

Content 2 Content 2 Content 2 Content 2 Content 2

Markup : <details>
           <summary>Title 1</summary>
           <p>Content 1 Content 1 Content 1 Content 1 Content 1</p>
         </details>

HTML text

<h3>HTML</h3>
<p> Some HTML code here </p>

Mathematical expressions

You can render LaTeX mathematical expressions using katex-math

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$

Markup:

\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

UML diagrams

Generation of diagrams and flowcharts from text in a similar manner as markdown is achieved using mermaid.

You can render UML diagrams, this will produce a sequence diagram:

Markup:

```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```

And this will produce a flow chart:

Markup:

```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```

Hotkey

⌘F⇧⌘F

Markup : <kbd>⌘F</kbd>

Hotkey list:

Key	Symbol
Option	⌥
Control	⌃
Command	⌘
Shift	⇧
Caps Lock	⇪
Tab	⇥
Esc	⎋
Power	⌽
Return	↩
Delete	⌫
Up	↑
Down	↓
Left	←
Right	→

Emoji

❗ Use emoji icons to enhance text. 👍 Look up emoji codes at emoji-cheat-sheet.com

Markup : Code appears between colons :EMOJICODE:

2much2learn.com Markup Syntax

The above syntax is generic and can be used for creating/updating Markdown documents. Below are few additional syntax that can be used to document articles in 2much2learn.com.

Seperator

Seperate section in an article with a short horizontal line

Markup : <Seperator>

Code block with title

example-file.js

alert('how cool is this!');

Markup : 
```js:title=example-file.js
    alert('how cool is this!');
```

Todo

Add Todo task to remind something to add later when drafting an article

TODO: Complete this Section

Markup :
<Todo>Complete this Section</Todo>

ExternalLink

Component to create hyperlink to external resources and open it in new tab when clicked on it

java.util.**ArrayList**

Markup:
<ExternalLink href="https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html">java.util.**ArrayList**</ExternalLink>

ExternalLinksListContainer

Component to create list of hyperlinks pointing to external resources and open it in new tab when clicked on it

Examples

Markup:
<ExternalLinksListContainer
    title={'Examples'}
    links={[
        {'url': 'https://www.geeksforgeeks.org/java-util-weakhashmap-class-java/'},
        {'name': 'What is meant by Programming Paradigms', 'url': 'https://medium.com/@darrion/what-is-meant-by-programming-paradigms-9b965a62b7c7'},
    ]}>
</ExternalLinksListContainer>

Collapsable

Component to wrap content within a collapsable panel which can expand the content by clicking on Show More and collapse down by Show Less.

It also provides option to provide the startingHeight to show how much content is visable by default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam lorem sit amet finibus posuere. Pellentesque facilisis venenatis tortor vitae accumsan. Etiam maximus congue laoreet. Vivamus eu libero sit amet nisl cursus accumsan eget ac mi. Cras mi nibh, mattis ac tristique id, facilisis ut sem. Aliquam nec lacus ut nulla mattis iaculis. Nullam tincidunt vitae ex ut lobortis. Donec pulvinar tincidunt est, a finibus tellus bibendum a. Aliquam tempor augue felis. Suspendisse in tincidunt lorem, eu elementum erat. Cras at tellus at odio suscipit euismod.

Nunc eget elementum enim. Quisque scelerisque ultricies lectus non gravida. Etiam volutpat ante eget dapibus finibus. Integer ultrices ante sem, et porttitor elit suscipit id. Sed ut ante nulla. Donec convallis mollis nunc, in sodales turpis rutrum et. Praesent porta posuere magna id accumsan. Pellentesque non lectus nisi. In dictum, neque eget feugiat ultricies, tortor nibh semper enim, eget accumsan lacus mauris nec lorem. Aenean vehicula malesuada luctus. Nam mattis mi sem, volutpat bibendum ipsum mollis id. Etiam quis purus et metus condimentum varius nec ac metus. In tincidunt nibh non nisi porttitor aliquam. Aliquam sollicitudin turpis quis tincidunt dictum. Fusce neque leo, mollis eget eros in, convallis viverra justo. Duis placerat erat sit amet urna varius, vitae hendrerit metus vestibulum.

Markup:
<Collapsable startingHeight={100}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam lorem sit amet finibus posuere. Pellentesque facilisis venenatis tortor vitae accumsan. Etiam maximus congue laoreet. Vivamus eu libero sit amet nisl cursus accumsan eget ac mi. Cras mi nibh, mattis ac tristique id, facilisis ut sem. Aliquam nec lacus ut nulla mattis iaculis. Nullam tincidunt vitae ex ut lobortis. Donec pulvinar tincidunt est, a finibus tellus bibendum a. Aliquam tempor augue felis. Suspendisse in tincidunt lorem, eu elementum erat. Cras at tellus at odio suscipit euismod.
</Collapsable>

Clone the source code of the article from crud-springboot-data-jpa

Markup:
<GithubRepo href="https://github.com/2much2learn/crud-tutorials/tree/master/crud-springboot-data-jpa">crud-springboot-data-jpa</GithubRepo>

Inline Ad

Markup:
<ArticleInlineAdRepo/>