Vue进阶（幺零三）：Markdown 基本语法_vue解析markdown语法(1)

这是加粗的文字
这是倾斜的文字`
这是斜体加粗的文字
这是加删除线的文字

效果如下：


**这是加粗的文字**  
 *这是倾斜的文字*`  
 ***这是斜体加粗的文字***  
 ~~这是加删除线的文字~~


### 五、引用


在引用的文字前加`>`即可。引用也可以嵌套，如加两个`>>`三个`>>>`  
 n个…  
 貌似可以一直加下去，但没神马卵用


示例：

这是引用的内容

这是引用的内容

这是引用的内容

效果如下：



> 
> 这是引用的内容
> 
> 
> 
> > 
> > 这是引用的内容
> > 
> > 
> > 
> > > 
> > > 
> > > > 
> > > > 
> > > > > 
> > > > > 
> > > > > > 
> > > > > > 
> > > > > > > 
> > > > > > > 
> > > > > > > > 
> > > > > > > > 
> > > > > > > > > 
> > > > > > > > > 
> > > > > > > > > > 
> > > > > > > > > > 这是引用的内容
> > > > > > > > > > 
> > > > > > > > > > 
> > > > > > > > > > 
> > > > > > > > > 
> > > > > > > > > 
> > > > > > > > > 
> > > > > > > > 
> > > > > > > > 
> > > > > > > > 
> > > > > > > 
> > > > > > > 
> > > > > > > 
> > > > > > 
> > > > > > 
> > > > > > 
> > > > > 
> > > > > 
> > > > > 
> > > > 
> > > > 
> > > > 
> > > 
> > > 
> > > 
> > 
> > 
> > 
> 
> 
> 


### 六、分割线


三个或者三个以上的 `-` 或者 `*` 都可以。


示例：

---

---

---

---

效果如下：




---




---




---


可以看到，显示效果是一样的。


### 七、图片


语法：

图片`alt`就是显示在图片下面的文字，相当于对图片内容的解释。  
 图片`title`是图片的标题，当鼠标移到图片上时显示的内容。`title`可加可不加  
 示例：


![blockchain](https://ss0.bdstatic.com/70cFvHSh\_Q1YnxGkpoWK1HF6hhy/it/  
 u=702257389,1274025419&fm=27&gp=0.jpg “区块链”)  
 效果如下：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200319135323210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70)  
 `markdown`格式追求的是简单、多平台统一。那么图片的存储就是一个问题，需要用图床，提供统一的外链，这样就不用在不同的平台去处理图片的问题了。才能做到书写一次，各处使用。


### 八、超链接


语法：

超链接名
title可加可不加

示例：

简书
百度

效果如下：


[简书](https://bbs.csdn.net/topics/618166371)  
 [百度](https://bbs.csdn.net/topics/618166371)


注：`Markdown`本身语法不支持链接在新页面中打开，如果想要在新页面中打开的话可以用`html`语言的`a`标签代替。

超链接名

示例

简书

### 九、列表


无序列表  
 语法：  
 无序列表用 `- + *` 任何一种都可以

• 列表内容

• 列表内容

• 列表内容

注意：`- + *` 跟内容之间都要有一个空格。


效果如下：


* 列表内容
* 列表内容
* 


有序列表  
 语法：  
 数字加点

1. 列表内容
2. 列表内容
3. 列表内容

注意：序号跟内容之间要有空格  
 效果如下：


1. 列表内容
2. 列表内容
3. 列表内容


列表嵌套  
 上一级和下一级之间敲三个空格即可


* 一级无序列表内容


	+ 二级无序列表内容
	+ 二级无序列表内容


1. 一级有序列表内容

 1.1 二级无序列表内容  
 1.2 二级无序列表内容  
 1.3 二级无序列表内容


### 十、表格


语法：

表头	表头	表头
内容	内容	内容
内容	内容	内容

第二行分割表头和内容。


* 有一个就行，为了对齐，多加了几个  
 文字默认居左  
 -两边加：表示文字居中  
 -右边加：表示文字居右  
 注：原生的语法两边都要用 | 包起来。此处省略  
 示例：

姓名	技能	排行
刘备	哭	大哥
关羽	打	二哥
张飞	骂	三弟

效果如下：




| 姓名 | 技能 | 排行 |
| --- | --- | --- |
| 刘备 | 哭 | 大哥 |
| 关羽 | 打 | 二哥 |
| 张飞 | 骂 | 三弟 |


### 十一、代码


语法：  
 单行代码：代码之间分别用一个反引号包起来

代码内容

代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行

() 代码... 代码... 代码... ()

注：为了防止转译，前后三个反引号处加了小括号，实际是没有的。这里只是用来演示，实际中去掉两边小括号即可。


示例：


单行代码

create database hero;

代码块

function fun(){
     echo "这是一句非常牛逼的代码";
}

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

示例：

单行代码

`create database hero;`

代码块

    function fun(){
         echo "这是一句非常牛逼的代码";
    }


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**