Markdown Reference

by typora.io

Overview

Markdown is created by Daring Fireball, the original guideline is here. Its syntax, however, varies between different parsers or editors. Typora is using GitHub Flavored Markdown.

Block Elements

Paragraph and line breaks

A paragraph is simply one or more consecutive lines of text. In markdown source code, paragraphs are separated by more than one blank lines. In Typora, you only need to press Return to create a new paragraph.

Press Shift + Return to create a single line break. However, most markdown parser will ignore single line break, to make other markdown parsers recognize your line break, you can leave two spaces at the end of the line, or insert <br/>.

Headers

Headers use 1-6 hash characters at the start of the line, corresponding to header levels 1-6. For example:

# This is an H1

## This is an H2

###### This is an H6

In Typora, input ‘#’s followed by title content, and press Return key will create a header.

Blockquotes

Markdown uses email-style > characters for block quoting. They are presented as:

> This is a blockquote with two paragraphs. This is first paragraph.
>
> This is second pragraph.Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.



> This is another blockquote with one paragraph. There is three empty line to seperate two blockquote.

In Typora, just input ‘>’ followed by quote contents a block quote is generated. Typora will insert a proper ‘>’ or line break for you. A block quote is allowed inside another block quote by adding additional levels of ‘>’.

Lists

Input * list item 1 will create an unordered list, the * symbol can be replace with + or -.

Input 1. list item 1 will create an ordered list, their markdown source code is like:

## un-ordered list
*   Red
*   Green
*   Blue

## ordered list
1.  Red
2. 	Green
3.	Blue

Task List

Task lists are lists with items marked as either [ ] or [x] (incomplete or complete). For example:

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

You can change the complete/incomplete state by clicking the checkbox before the item.

(Fenced) Code Blocks

Typora only supports fences in GitHub Flavored Markdown. Original code blocks in markdown are not supported.

Using fences is easy: Input ``` and press return. Add an optional language identifier after ``` and we’ll run it through syntax highlighting:

Here's an example:

​```
function test() {
  console.log("notice the blank line before this function?");
}
​```

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

Math Blocks

You can render LaTeX mathematical expressions using MathJax.

To add an mathematical expression, input $$, then press the ‘Return’ key. This will trigger an input field which accepts Tex/LaTex source. Following is an example:

In the markdown source file, the math block is LaTeX expression wrapped by a pair of ‘$$’ marks:

$$
\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}
$$

You could find more details here.

Tables

Input | First Header | Second Header | and press the return key. This will create a table with two columns.

After a table is created, the focus on that table will pop up a toolbar for the table, where you can resize, align, or delete table. You can also use the context menu to copy and add/delete individual columns/rows.

The full syntax for tables is described below, but it is not necessary to know the full syntax in detail, because the markdown source code for tables is generated automatically by Typora.

In markdown source code, they look like:

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

You can also include inline Markdown such as links, bold, italics, or strikethrough.

Finally, 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 |

A colon on the left-most side indicates a left-aligned column; a colon on the right-most side indicates a right-aligned column; a colon on both sides indicates a center-aligned column.

Footnotes

You can create footnotes like this[^footnote].

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

will produce:

You can create footnotes like this1.

Mouse on the ‘footnote’ superscript to see content of the footnote.

Horizontal Rules

Input *** or --- on a blank line and press return will draw a horizontal line.


YAML Front Matter

Typora now supports YAML Front Matter. Input --- at the top of the article and then press Enter to introduce a metadata block. Alternatively, insert a metadata block from the menu.

Table of Contents (TOC)

Input [toc] then press Return key. This will create a “Table of Contents” section. The TOC extracts all headers from the document, and its contents will be updated automatically.

Span Elements

Span elements will be parsed and rendered right after typing. Moving the cursor in middle of those span elements will expand those elements into markdown source. Below is an explanation of the syntax for each span element.

Markdown supports two styles of links: inline and reference.

In both styles, the link text is delimited by [square brackets].

To create an inline link, use a set of regular parentheses immediately after the link text’s closing square bracket. Inside the parentheses, put the URL where you want the link to point, along with an optional title for the link, surrounded in quotes. For example:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

will produce:

This is an example inline link. (<p>This is <a href="http://example.com/" title="Title">)

