Markdown

Overview

Markdown is created by Daring Fireballarrow-up-right, the original guideline is herearrow-up-right. Its syntax, however, varies between different parsers or editors. You also can refer to GitHub Flavored Markdownarrow-up-right

Please note that HTML fragments in markdown source will be recognized but not parsed or rendered. Also, there may be small reformatting on the original markdown source code after saving.

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.

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 whitespace 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

Blockquotes

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

Lists

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

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

Task List

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

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

Code Blocks

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

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 ​

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:

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.

Horizontal Rules

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

Span Elements

Span elements will be parsed and rendered right after your typing. Moving cursor in middle of those span elements will expand those elements into markdown source. Following will explain the syntax of those span element.

Markdown supports two style 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:

will produce:

This is [an example]([http://example.com/"Title](http://example.com/"Title)"\arrow-up-right) inline link. (<p>This is <a href="http://example.com/" title="Title">)

This linkarrow-up-right 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:

In typora, they will be rendered like:

This is an examplearrow-up-right 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 — e.g., to link the word “Google” to the google.com web site, you could simply write:

Images

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

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:

output:

single asterisks

single underscores

GFM will ignores 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:

Strong

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

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:

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.

Underline

Underline is powered by raw HTML.

<u>Underline</u> becomes Underline.

[GFM]: https://help.github.com/articles/github-flavored-markdown/arrow-up-right

Last updated