Cheatsheets

Markdown Cheatsheet

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

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>

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 HeaderSecond Header
Content CellContent Cell
Content CellContent Cell
Markdown:

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell
OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension 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

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension 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
  1. A numbered list 1 A nested numbered list 2 Which is numbered
  2. 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

picture 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 Γ(n)=(n1)!nN\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N is via the Euler integral

Γ(z)=0tz1etdt.\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:

AliceBobJohnHello Bob, how are you?How about you John?I am good thanks!I am good thanks!Bob thinks a longlong time, so longthat the text doesnot fit on a row.Checking with John...Yes... John, how are you?AliceBobJohn
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:

Link text
Square Rect
Circle
Round Rect
Rhombus
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:

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

| 😱 :scream: | 😄 :smile: | 😆 :laughing: | 😊 :blush: | 😃 :smiley: | ☺️ :relaxed: | 😏 :smirk: | 😍 :heart_eyes: | 😘 :kissing_heart: | 😚 :kissing_closed_eyes: | 😳 :flushed: | 😌 :relieved: | 😆 :satisfied: | 😁 :grin: | 😉 :wink: | 😜 :stuck_out_tongue_winking_eye: | 😝 :stuck_out_tongue_closed_eyes: | 😞 :disappointed: | 😗 :kissing: | 😙 :kissing_smiling_eyes: | 😛 :stuck_out_tongue: | 😴 :sleeping: | 😟 :worried: | 😦 :frowning: | 😧 :anguished: | 😮 :open_mouth: | 😬 :grimacing:

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>

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

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>

Sharing Github Repo

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>

Resources

Contents

Get The Best Of All Hands Delivered To Your Inbox

Subscribe to our newsletter and stay updated.