前言：typora是一款可视化的markdown写作工具。小白也可以快速上手。跟着我先学几个简单的技巧快速上手吧。

在typora中以可视化的方式使用markdown

一、显示标题

在typora中使用#然后空一格即可输入一号标题，两个#号表示2号标题，依次类推。

# This is an H1## This is an H2###### This is an H6

二、显示段落

在typora中直接换行输入文字即为段落。

三、显示代码

```语言后缀
比如：
```html 然后回车即可输入html代码

四、图片、链接等

在typora中右键单击，即可插入图片、链接、对文字进行加粗、斜体等处理。如下图：

以上↑即可快速掌握typora的可视化写法。

---

以下↓是markdown原始语法，文章来源于typora的帮助文档，可以在typora中切换到源码尝试。

在Typora中以源码的方式使用Markdown（即直接写markdown）

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 two or more blank lines. In Typora, you only need one blank line (press Return once) to create a new paragraph.

Press Shift + Return to create a single line break. Most other markdown parsers will ignore single line breaks, so in order 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, inputting ‘>’ followed by your quote contents will generate a quote block. Typora will insert a proper ‘>’ or line break for you. Nested block quotes (a block quote 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 as follows:

## 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 on 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:```js
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 a mathematical expression, input $$ and press the ‘Return’ key. This will trigger an input field which accepts Tex/LaTex source. For example:

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} V1​×V2​=∣∣∣∣∣∣​i∂u∂X​∂v∂X​​j∂u∂Y​∂v∂Y​​k00​∣∣∣∣∣∣​

In the markdown source file, the math block is a 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 can 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, putting focus on that table will open up a toolbar for the table where you can resize, align, or delete the 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 as 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 in the table.

Finally, by including colons (:) within the header row, you can define text in that column 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 this¹.

Hover over the ‘footnote’ superscript to see content of the footnote.

Horizontal Rules

Inputting *** or --- on a blank line and pressing 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 Return to introduce a metadata block. Alternatively, you can insert a metadata block from the top menu of Typora.

Table of Contents (TOC)

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

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.

Links

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)

Internal Links

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 Links

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 on a line by itself like this:[id]: http://example.com/  "Optional Title Here"

In Typora, they will be rendered like so:

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, clicking the link will expand it for editing, and command+click will open the hyperlink in your web browser.

URLs

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

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

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

Images

Images have similar syntax as links, but they require an additional ! char before the start of the link. The syntax for inserting an image 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 an image from an image file or your web browser. You can modify the markdown source code by clicking on the image. A relative path will be used if the image that is added using drag & drop is in same directory or sub-directory as the document you’re currently editing.

If you’re using markdown for building websites, you may specify a URL prefix for the image preview on your 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.

You can find more details here.

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 using the * symbol.

Strong

A double * or _ will cause its enclosed contents to be wrapped with an HTML <strong> tag, e.g:

**double asterisks**__double underscores__

output:

double asterisks

double underscores

Typora recommends using the ** symbol.

Code

To indicate an inline 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

如何在Typora中以可视化或源码的方式使用markdown相关推荐

1. 如何在Eclipse中查看Android API源码以及support包源码

   http://my.eoe.cn/futurexiong/archive/181.html 开发第三方Android应用的,大多数人应该还是Eclipse结合ADT来开发.那么大多数时候我们可能希望点 ...

2. Android 如何在Eclipse中查看Android API源码 及 support包源码

   http://blog.csdn.net/vipzjyno1/article/details/22954775     当我们阅读android API开发文档时候,上面的每个类,以及类的各个方法都是 ...

3. R沟通 | 如何在Typora中设置免费的图床

   简介 前段时间小编给大家推荐了一个markdown的IDE编辑器:Typora,具体推文如下:R沟通|markdown编辑器-Typora 和 R沟通 | 如何在Typora中设置免费的图床. 今天针 ...

4. 如何在ARM开发板上从源码编译安装OpenCV和OpenCV contrib

   点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 本文主要介绍如何在ARM开发板上从源码编译安装OpenCV和OpenCV contrib. OpenC ...

5. python 抓取解析接口数据_[干货]用python抓取摩拜单车API数据并做可视化分析(源码)...

   原标题:[干货]用python抓取摩拜单车API数据并做可视化分析(源码) 在APP中能看到很多单车,但走到那里的时候,才发现车并不在那里.有些车不知道藏到了哪里:有些车或许是在高楼的后面,由于有GP ...

6. Hhadoop-2.7.0中HDFS写文件源码分析（二）：客户端实现（1）

   一.综述 HDFS写文件是整个Hadoop中最为复杂的流程之一,它涉及到HDFS中NameNode.DataNode.DFSClient等众多角色的分工与合作. 首先上一段代码,客户端是如何写文件的: ...

7. c语言复制粘贴源码,c语言函数memccpy()如何复制内存中的内容实例源码介绍

   c语言函数memccpy()如何复制内存中的内容实例源码介绍.引入的头文件:#include memccpy()函数定义:void * memccpy(void *dest, const void * ...

8. js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能（代码）

   本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...

9. 【kafka】Kafka中的动态配置源码分析

   1.概述 2.源码分析 Broker启动加载动态配置 KafkaServer.startup 启动加载动态配置总流程 2.1 动态配置初始化 config.dynamicConfig.initiali ...

最新文章

1. C语言再学习 -- 转义字符
2. 执行虚拟机mysql脚本_mysql一键执行脚本 超方便！！！
3. 学好Windows编程要看的书籍
4. java赋值兼容原则,多态问题抛出(赋值兼容性原则遇上父类与子类同名函数的时候)...
5. 计算机技术薄弱对我省影响,计算机技术在贵州省西南地区的运用前景.docx
6. Excel中，条件格式的跟多应用-「数字条」「图标集」
7. python 操作 saltstack Api(二) 示例
8. [环境]搭建Node+NPM+Grunt+Ruby开发环境
9. 2019年1024，deepin安装原生Linux QQ
10. 10大最毒路边小吃盘点，你常吃吗？
11. ipc$与默认共享及ipc$连接失败的原因
12. 微信小程序 -对应的服务器证书无效
13. 刷新BIOS应该做的几件事
14. 如何用计算机完成一篇文稿制作步骤,第5章 计算机一级演示文稿制作经典教程.ppt...
15. CRNN-基于序列的（端到端）图像文本识别
16. 类的设计---麻球与油果
17. 推荐几个CAD/dwg文件批量转pdf或其他格式的方法
18. 【新手向】最大团问题和最大独立子集的懒人算法(随机化)
19. android将一个long型转成时间字符串
20. JavaScript 弹弹球小游戏(二)

热门文章

1. 可自动调节OpenCV弹出窗口大小
2. linux安装各种系统插件
3. 星际争霸1终于可以在win10上运行了
4. c#中将一个实体类复制到另一个实体类
5. 千亿级金融场景下，基于Pulsar的云原生消息队列有怎样的表现？
6. 科技爱好者周刊：第 102 期
7. apache添加php语言模块,在apache中添加php处理模块-Go语言中文社区
8. C语言求整数的和与均值
9. Android大型实战：《亲信，优雅的从入门到进阶》-刘桂林-专题视频课程
10. Spring Data JPA-根据Repository接口关键字生成SQL