MarkDown语法汇总及演示

最新推荐文章于 2024-07-29 23:56:34 发布

ClearlightY

最新推荐文章于 2024-07-29 23:56:34 发布

阅读量1.3k

点赞数 1

分类专栏： # MarkDown 文章标签： MarkDown 语法大全演示

本文链接：https://blog.csdn.net/qq_36852780/article/details/88725631

版权

MarkDown 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过一天的整理,把基本的MarkDown的格式梳理一遍,现在分享给大家.

其中文字为MarkDown的编写,图片为写好后的展示.

全文编辑展示请看:

MarkDown编辑展示

全文MarkDown展示效果请看:

MarkDown效果展示

1.

@[TOC](目录)

效果展示:

2.

# ==标题、区块代码:==
# 一级标签
A First Level Header
================
## 二级标签
A Second Level Header
---------------------
>一级标签与二级标签有两种形式.
>其中`(# 一级标签)形式的应用是:先输入#,按空格键后输入想要的内容即可`

### Header 3

> This is a blockquote.
> 区块标签,先输入>在写入内容即可
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

效果展示:

3.

# ==文字的强调:==
*斜体*
_斜体_
**加粗**
__加粗__

效果展示:

4.

# ==创建一个表格:==
| 第一列 | 第二列 | 第三列 |
|-----------| -------------:|:-------------|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |

>表格的创建最主要的是第二行 : |-----|-----|-----|-----| ,该处代表4列.

:---------: 居中
:---------- 居左
----------: 居右
>想要内容居中还是左右,关键就是在创建表格时第二行在------的左右添加 : , 默认(不添加:的时候)表格是居中的.

效果展示:

5.

# ==列表:==
>对于使用有序与无序列表来说,写上*后面需要打一个空格,再输入想要写的内容.
>无需列表的三种方式. 　*　，　＋　，　－　,都可以
>有序列表写对应的数字即可.

**无序列表**
* 列1
* 列2
* 列3

**加号**
+ 列1
+ 列2
+ 列3

**减号**
- 列1
- 列2
- 列3

**有序列表**
1. 列1
2. 列2
3. 列3

效果展示:

6.

# ==空行:==
>想要插入多个空行,MarkDown编辑器不添加任何东西时,只能添加一个空行.
>**两种方式:**
>1.`输入 \ 按Enter键后在输入\ 继续按Enter键,在输入要写的内容,即可插入两个空行.`
>2.`与html相同,使用 ,换行符的意思,添加后即换行.

**例如**
滴水石穿,
\
\
非一日之功!

锲而不舍 
朽木不折!

效果展示:

7.

# ==段首段中缩进:==
>1.段首可以使用`&ensp;`,`&emsp;`,` `来产生空格.
>* &emsp; : 一个全角空格
>* &ensp; : 一个全角空格的一半
>*   : 一个半角空格
>
>2.段中可以将输入法改为全角(shift+空格)后,即可在文中添加空格.半角空格输入任意个,只起到一个空格的效果.

&ensp;1+1　　＝　　　２；
&emsp;1+1
 1+1
1 1(` `)
1 1(中间为半角空格)
1&ensp;1(`&ensp;`)
1　1(中间为全角空格)
1&emsp;1(`&emsp;`)
1+1 = 2(全为半角空格)

效果展示:

8.

# ==代码块:==
>三个方式:
>1. 输入四个空格,后输入内容
>2. 一个Tab键,后输入内容
>3. 三个反引号开始,内容写完后三个反引号作为结束.

**添加的什么代码就在每个开始的反引号后面填写好代码语言的名称即可.** 

```java
public class one {
 public static void main(String[] args) {
 System.out.println("Helllo World!");
 }
}
```

>如果在文本中添加一段代码的话,可以用一个反引号开始,写入想要的代码,在输入一个反引号作为结束.
>`throw new IndexOutOfBoundsException(outOfBoundsMsg(index));`

效果展示:

9.

# ==添加链接:==
1. `[展示的名称](想要的链接)`
**示例:**
* [百度](http://www.baidu.com)
* [Google](http://www.baidu.com)
* [Clearlight的博客](https://blog.csdn.net/qq_36852780)

2. `直接添加链接`
访问:<www.baidu.com>
www.weibo.com

3. `给图片添加链接`
格式: `[添加的图片](网站域名)`
>*其中如何添加图片,请看<a href="#itm2" >插入图片</a> *
>了解如何插入图片后,将插入的图片剪切,复制到 [ ] 里面,后面紧跟( ),括号里面写点击图片想要跳转的网址.网址前>面需要加上`http://`+`域名`

