Markdown Study Guide

Since markdown was introduced by one of my instructors, I have been using markdown for quite a while, and also used it for taking class notes as well. However, I have not yet fully discovered the potential of markdown, until recently I read that css and html languages can also be used directly in markdown.

Here is the sample code that I read:

Change the size, color and align of font


And this is the result that I saw:

This blew my mind, and I decided to spend more time on studying markdown. Later, the idea of learning and being more organized turned to be the motivation for the post.


Basic Syntax

Basic Text Formatting

Italic

<i>

1
*italic* or _italic_

Output:

italic or _italic_


bold

<b>

1
**bold** or __bold__

Output:

bold or bold


Italic and Bold

<b> and <i> of course

1
___italic and bold___ or ***italic and bold***

Output:

_italic and bold_ or italic and bold


Strikethrough

<del>

1
~~strikethrough~~

Output:

strikethrough


Carriage Return

<br> for line break, and <p> for paragraph.

1
2
3
4
A carriage return
makes a line break.

Two carriage returns make a new paragraph.

A carriage return
makes a line break.

Two carriage returns make a new paragraph.


Other Basic Syntax

Strong

<Strong> - this is important


Emphasis

<em> - this is emphasized


Mark

<mark> - this is marked


Small

<small> - this is small


inserted

<ins> - this is inserted


Subscript

<sub> - this is subscript


Superscript

<sup> - this is superscript


Horizontal Rules

Which is the divider used between sections, consists of three or more *’s or -‘s on a single line.

1
2
3
4
---
***
--------------------
******************

Backslash Escapes

Used for special characters so that they can be displayed normally.

Markdown provides backslashes for the following characters:

1
2
3
4
5
6
7
8
9
10
11
12
13
>\   backslash
>` backtick
>* asterisk
>_ underscore
>{} curly braces
>[] square brackets
>() parentheses
># hash mark
>+ plus sign
>- minus sign (hyphen)
>. dot
>! exclamation mark
>
1
\. \* \\

Output:

. * \\

Headers

Setex

Used for <h1> and <h2> tags.

“Underlined” using equal signs (=) as <h1> and dashes (-) as <h2> in any number

1
2
3
4
This is an H1
==============
This is an H2
--------------

Output:


Atax

HTML tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, use 1-6 hash character to correspond desired <h1> - <h6>

1
2
3
4
5
6
# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
###### This is an H6###### This is an H6

Output:


<a>

Most links will be automatically turned into links, to be more explicit, use <> surround the link.

1
2
<https://www.amazon.com/>
<some@example.com>

Output:

https://www.amazon.com/

some@example.com


Inline

The format for inline like is: [text](https://abc.com "Title"), if Title is neglected, then there is no Title attributes for the link, which means when mouse is hovered over the text, there will be no title displayed for the link.

1
2
[Google](https://www.google.com/ "Google")
[Google](https://www.google.com/)

Output:

Google and Google


Also, when referring to a local resource on the same server, relative path can be used.

1
[Hello World](/2019/06/05/hello-world/)

Output:

Hello World

Also, the markdown images on the top of the page is inserted by using relative path.


Reference

The format for reference is: [text]: URL "title" for defining source, and use [text][reference]to link text and reference. This is useful when links are used for multiple times in some content.

1
2
3
4
[1]: https://en.wikipedia.org/wiki/Main_Page "wikipedia main page"
[wikipedia main page]: https://en.wikipedia.org/wiki/Main_Page "wikipedia main page"
This is [wikipedia main page][1].
This is [wikipedia mainpage][] as well.

Output:

This is wikipedia main page.

This is wikipedia main page as well.


Anchor Reference

Similar to reference, but anchor reference is used to link in-text anchor point. I have read in some stackoverrflow comments which stated that header will generate anchor point by default. I tried on this post, nothing really worked, but perhaps works in other place.

Basically, anchor reference used html <a> tag to create an anchor point which is accessible as long as the linkage is in the same page.

1
2
3
4
5
6
7
set an anchor link
<a name="anchor">anchor</a>
...as long as they are in the same page...
[text](#anchor)

TO CREATE AN ANCHOR IN HEADING
[create an anchor](#anchors-in-this-page)

Images

Similar to links, just have ! in front of link.

Inline

<img src="">

Syntax: ![images](https://link.com "alt")

1
![flower](http://qiniu.goldenaarcher.com/images/markdown-guide/flower.jpg "flower")

Output:

flower

Reference

1
2
![flower][flower]
[flower]:http://qiniu.goldenaarcher.com/images/markdown-guide/flower.jpg "flower"

Output:

flower


I’m not planning to attach images here, so, just add context here as a reference.

[[img src=attached-image.jpg alt=image]]

List

Unordered List

use *, -, + to create an unordered list, <ul>

1
2
3
4
- unordered list 1
- nested unordered list 1.1
+ unordered list 2
* unordered list 3

Output:

  • unordered list 1

    • nested unordered list 1.1
      • nested unordered list 1.1.1
        • etc
  • unordered list 2

  • unordered list 3


Ordered List

Similar to unordered list, but use 1 instead.

I feel like in this case, perhaps using html is a clearer way of creating an ordered list.

1
2
3
4
1. point A
1. point A.a
2. point A.b
2. point B
  1. point A
    1. point A.a
    2. point A.b
  2. point B

It is possible to trigger an ordered list by accident:

1
1986. What a great season.

Output:

  1. What a great season.

In this case, a backslash_escape(\) can be used to resolve the issue:

1
1986\. What a great season.

Output:

1986. What a great season.


Definition List

Seemed not supported by GitHub page… But seemed fun to play around, so I decided to add the item here.

This is the markdown syntax:

1
2
3
4
5
6
First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

This is the corresponding html syntax:

1
2
3
4
5
6
7
<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>

Output from html syntax:

First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.


Check List

Looks like to-do list.

1
2
3
- [ ] not checked
- [ ] not checked
- [x] checked

Output:

  • [ ] not checked
  • [ ] not checked
  • [x] checked

Indent

Blockquote

Just put > in front of the paragraph or text.

1
2
3
A list item with block quote
> Blockquote
> with indentation

Output:

A list item with block quote

Blockquote
with indentation

Can also only put in front of the paragraph.

1
2
3
A list item with block quote
> Blockquote
with indentation

Output:

A list item with block quote

Blockquote
with indentation

Nested Blockquote

Like reference of reference.

1
2
3
> A blockquote
>> Nested blockquote
>>> Another nested blockquote

A blockquote

Nested blockquote

Another nested blockquote

Code Block

For some reason, it does not work same when I read in other place:

To put a code block within a list item, the code block needs to be indented twice — 8 spaces or two tabs

It only works in this particular format:

1
2
3
* List 1

printf()

Outcome:

  • List 1

    printf()
    

Perhaps just easier to use code blocks directly.


Code Blocks

<pre> in html.

I found in different places they said that

Indent every line of the block by at least 4 spaces or 1 tab.

But this part is true:

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.

1
2
3
<div class="footer" style="text-align: center">
&copy; 2004 Foo Corporation
</div>

Outcome:

Fenced Code Blocks

<code>

I found this works way better than indentation directly.

~and ` works the same way.

1
2
3
4
This is a normal paragraph:
\`\`\`
This is a code block.
\`\`\`

Outcome:

This is a normal paragraph:

1
This is a code block.

Syntax Highlighting

This is the way I like to do it, adding the language after ```.

1
2
3
\`\`\`Java
System.out.println("hello world");
\`\`\`

Outcome:

1
System.out.println("hello world");

Inline Code

Just use ` between inline code

1
Use `System.out.println();` to print in Java

Outcome:

Use System.out.println(); to print in Java


Tables

<table>

Column separator is pipe (|); the header is separated by dashes(-); the colon(:) is used for alignment.

1
2
3
4
name | id | score 
- | - | -
A | 1 | A
B | 2 | A+

Outcome:

name id score
A 1 A
B 2 A+

Whether outer pipe exists or not, there is no effect:

1
2
3
4
| name | id | score |
| - | - | - |
| A | 1 | A |
| B | 2 | A+ |

Outcome:

name id score
A 1 A
B 2 A+

Also, this example shows how to align the table:

1
2
3
4
name | id | score 
:--- | :---: | ---:
A | 1 | A
B | 2 | A+

Outcome:

name id score
A 1 A
B 2 A+

Not GitHub-flavored Functions

I found these not working on the git page, but might be worth it to dig deeper.

Footnotes

1
Markdown[^1]

TOC

[toc]


Flowchart

Have not yet studied.


Video and Audio Insertion


LateX


-------The end of this article  Thank you for your reading-------
0%