CSDN的markdown编辑器使用（含表格背景色、文本颜色字体字号、锚点跳转、表情符号等）

内容介绍

  最近在使用csdn的markdown编辑器写东西时发现了一些有趣的东西，下面简单列举一下，希望对看到的小伙伴有所帮助(本文目的为演示编辑效果，目录显示较乱)。

一、基础编辑

---

1、目录

各级标题完整目录显示的位置。

@[TOC](目录显示位置)

---

2、标题

1-6级，一级一个"#“，六级六个”#"。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

---

3、快捷键

说明	组合键
撤销	Ctrl/Command + Z
重做	Ctrl/Command + Y
加粗	Ctrl/Command + B
斜体	Ctrl/Command + I
标题	Ctrl/Command + Shift + H
无序列表	Ctrl/Command + Shift + U
有序列表	Ctrl/Command + Shift + O
检查列表	Ctrl/Command + Shift + C
插入代码	Ctrl/Command + Shift + K
插入链接	Ctrl/Command + Shift + L
插入图片	Ctrl/Command + Shift + G

---

4、文本样式

*敲掉文本* _强调文本_
**加粗文本**  __加粗文本__
==标记文本==
~~删除文本~~
H~2~O is是液体
2^10^ 运算结果是 1024
> 引用文本

敲掉文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
H₂O is是液体。
2¹⁰ 运算结果是 1024。

引用文本

---

5、列表

5.1 无序列表

• 项目
  • 项目
    • 项目

5.2 有序列表

1. 项目1
2. 项目2
3. 项目3

5.3 待办事项TodoList

• 计划任务
• 完成任务

---

6、链接