[![百度图标](https://s2.ax1x.com/2019/03/21/A3E2Nj.png)](http://www.baidu.com)

效果展示:

10.

# ==字体、字号与颜色:==

>直接参考文章:[微wx笑:CSDN-markdown编辑器语法——字体、字号与颜色](https://blog.csdn.net/testcs_dn/article/details/45719357/)
>　　　　　　 [RGB颜色查询对照表](http://www.114la.com/other/rgb.htm)
>\
>**摘抄部分,方便本文阅读:**
>\
>我是黑体字
\
我是微软雅黑
\
我是华文彩云
\
color=#0099ff size=72 face="黑体"
\
color=#00ffff
\
color=gray

效果展示:

11.

# ==&:==
>博客中想要将特定的&ensp;打出来,用&ensp;即可在文章中显示出来.
>**格式为:&amp+想要的内容即可.**

&nbsp; : 一个半角空格的长度

效果展示:

12.

# ==分割线:==
>三种方式 :
>********
>---------
>______

效果展示:

13.

# ==删除线:==
>格式:`~~添加删除线的内容~~`
>例 : ~~无效的信息~~

效果展示:

14.

<a id="itm2" target="_blank"></a>

# ==插入图片:==
>csdn支持直接上传图片.
>三种方式:
>* 快捷键: ctrl + shift + G
>* ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190321165458623.png)
>* 直接复制本地图片,然后在编辑处进行粘贴即可.(省去上传的步骤)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190321165753111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODUyNzgw,size_16,color_FFFFFF,t_70)

`图片URL可在网站中的图片右键复制图片地址,粘贴到上图的文本框中插入即可显示.`

**上传下面漫画图片的方式:(不会有CSDN自己的水印)
将图片上传到[路过图床](https://imgchr.com/ )后,复制图片URL链接,粘贴的插入图片的文本框中插入即可.**
![优美图片](https://img-blog.csdnimg.cn/2019032119562715.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODUyNzgw,size_16,color_FFFFFF,t_70)
**上传风景图片的方式是直接去网站中复制图片,后直接在文本框中粘贴而来.(相当于上传到CSDN服务器,故会有自己博客水印)**
![优美图片](https://img-blog.csdnimg.cn/20190321200645782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODUyNzgw,size_16,color_FFFFFF,t_70)
**上传情侣图片方式是在网站中复制图片链接后通过csdn插入图片方式,与第一种相同(不会有水印,但是当图片在原网址图片删除的话,则该图片也会丢失,故将图片保存后上传到<a href="#itm3">==保险的图床==</a>后添加图床中图片的URL)**
![情侣图片](http://i1.umei.cc/uploads/tu/201903/9999/3f158684ea.jpg)

>* <a id="itm3">图床意义</a>
　　就是专门用来存放图片，同时允许你把图片对外连接的网上空间，不少图床都是免费的。
>* 图床推荐编辑
　　商家在选择图床的时候，请慎重选择免费图床，毕竟众多免费图床网站注册条款里有禁止商用这一条，哪天关闭了图片外链或者商用，势必给用户带来很大的麻烦，很多免费图床总是好景不长，为什么呢？其实很简单，做相册站是要投入的，比如服务器、带宽、人员、技术投资、市场宣传等等！完全免费了，这些小站可能自己都难存活，所以总是不能长久使用！
> *摘自 [图床＿百度百科](https://baike.baidu.com/item/%E5%9B%BE%E5%BA%8A/10721348?fr=aladdin)*

>通过以上的示例显示复制图片后,直接粘贴在编辑的地方是最简单的方式.

`另外:上传本地图片不能大于5M,调整图片大小方法参考:`
[图片太大怎么办如何对图片进行压缩处理](https://jingyan.baidu.com/article/5225f26ba33ee7e6fa090833.html)

**注意：图片描述和图片提示的区别
图片描述是在图片无法加载的时候显示的；
图片提示是在鼠标移动到图片上的时候显示的；**
*注意内容摘自:[CSDN-markdown编辑器插入网上或本地电脑上的图片](https://blog.csdn.net/testcs_dn/article/details/44228327)*

效果展示:

15.

# ==添加锚点,跳到指定位置:==

**锚点是是网页制作中超级链接的一种，又叫命名锚记。**

>使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，
这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。
1、创建命名锚记
2、创建到该命名锚记的链接.
反正就是用于文章快速定位，点击目录便可直接跳转到指定位置的。 
>*锚点介绍摘自:[ hugh Lee : markdown中的锚点](https://blog.csdn.net/qq_33530388/article/details/59058061 )*

>方法:
>1. 创建锚记:
<a href="#itm" >锚</a>
>2. 创建到该锚记的链接:
<a id="itm">锚点</a>