This link has no title attribute. (<p><a href="http://example.net/">This link</a> has no)

You can set the href to headers, which will create a bookmark that allow you to jump to that section after clicking. For example:

Command(on Windows: Ctrl) + Click This link will jump to header Block Elements. To see how to write that, please move cursor or click that link with key pressed to expand the element into markdown source.

Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:

This is [an example][id] reference-style link.

Then, anywhere in the document, you define your link label like this, on a line by itself:

[id]: http://example.com/  "Optional Title Here"

In Typora, they will be rendered like:

This is an example reference-style link.

The implicit link name shortcut allows you to omit the name of the link, in which case the link text itself is used as the name. Just use an empty set of square brackets — for example, to link the word “Google” to the google.com web site, you could simply write:

[Google][]
And then define the link:

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

In Typora click link will expand it for editing, command+click will open the hyperlink in web browser.

URLs

Typora allows you to insert URLs as links, wrapped by <brackets>.

<i@typora.io> becomes i@typora.io.

Typora will also auto link standard URLs. e.g: www.google.com.

Images

Image looks similar with links, but it requires an additional ! char before the start of link. Image syntax looks like this:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

You are able to use drag & drop to insert image from image file or web browser. And modify the markdown source code by clicking on the image. Relative path will be used if image is in same directory or sub-directory with current editing document when drag & drop.

If you’re using markdown for building websites, you may specify a URL prefix for image preview in local computer with property typora-root-url in YAML Front Matters. For example, input typora-root-url:/User/Abner/Website/typora.io/ in YAML Front Matters, and then ![alt](/blog/img/test.png) will be treated as ![alt](file:///User/Abner/Website/typora.io/blog/img/test.png) in Typora.

drag and drop image

Emphasis

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. Text wrapped with one * or _ will be wrapped with an HTML <em> tag. E.g:

*single asterisks*

_single underscores_

output:

single asterisks

single underscores

GFM will ignore underscores in words, which is commonly used in code and names, like this:

wow_great_stuff

do_this_and_do_that_and_another_thing.

To produce a literal asterisk or underscore at a position where it would otherwise be used as an emphasis delimiter, you can backslash escape it:

\*this text is surrounded by literal asterisks\*

Typora recommends to use * symbol.

Strong

double * or _ will be wrapped with an HTML <strong> tag, e.g:

**double asterisks**

__double underscores__

output:

double asterisks

double underscores

Typora recommends to use ** symbol.

Code

To indicate a span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

Use the `printf()` function.

will produce:

Use the printf() function.

Strikethrough

GFM adds syntax to create strikethrough text, which is missing from standard Markdown.

~~Mistaken text.~~ becomes Mistaken text.

Underlines

Underline is powered by raw HTML.

<u>Underline</u> becomes Underline.

Emoji :happy:

Input emoji with syntax :smile:.

User can trigger auto-complete suggestions for emoji by pressing ESC key, or trigger it automatically after enable it on preference panel. Also, input UTF8 emoji char directly from Edit -> Emoji & Symbols from menu bar is also supported.

Inline Math

To use this feature, first, please enable it in Preference Panel -> Markdown Tab. Then use $ to wrap TeX command, for example: $\lim_{x \to \infty} \exp(-x) = 0$ will be rendered as LaTeX command.

To trigger inline preview for inline math: input “$”, then press ESC key, then input TeX command.

You could find more details here.

Subscript

To use this feature, first, please enable it in Preference Panel -> Markdown Tab. Then use ~ to wrap subscript content, for example: H~2~O, X~long\ text~/

Superscript

To use this feature, first, please enable it in Preference Panel -> Markdown Tab. Then use ^ to wrap superscript content, for example: X^2^.

Highlight

To use this feature, first, please enable it in Preference Panel -> Markdown Tab. Then use == to wrap highlight content, for example: ==highlight==.

HTML

You could use HTML to style content what pure Markdown does not support, for example, use <span style="color:red">this text is red</span> to add text with red color.

Embed Contents

Some websites provide iframe-based embed code which you could also paste into Typora, for example:

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

Video

You could use the <video> HTML tag to embed videos, for example:

<video src="xxx.mp4" />

Other HTML Support

You could find details here.

  1. Here is the text of the footnote