Notes of Tan

# Markdown

TODO: format

# Resources

# Styles

Each section contains syntax and corresponding complied HTML.

# Mistaken Text

  • Syntax: ~~Strikethrough~~

  • In HTML

    <del>Strikethrough</del>

# italic

_this_ or *this*

<em>italic</em>

# bold

**extraordinarily** or __exceptionally__

<strong>bold</strong>

# ==highlight== (limited support)

==highlight==

<mark>highlight</mark>

# ==combined==

==~~**_example_**~~==

# footnotes^notes

You can create footnotes like this[^footnote].

[^footnote]: Here is the *text* of the **footnote**.

# underline

Use raw HTML <u>underline</u>

# ~subscripts~ (limited support)

~subscripts~

<sub>subscripts</sub>

Please use escapes for~longer\ script~

Please use escapes for~longer\ script~

# ^superscripts^ (limited support)

^superscripts^

<sup>superscripts</sup>

#
align
(deprecated)

  • center align

    <center>centerAligned</center>
<div align="center">centerAlignedText</div> <!-- alternative  -->

  • other align

    <div align="left">leftAlignedText"</div>
<div align="right">rightAlignedText"</div>
<div align="justify">justifiedText"</div> <!-- make every row the same length-->

# Font (deprecated)

For <font property="value">Text</font>:

Property Value Description
color #ffffff or rgb(x,x,x) or green font color
face font_family font
size number (2x+82x+8 px) font size

For <div style="property:value">Text</div>:

Property Value Description
color #ffffff or rgb(x,x,x) or green font color
font-size 20px or 1em or 1rem font size

Example:

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
<div style=”font-size:20px”>20px</div>

# Headers

Use hash sequences, up to ######.

<h1>header one</h1> `# header one` or `# header one # `
<h2>header two</h2>
<h3>header three</h3> `### header three` or `### header three ###` or `### header three #############`
<h4>header four</h4>
<h5>header five</h5>
<h6>header six</h6>

<test.me> <example@test.io>

[visit GitHub!](github.com)

<p>A <a href="http://example.com">link</a>.</p>

Here's [a link to something else][another place].
Here's [yet another link][another-link].
And now back to [the first link][another place].
Implicit link name [foo][]

[another place]: www.github.com
[another-link]: www.google.com

Some equivalent examples:
[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)
[id]: <http://example.com/>  "Optional Title Here"
[id]: http://example.com/longish/path/to/resource/here "Optional Title Here"

# Images

# insert images

Prefaced with the exclamation point ! , other things is the same as inline links and reference links.

![A representation of Octdrey Catburn](http://octodex.github.com/images/octdrey-catburn.jpg)
  • Use relative path:
    • Default behavior for local images sharing the same path with the current *.md file
    • Specify a url prefix for image with property typora-root-url in YAML Front Matters
      • For example: typora-root-url:/User/Abner/Website/typora.io/ in YAML Front Matters
    • Edit → Image Tools → Use Image Root Path to tell Typora to generate typora-root-url property automatically

# Image Styles: Resize and Align (deprecated)

  1. Resize 

    <img src="https://www.google.com/doodles/kamma-rahbeks-241st-birthday" width="200px" />
<!--or-->
<img src="https://www.google.com/doodles/kamma-rahbeks-241st-birthday" style="height:200px" />
<!--or-->
<img src="https://www.google.com/doodles/kamma-rahbeks-241st-birthday" style="zoom:50%" />

  2. Align

    <center>![]()</center>

# tables

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

by including colons : within the header row, you can define text to be left-aligned, right-aligned, or center-aligned:

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

# TOC: table of contents (limited support)

[toc]

# diagrams: sequence, flowchart and Mermaid (limited support)

See typora support (opens new window).

# Blocks

# quotes

>preface a line with the "greater than" caret (>)
>>It can be nested

# codes

`warp codes with grave accent`

# original code blocks

One level of indentation — 4 spaces or 1 tab — is removed from each line of the code block. A code block continues until it reaches a line that is not indented (or the end of the article).

# gfm code span

Add an optional language identifier after ``` and we'll run it through syntax highlighting.

​```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
​```

# Lists

# unordered lists

List items with * or - or + . Each list item also gets its own line.

<ul>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
</ul>

# ordered lists

Substitute asterisks with numbers. Only 1. with a trailing space is necessary, following sequences can be replaced by asterisks and numbers will be corrected automatically.

<ol>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
</ol>

# nested lists

The same syntax. Indent each asterisk.

# task lists

* [ ] a task list item
* [ ] list syntax required
+ [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed

# Paragraphs

# hard break

insert a new line

<p>paragraph one
 paragraph two
</p>

# soft break

insert two space at the end of a line.

<p>paragraph one<br/>paragraph two</p>

# Inline HTML Support

HTML tags are squarely supported.

Markdown syntax is not processed within block-level HTML tags and is processed within span-level HTML tags.

# Math

This feature needs MathJax support.

# inline math

$Tex commands$

# math blocks

You can render LaTeX mathematical expressions using MathJax. In markdown source file,math block is \mathrm \LaTeX expression wrapped by $$ mark.

In pandoc, anything between two $ characters will be treated as TeX math. The opening $ must have a non-space character immediately to its right, while the closing $ must have a non-space character immediately to its left, and must not be followed immediately by a digit. Thus, $20,000 and $30,000 won’t parse as math. If for some reason you need to enclose text in literal $ characters, backslash-escape them and they won’t be treated as math delimiters.

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
V1×V2=∣ijk∂X∂u∂Y∂u0∂X∂v∂Y∂v0∣ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}

# Special Characters

# auto escaping for special characters

  • zero width space in HTML: &#8203;
  • tab
    • horizontal tab in HTML: &#9; or &Tab;
    • vertical tab in HTML: &#xB;
  • & is equivalent to &amp;

# special symbols indicated by backslash \

These symbols are backslash supported.

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

# Horizontal Rules

* * *
***
*****
- - -
---------------------------------------

<hr />

# Miscellaneous

# YAML Font Matter (limited support)

Typora support YAML FrontMatter (opens new window) now. Input --- at the top of the article and then press Enter will introduce one. Or insert one metadata block from the menu.

# emoji