[链接包含描述文本和地址链接两部分](https://www.csdn.net/)

链接包含描述文本和地址链接两部分

---

7、图片

7.1 图片

![测试图片](https://img-blog.csdnimg.cn/20210419174516559.jpg)

7.2 带尺寸的图片

![测试图片](https://img-blog.csdnimg.cn/20210419174516559.jpg =100x100)

7.3 居中的图片

![测试图片](https://img-blog.csdnimg.cn/20210419174516559.jpg#pic_center)

7.4居中且带尺寸的图片

![测试图片](https://img-blog.csdnimg.cn/20210419174516559.jpg#pic_center =100x100)

---

8、分割线

使用星号"*“、减号”-“或下划线”_"，连续三个或三个以上

***
_____
-----

---

---

---

9、段落

9.1 缩进

  缩进文本

  缩进文本

9.2 换行和段落

一次Enter为换行，两次Enter为段落

10、代码片高亮显示

```后可设置语言，如html,css,javascript等

```code```

function handle(){
// todo...
}

11、表格

11.1 markdown表格

冒号":"表示对齐方式

项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1

| Column 1 | Column 2      |
|:--------| -------------:|
| centered 文本居中 | right-aligned 文本居右 |

项目	Value
电脑	$1600
手机	$12
导管	$1

Column 1	Column 2
centered 文本居中	right-aligned 文本居右

11.2 html表格

单元格-合并-指定宽度
单元格-背景色
单元格-华文楷体


单元格-字体颜色-5号字
单元格-文本左对齐

单元格 - 华文彩云 - 5号字
单元格第一行
单元格第二行
单元格第三行

单元格-合并-指定宽度	单元格-背景色	单元格-华文楷体
	单元格-字体颜色-5号字	单元格-文本左对齐
	单元格 - 华文彩云 - 5号字	单元格第一行 单元格第二行 单元格第三行

12、注脚

**注脚1**:^[这是注脚1]
**注脚2**:[^2]
[^2]:这是注脚2

注脚1:<sup>1</sup>
注脚2:<sup>2</sup>

13、注释

> [^_^]: <>  (注释内容1——符号左右加空格)
> [//]: # (注释内容2——符号左右加空格)
> 

14、自定义列表

markdown
: this is a markdown

authors
: author is 人间小美味695

markdown

this is a markdown

authors

author is 人间小美味695

二、小技巧

1、空格：

2、换行：

3、锚点跳转：

目标元素添加id属性，点击链接使用"#"加对应的id值。

[测试锚点——跳转至10.2html表格](#htmltable)

测试锚点——跳转至11.2html表格

4、设置文本样式：

文本内容使用font标签包裹，可通过face设置字体，size设置字号，color设置颜色

文本内容使用font标签包裹，可通过face设置字体，size设置字号，color设置颜色

5、特殊符号使用实体编号代替：

X Y Z [ \ ] ^ _ ` a b c

X Y Z [ \ ] ^ _ ` a b c

ASCII字符集——参考文档：https://www.runoob.com/tags/html-ascii.html

6、添加表情符号：

代码	说明	显示效果
>:(	生气
:")	脸红
	心碎
:/	困惑
:,(	哭
:(	皱眉
<3	心	❤️
]:(	小鬼
o:)	无辜
:,)	哭笑
x-)	大笑
:|	面无表情
:o	安静
:@	愤怒
:)	微笑
]:)	微笑
;(	呜咽
:P	吐舌鬼脸
8-)	太阳镜
,:(	流汗
,:)	流汗
:s	不爽
;)	飞媚眼

6.1、People

代码	显示效果	代码	显示效果
:smile:		:laughing:
:blush:		:smiley:
:thought_balloon:		:smirk:
:heart_eyes:		:kissing_heart:
:kissing_closed_eyes:		:flushed:
:relieved:		:satisfied:
:grin:		:wink:
:stuck_out_tongue_winking_eye:		:stuck_out_tongue_closed_eyes:
:grinning:		:kissing:
:kissing_smiling_eyes:		:stuck_out_tongue:
:sleeping:		:worried:
:frowning:		:anguished:
:open_mouth:		:grimacing:
:confused:		:hushed:
:expressionless:		:unamused:
:sweat_smile:		:sweat:
:disappointed_relieved:		:weary:
:pensive:		:disappointed:
:confounded:		:fearful:
:cold_sweat:		:persevere:
:cry:		:sob:
:joy:		:astonished:
:scream:		:tired_face:
:angry:		:rage:
:triumph:		:sleepy:
:yum:		:mask:
:sunglasses:		:dizzy_face:
:imp:		:smiling_imp:
:neutral_face:		:no_mouth:
:innocent:		:alien:
:yellow_heart:		:blue_heart:
:purple_heart:		:heart:	❤️
:green_heart:		:broken_heart:
:heartbeat:		:heartpulse:
:two_hearts:		:revolving_hearts:
:cupid:		:sparkling_heart:
:sparkles:	✨	:star:	⭐️
:star2:		:dizzy:
:boom:		:collision:
:anger:		:exclamation:	❗️
:question:	❓	:grey_exclamation:	❕
:grey_question:	❔	:zzz:
:dash:		:sweat_drops:
:notes:		:musical_note:
:fire:		:hankey:
:poop:		:shit:
:+1:		:thumbsup:
:-1:		:thumbsdown:
:ok_hand:		:punch:
:facepunch:		:fist:	✊
:v:	✌️	:wave:
:hand:	✋	:raised_hand:	✋
:open_hands:		:point_up:	☝️
:point_down:		:point_left:
:point_right:		:raised_hands:
:pray:		:point_up_2:
:clap:		:muscle:
:metal:		:fu:
:runner:		:running:
:couple:		:family:
:two_men_holding_hands:		:two_women_holding_hands:
:dancer:		:dancers:
:ok_woman:		:no_good:
:information_desk_person:		:raising_hand:
:bride_with_veil:		:person_with_pouting_face:
:person_frowning:		:bow:
:couple_with_heart:		:massage:
:haircut:		:nail_care:
:boy:		:girl:
:woman:		:man:
:baby:		:older_woman:
:older_man:		:person_with_blond_hair:
:man_with_gua_pi_mao:		:man_with_turban:
:construction_worker:		:cop:
:angel:		:princess:
:smiley_cat:		:smile_cat:
:heart_eyes_cat:		:kissing_cat:
:smirk_cat:		:scream_cat:
:crying_cat_face:		:joy_cat:
:pouting_cat:		:japanese_ogre:
:japanese_goblin:		:see_no_evil:
:hear_no_evil:		:speak_no_evil:
:guardsman:		:skull:
:feet:		:lips:
:kiss:		:droplet:
:ear:		:eyes:
:nose:		:tongue:
:love_letter:		:bust_in_silhouette:
:busts_in_silhouette:		:speech_balloon:

6.2、Nature(部分)

代码	显示效果	代码	显示效果
:sunny:	☀️	:umbrella:	☔️
:cloud:	☁️	:snowflake:	❄️
:snowman:	⛄️	:zap:	⚡️
:cyclone:		:foggy:
:ocean:		:cat:
:dog:		:mouse:
:hamster:		:rabbit:
:wolf:		:frog:
:tiger:		:koala:
:bear:		:pig:

6.3、Objects(部分)

代码	显示效果	代码	显示效果
:bamboo:		:gift_heart:
:dolls:		:school_satchel:
:mortar_board:		:flags:
:fireworks:		:sparkler:
:wind_chime:		:rice_scene:
:jack_o_lantern:		:ghost:
:santa:		:christmas_tree:
:gift:		:bell:
:no_bell:		:tanabata_tree:
:tada:		:confetti_ball:
:balloon:		:crystal_ball:
:cd:		:dvd:

6.4、Place(部分)

代码	显示效果	代码	显示效果
:house:		:house_with_garden:
:school:		:office:
:post_office:		:hospital:
:bank:		:convenience_store:
:love_hotel:		:hotel:
:wedding:		:church:	⛪️
:department_store:		:european_post_office:
:city_sunrise:		:city_sunset:
:japanese_castle:		:european_castle:
:tent:	⛺️	:factory:
:tokyo_tower:		:japan:
:mount_fuji:		:sunrise_over_mountains:
:sunrise:		:stars:
:statue_of_liberty:		:bridge_at_night:
:carousel_horse:		:rainbow:
:ferris_wheel:		:fountain:	⛲️
:roller_coaster:		:ship:

6.5、Symbols(部分)

代码	显示效果	代码	显示效果
:one:	1️⃣	:two:	2️⃣
:three:	3️⃣	:four:	4️⃣
:five:	5️⃣	:six:	6️⃣
:seven:	7️⃣	:eight:	8️⃣
:nine:	9️⃣	:keycap_ten:
:1234:		:zero:	0️⃣
:hash:	#️⃣	:symbols:
:arrow_backward:	◀️	:arrow_down:	⬇️
:arrow_forward:	▶️	:arrow_left:	⬅️
:capital_abcd:		:abcd:
:abc:		:arrow_lower_left:	↙️
:arrow_lower_right:	↘️	:arrow_right:	➡️
:arrow_up:	⬆️	:arrow_upper_left:	↖️
:arrow_upper_right:	↗️	:arrow_double_down:	⏬
:arrow_double_up:	⏫	:arrow_down_small:
:arrow_heading_down:	⤵️	:arrow_heading_up:	⤴️
:leftwards_arrow_with_hook:	↩️	:arrow_right_hook:	↪️
:left_right_arrow:	↔️	:arrow_up_down:	↕️
:arrow_up_small:		:arrows_clockwise:
:arrows_counterclockwise:		:rewind:	⏪
:fast_forward:	⏩	:information_source:	ℹ️
:ok:		:twisted_rightwards_arrows:
:repeat:		:repeat_one:
:new:		:top:
:up:		:cool:
:free:		:ng:
:cinema:		:koko:
表情符号参考：https://www.webfx.com/tools/emoji-cheat-sheet/

注：

  为方便区分代码和样式，所有样式均使用引用方式包裹，实际显示可复制代码自行试验。

  流程图、甘特图等作者平时使用较少，暂不列入文中，需要的可查看帮助文档，也可留言或私聊沟通。

---

标签：csdn，markdown，编辑器，排版样式

---

更多演示案例，查看 案例演示

---

欢迎评论留言!

---

1. 这是注脚1 ↩︎

2. 这是注脚2 ↩︎