所见即所得_Typora及用法

Markdown介绍

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
Markdown语法的目标是：成为一种适用于网络的书写语言「易读易写」。并且Markdown兼容HTML。你可以使用HTML语言编写Markdown，如果你要部署你的个人博客，那这更是你必不可少的技能之一！！！

强烈推荐typora这款markdown软件，谁用谁说好！

一款优质的Markdown编辑器,不仅仅是Markdown

除此之外，如果你愿意花一点点时间来了解{ post_link }

---

简述Markdown常见用法

在下面，我将简单介绍几个常用的markdown写法。希望大家写出更好的观看效果的文章。本文一些内容是属于Hexo下buttrerfly主题的内置标签。

---

大家可以自己下载Typora尝试一下markdown。

为什么推荐Typora,我归纳了以下几点：

一 “所见即所得”（即时渲染）

二 支持图床功能，配合PicGO可以实现图片的随用随传

如下所示，右击图片就可以上传到PicGo指定的图床。真的很好用！！！

三 Typora还支持将md文件导出为多种格式的文件，目前支持以下文件:

四 如果你还会一点CSS,那你甚至可以自定义界面样式

下面我将从以下这几个方面介绍一下Typora的一些使用方法：

• 字体 （<small>小</small> <big>大</big>）
• 斜体 *斜体*
• 粗体 **粗体**
• 斜体 + 粗体 ***斜体+粗体\***
• 删除 ~~原价：99.9元~~
• 链接 [http://www.jianshu.com](https://www.jianshu.com)
• 分割线
• 下划线
• 标题
• 任务列表
• 图片
• 区块引用
• 行内代码 `markdown`
• 列表
• 表格
• 脚注
• 高亮

字体

<small>小号字体</small>
<big>大号字体</big>
<div style="text-align:center;"><font color=rgb(25,26,35) face="华文彩云" size=100px style="text-align:center">其他快捷方式</font></div>

属性	值	描述
color	rgb(); #XXXXXX colorname	规定文本的颜色，可以使用style代替
face	font_family	规定文本的字体
size	number	规定文本的大小

小号字体

大号字体

其他快捷方式

斜体

西方斜体这一习惯看个人喜好吧。在文字前后各加一个*就👌了

*斜体*

效果如下：
斜体

加粗

在文字前后各加两个**就👌了

**加粗**

效果如下：
加粗

斜体加粗

斜体文字前后各加*，加粗文字前后各加**，斜体加粗在文字前后加***。没毛病...

***斜体加粗***

效果如下:
斜体加粗

删除

~~content~~

效果如下：
content

链接

链接应该是使用最多的场景了。他人有好的文字或者自己摘自哪里、都可以传送门直接过去。

[网站名](地址)
地址

效果如下：
example@163.com
http://www.baidu.com

分割线

1 ****
2 *****
3 ---
以上三种写法都可以，效果一样，看个人心情使用。

---

---

---

下划线

<u>内容</u>

内容

标题

# 一级标题
···
###### 六级标题 //最多支持六级标题

效果如下：

一级标题

六级标题

任务列表

格式：

 - [] 待完成
- [X] 已完成

效果如下：

• 待完成
• 已完成

图片

格式为![]()

其中图片名称可以为空。直接输入[]就可以。下面我的url输入的直接就文字url。所以肯定是空图片啦。Typora也可以直接把电脑本地的图片拖进来，自动生成图片链接。

![图片名](URL)

区块引用

代码块，使用'`'和~都可以

```
代码
```

效果如下：

代码

行内代码

程序猿引用代码，或者是文章中有一些关键性的名词啊，或者为了突出醒目。效果不错。

`printf("test")`

效果如下：
printf("test”);

列表

- 无序项目1
* 无序项目2
+ 无序项目3
	- 无序二级1
	- 无序二级2
1. 有序标题
	1. 无序二级标题

• 无序项目1

• 无序项目2

• 无序项目3
  • 无序二级1
  • 无序二级2

1. 有序标题

   1. 无序二级标题

表格

ctrl+t更方便

| 第一格表头                       | 第二格表头             |
| -------------------------------- | ---------------------- |
| 内容单元格 第一列第一格          | 内容单元格第二列第一格 |
| 内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格 |

效果如下:

第一格表头	第二格表头
内容单元格 第一列第一格	内容单元格第二列第一格
内容单元格 第一列第二格 多加文字	内容单元格第二列第二格

脚注

H~2~o效果预览-->H₂o

高亮<mark>

<mark>content</mark>

<mark>标签支持全局属性，因此可以通过自定义style修改mark的样式。

参考这个↓：

HTML参考手册|编程字典

<mark>原始样式</mark>
<mark style="font:'微软雅黑';color:red;font-weight:900">CSS样式</mark>

原始样式
CSS样式