学习MarkDown编辑器。不看会后悔

约定不等于承诺〃 2022-06-10 10:07 196阅读 0赞

*  引言
 *  生成目录
 *  创建标题
 *  一级标题
    
     *  二级标题
        
         *  三级标题
            
             *  四级标题
                
                 *  五级标题
                    
                     *  六级标题
 *  删除线和分隔线
 *  脚注
 *  代码块和语法高亮
 *  超链接引用
 *  图片引用
 *  加粗斜体
 *  引用
 *  字体大小颜色
 *  测试例子
    
     *  分隔线测试
     *  脚注测试
     *  代码块高亮测试
     *  超链接测试
     *  插入图片测试
     *  引用测试
     *  粗体斜体测试
     *  测试字体大小颜色
 *  总结

# 引言 #

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的！
    CSDN-markdown编辑器是其衍生版本，扩展了Markdown的功能（如表格、脚注、内嵌HTML等等）！对，就是内嵌HTML，接下来要讲的功能就需要使用内嵌HTML的方法来实现。

MarkDown编辑器是CSDN里提供的丰富文章效果的编辑工具，比普通的编辑工具强大了不少，而且丰富了界面效果，当然并不是所以都是我们需要的。  
最大的特色是提供了“目录生成”功能，类似Word里通过目录即可定位到某个内容，这不是一般的棒哦。

# 生成目录 #

“\[TOC\]”:用于生成目录。一般放在文章开关部分即可。

# 创建标题 #

为\[TOC\]提供数据源的，用过Word的应该理解起来不难。  
在文字写书写不同数量的\#可以完成不同的标题，如下：

# 一级标题 #

## 二级标题 ##

### 三级标题 ###

#### 四级标题 ####

##### 五级标题 #####

###### 六级标题 ######

通过\#定义一到六级标题。

# 删除线和分隔线 #

删除线：删除线的使用，在需要删除的文字前后各使用两个符合“~”，如下  
Mistaken text.

分隔线：可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，同时需要在分隔线的上面空一行。如下：

`---`  
`****`  
`___`

# 脚注 #

编辑器会从头向下搜索，第一个找到的是1，第二个是2，依次类推。如下图  
![这里写图片描述][SouthEast]

语法：先使用后定义脚注内容

[^任意名]
    [^任意名]:定义脚注内容

例如：
    脚注测试[^baidu].
    [^baidu]:百度一下，你就知道

结果如下：  
脚注测试1.

# 代码块和语法高亮 #

代码块很容易理解，普通编辑器就有这功能，语法高亮是个特色，能根据指定的语言高亮显示类等等语法

--------------------

> 我觉得MarkDown编辑器就这5个功能比较实用，有特色，其它像UML图、时序图、流程图、表格没啥大的实用价值。因为写起来复杂不说而且效果不好，完全可以用画图工具代替。  
> 好了，上面介绍了5个特色功能，而且解决一下一般编辑器都有的功能。看看MarkDown会怎么用。

# 超链接引用 #

语法：`[这里写链接内容](这里写链接的url)`。比如：  
`[百度一下，你就知道](www.baidu.com)`

# 图片引用 #

语法：`![这里写图片描述](url地址)`  
例如：`![图片]( http://p1.pstatp.com/origin/353b0025aebd661c22c0)`

这种方式只能引用网络上的图片，本地图片需要上传才能引用。按如下方式上传本地图片  
![这里写图片描述][SouthEast 1]

# 加粗/斜体 #

粗体的使用是在需要加粗的文字前后各加两个“*”，而斜体的使用则是在需要斜体的文字前后各加一个“*”，如果要使用粗体和斜体，那么就是在需要操作的文字前后各加三个“\*”。如下：  
**这个是粗体**  
*这个是斜体*  
***这个是粗体加斜体***

# 引用 #

有时候写的文章并不一定完全是自的观点，如果我们参考了别人的文章完全可以单独列出来。  
引用的格式是使用符号“>”后面书写文字，及可以使用引用。如下：

> 这个是引用  
> 是不是和电子邮件中的  
> 引用格式很像

# 字体大小、颜色 #

字体大小和颜色设置起来比较复杂，看起来不爽，跟写html似的，这点不好用。  
5号字体  
14号字体  
14号红色字体

--------------------

# 测试例子 #

## 分隔线测试 ##

--------------------

或者

--------------------

## 脚注测试 ##

hello2  
脚注测试3.

--------------------

## 代码块高亮测试 ##

测试java代码块及类高亮显示

public class CatVo implements Serializable{ 
        /** * */
        private static final long serialVersionUID = 1L;
        private String cd;
        private String nmCn;
    }

--------------------

## 超链接测试 ##

百度

--------------------

## 插入图片测试 ##

![这是一个图片][bc3000c8be7b386f373]

--------------------

## 引用测试 ##

> 注意注意了，同学们请认真看别人家的女老师美不美

--------------------

## 粗体/斜体测试 ##

**我是粗体**  
*我是斜体*  
***我即粗又邪（斜）哦***

## 测试字体大小、颜色 ##

5号字体

14号字体

14号红色字体

# 总结 #

**知道这些就够了，其它功能似鸡肋，当然也看个人喜爱。不喜勿喷哦。**

--------------------

1.  百度一下，你就知道 ↩
2.  hi ↩
3.  百度一下，你就知道 ↩

[SouthEast]: /images/20220610/8f2065670f2f48af8cbb06cda487acd3.png
[SouthEast 1]: /images/20220610/6116a48d91dd48f09e06f9869fe8c75b.png
[bc3000c8be7b386f373]: /images/20220610/7da2e6cf7fc444ed9aabf78301eee58a.png