Markdown For Typora

This afternoon, I had nothing to do. I went over the Markdown reference document in Typora again. Translate it into Chinese MD document by the way. The following translation level is limited, please point out. If you need the MD source file of this document, please contact my email.Copy the code

An overview of the

Markdown was created by Daring Fireball and its original instructions are here. However, its syntax and variables are different in different parsers or editors. Typora was using [GitHub chinglish Markdown][GFM].

[TOC]

A block element

Paragraphs and line feeds

A paragraph is simply one or more consecutive lines of text. In markdown source code, paragraphs are separated by two or more blank lines. In Typora, you only need a blank line (press enter once) to create a new paragraph.

Press Shift + Return to create a newline character. Most other Markdown parsers ignore a single line break, so to make your line break recognized by other Markdown parsers, you can either leave two Spaces at the end of the line or insert

.

The title

Headings use 1-6 hash characters (#) at the beginning of the line, corresponding to title levels 1-6. Such as:

# This is an H1

## This is an H2

###### This is an H6
Copy the code

In Typora, typing ‘#’ followed by the title content, and pressing Enter will create a title. They appear as:

Piece of reference

Markdown uses the email style > character for block references.

> this is a block reference with two paragraphs. This is the first paragraph.
> > This is the second paragraph. Because that's why it's not a cartoon, it's in there, there's a lot of life, laughter.>> Nested use"> < p style =" max-width: 100%; clear: both; There are three blank lines to separate two block references.
Copy the code

In Typora, typing ‘>’ followed by the reference content generates a reference block. Typora will insert an appropriate ‘>’ or newline for you. Nested block references (block references within another block reference) by adding an additional level of “>”.

The list of

Entering the * list item 1 creates an unordered list, and the * sign can be replaced by + or –

Enter 1. List item 1 will create an ordered list, their markdown source is as follows:

## Unordered list
*	红
*	绿
*	蓝

## ordered list
1.	红
2.	绿
3.	蓝
Copy the code

The task list

A task list is a list of items marked [] or [x] (representing or done, respectively). Such as:

-[] A task list item-[] Lists require syntax- [ ] normal **formatting**, @mentions, #1234 refs
-[] unfinished-[x] has been completedCopy the code

You can change the completed/unfinished status by clicking the check box in front of the project.

(Fenced) code block

Typora only supports the fence code block on the GitHub chinglish Markdown. The original Markdown code block is not supported.

Using the fence is simple: type ‘and press Enter to add the optional language identifier after’ ‘. We’ll run it with syntax highlighting.

Js function test() {console.log("notice the blank line before this function?" ); } ' 'syntax highlights:' 'ruby require 'redcarpet' markdown = redcarpet. New ("Hello World! ) puts markdown.to_html ```Copy the code

Math block

You can use MathJax to render LaTex mathematical expressions.

Type $$and press Enter to add a mathematical expression. This triggers an input field that accepts the Tex/LaTex source. Such as:


V 1 x V 2 = ∣ i j k partial X partial u partial Y partial u 0 partial X partial v partial Y partial v 0 ∣ \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}

In the Markdown source, math quick is a LaTex expression wrapped with a pair of ‘$$’ tags:

$$
\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}
$$
Copy the code

You can check out more details here.

form

First title input | | | the second title and press the enter key. This creates a table with two columns.

After you create the table, focusing on it opens a toolbar for the table where you can resize, align, or delete the table. You can also copy and add/remove individual columns/rows using the context menu.

The complete syntax for the table is described below, but it is not necessary to go into the full syntax in detail because the markdown source code for the table is automatically generated by Typora. In the Markdown source code, they look like:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
Copy the code

You can also include inline markdowns in the table, such as links, bold, italics, or strikeouts.

Finally, you can define text in that column to be left, right, or centered by including a colon (:) in the header line:

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

The leftmost colon represents the left-aligned column; The right-most colon represents the right-aligned column; The colons on either side indicate the center-aligned columns.

footnotes

You can create a footnote like this [^footnote] [^footnote] :This is a ** text ** with ** footnotes **.
Copy the code

Will generate:

You can create a footnote like this

Hover over the ‘footnote’ label to view the contents of the footnote.

Horizontal dividing line

Typing *** or – on a blank line and pressing Enter will draw a horizontal line.

YAML Front Matter

Typora now supports YAML Front Matter. Type – at the top of the article, and press Enter to import a metadata block. Alternatively, you can insert a metadata block from the Typora top menu.

Directory (TOC)

Type [TOC] and press Enter to generate a “Table of Contents” area. TOC extracts all the titles from the document and automatically updates the content as you add them to the document.

Inline elements

Inline elements are parsed and rendered immediately after input. Moving the cursor over the middle of these block elements expands the markdown source code for those elements. Below is a syntax explanation of each block element.

link

Markdown supports two forms of linking: inline and reference

In both styles, the link text is separated by square brackets.

To create an inline link, use a regular set of brackets immediately after the right square bracket of the linked text. In parentheses, place the URL where you want the link to point, and the optional title of the link, enclosed in quotation marks. Such as:

Here is an example [link] (http://example.com/ "Title") inline link [The link] (http://example.net/) has no title attributeCopy the code

Will generate

Here is a sample link

The link has no title attribute

Inline links

You can set the hyperlink as a title, which creates a bookmark that allows you to jump to that section when you click. Such as:

Command (on Windows: Ctrl) + Clicking this link jumps to the heading “Block Elements”. To see how to write, move the cursor or click the link and press the “⌘” key to expand the element to Markdown source.

Refer to the link

Reference style links use a second set of square brackets in which you can place a label of your choice to identify the link:

This is a [example] [idReference link. Then, anywhere in the document, you can define the link tag on a single line, as follows: [id] :http://example.com/ "Optional Title Here"
Copy the code

In Typora, they will be rendered like this:

This is an example reference link.

Implicit link name shortcuts allow you to omit the link name, in which case the link text itself is used as the name. Simply use a set of empty square brackets – for example, to link the word “Google” to google.com, you can simply write:

[Google] []
And then define the link:

[Google] :http://google.com/
Copy the code

In Typora, clicking a link expands it for editing, and a Command + click opens a hyperlink in a Web browser.

The url

Typora allows you to insert urls as links, wrapped by

.


becomes [email protected].
@typora.io>

Typora also automatically links to standard urls. For example, www.google.com.

image

Images have similar syntax to links, but an extra one is required before links can begin! Characters. The syntax for inserting images looks like this:

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

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

You can use drag and drop to insert images from image files or web browsers. You can modify the Markdown source code by clicking on the image. Relative paths are used if the image added using drag and drop is in the same directory or subdirectory as the document you are currently editing.

If you are building your website using Markdown, you can use the property typora-root-URL in YAML Front Matters to specify a URL prefix for image previews on your local computer. YAML Front, for example, the Matters of input typora – root – url: / User/Abner/Website/typora. IO /, then! [Alt](/blog/img/test.png) will be considered in Typora! [Alt] (file:///User/Abner/Website/typora.io/blog/img/test.png).

You can find more details here.

Emphasis on

Markdown treats the asterisk (*) and underscore (_) as indicators of emphasis. Text wrapped with * or _ will be wrapped with HTML tags. Such as:

* Single asterisk *

_ Single underscore _
Copy the code

Output:

A single asterisk

Single underscore

GFM ignores underscores in words, which are commonly used in code and names, as shown below:

wow_great_stuff

do_this_and_do_that_and_another_thing.

To generate a literal asterisk or underscore where it should be used as an emphasis separator, you can escape it with a backslash:

\* The text is surrounded by literal asterisks * *
Copy the code

Typora recommends the * character

bold

Double * or _ will cause its contents to be wrapped in HTML tags, such as:

Double star * * * *

** Double underline **
Copy the code

Output:

Double star

Double underline

Typora recommends the ** character

code

To indicate the line scope of your code, surround it with backquotes (‘). Unlike preformatted blocks of code, inline code represents code within a normal paragraph. Such as:

use`printf()`Function.Copy the code

Will generate:

Use the printf() function.

Delete the line

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

~~ Error text. ~ ~

Error text.

The underline

Underlining is supported by native HTML.

<u> Underline </u>

The underline

Expression: primer.

Use the syntax 🙂 Type emoticons.

Users can trigger the emoji autocomplete suggestion by pressing the “ESC “key, or when enabled on the preferences panel. In addition, directly entering UTF-8 emoji characters is also supported by B, via the menu bar edit ‘-> Emoji ‘(macOS).

In-line mathematical formulas

To use this feature, enable it in the “Preferences” panel ->”Markdown “TAB. Then, a TeX command is wrapped in $. Such as: $lim_{x \ toinfty} limx toinfty ‘exp(−x)=0lim_{x \ toinfty}’ exp(−x)=0. ‘exp(−x)=0exp(-x) =0 0exp(−x)=0 ‘will be rendered as a LaTeX command.

Trigger an inline preview of inline mathematics by typing “$”, then pressing ESC, and then typing a TeX command.

You can find more details here.

The subscript

To use this feature, enable it in the “Preferences” panel ->”Markdown” TAB. Then, use ~ to wrap the subscript content. For example, H~2~O, X~long text~/. h 2 o x long\text

superscript

To use this feature, enable it in the “Preferences” panel ->”Markdown “TAB. Then, use ^ to wrap the labeled content. Example: X^2^. X^2^

The highlighted

To use this feature, enable it in the “Preferences” panel ->”Markdown” TAB. Then, wrap the highlighted content with ==. Example: ==highlight==. ==highlight==

HTML

You can use HTML to set content styles that are not supported by pure Markdown. For example, add red text using this text is red.

Embedded content

Some sites offer embedded code based on iframe, which you can paste into Typora. Such as:

<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>
Copy the code

video

You can embed the video using the

<video src="xxx.mp4" />
Copy the code

Other HTML support

You can find more details here.

(GFM) : help.github.com/articles/gi…

[Google]:

  1. ↩