Markdown cheatsheet

Contents

1. Color and Font via HTML and inline CSS:
2. Special separators via HTML:
3. link & picture:
4. Align
5. Table
6. Comments
7. TOC
8. Expand
9. Footnotes:
10. Useful links:

Color and Font via HTML and inline CSS:

<span style="color:blue">some *blue* text</span>
some blue text

<font color="blue">some *blue* text</font>

<font color="blue", face="Courier New">some *blue* text @ Courier New</font>
(Not supported by DP)
<font color=”blue”, face=”Courier New”>some blue text @ Courier New</font>

<span style="color:blue; font-family:'Courier New'; font-size:40px">some 40px *blue* text @ Courier New</span>
some 40px blue text @ Courier New is here

<font color="blue"><i>some</i> <u>blue</u> <b>text</b></font>

<sup>A</sup> A <sub>B</sub>
^A A _B

<span style="color:green" onMouseOver="this.style.color='red'; this.style.fontSize='2em';" onMouseOut="this.style.color='blue'; this.style.fontSize='1em'">some changing text</span>
some changing text

keyboard keys
<kbd>Command</kbd> + <kbd class="">T</kbd>
Command + T

Special separators via HTML:

Space:
some    spaces
some    spaces

Line break:
line<br>break
line
break

horizontal line:
<hr>

link & picture:

link method 1:

[Google1][]

[Google1]: http://google.com/

(Not supported by DP, better to add an empty line)

Google1

do not foget http://

link method 2:

[Google2][12]

[12]: http://google.com/

(Not supported by DP, better to add an empty line)
Google2

link method 3:
[Google3](http://google.com/)
Google3 no space between ] and (

link method 4 (open in new tab):
<a href="http://google.com/" target="_blank">Go</a>
Go

link method 5 (open in new tab2, kramdown):
[Go2](http://google.com/){:target="_blank"}
Go2

link to heading IDs:
(Not supported by DP)
# Markdown cheatsheet {#top_title}
[To top](#top_title)
To top

linked image 1:
After you copy the public Dropbox link to your clipboard, just change ?dl=0 to ?raw=1 at the end of the URL.
![myself](https://www.dropbox.com/s/jbn7jwu7uw4ovpa/0431%2520ld.jpg?raw=1)

linked image 2, with HTML:
<img src="https://www.dropbox.com/s/jbn7jwu7uw4ovpa/0431%2520ld.jpg?raw=1" width = "50" height = "100" alt="title">

linked image 3, with HTML more options:

<div style="text-align: center">
<p>Young man. <img src="https://www.dropbox.com/s/jbn7jwu7uw4ovpa/0431%2520ld.jpg?raw=1" width = "50" height = "100" alt="title" style="vertical-align:middle"> Yes he was.</p>
<p>Young man. <img src="https://www.dropbox.com/s/jbn7jwu7uw4ovpa/0431%2520ld.jpg?raw=1" width = "50" height = "100" alt="title" style="vertical-align:top"> Yes he was.</p>
</div>

Align

<div style="text-align: right"> your-text-here </div>

<div style="text-align: justify"> your-text-here </div>

Table

| old version | new version |
|:---:|:---:|
|`C5*`           | `C5'`|
|`..*`           | `..'`|
|`O1P`          |`OP1`|
|`O2P`          |`OP2`|

(Not supported by DP)

For convenience, use the TablesGenerator!

Comments

[//]: # (This may be the most platform independent comment)
(Not supported by DP)
[//]: # (This may be the most platform independent comment)

<!-- <p>HTML comments</p> --> (It works if nothing appears below.)

TOC

not ordered

* TOC
{:toc}

ordered

1. TOC
{:toc}

Expand

<details>
<summary>Click to expand!</summary>

- A
- B

</details>

(MD syntax may not be recognized inside HTML block)

Footnotes:

This is some text[^1].

[^1]: Some *crazy* footnote definition.

(Sometimes an empty line is needed.)
This is some text¹.

Useful links:

Wiznote
huihut
Markdown Guide
kramdown
Github writing

To top