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

5 篇文章 3 订阅
3 篇文章 0 订阅
内容介绍

  最近在使用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
> 引用文本

敲掉文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
H2O is是液体。
210 运算结果是 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 1Column 2
centered 文本居中right-aligned 文本居右
11.2 html表格
<table id="htmltable">
<tr>
<td width=20% rowspan=3>单元格-合并-指定宽度</td><td bgcolor="#FF9797">单元格-背景色</td><td><font face="华文楷体">单元格-华文楷体</font></td>
</tr>
<tr>
<td><font color=blue size=5>单元格-字体颜色-5号字</font></td><td align="left"><font>单元格-文本左对齐</font></td></tr>
<tr>
<td><font face="华文彩云" size=5>单元格 - 华文彩云 - 5号字</font></td><td>单元格第一行<br>单元格第二行<br>单元格第三行</td>
</tr>
</table>
单元格-合并-指定宽度单元格-背景色单元格-华文楷体
单元格-字体颜色-5号字单元格-文本左对齐
单元格 - 华文彩云 - 5号字单元格第一行
单元格第二行
单元格第三行
12、注脚
**注脚1**:^[这是注脚1]
**注脚2**:[^2]
[^2]:这是注脚2

注脚1:1
注脚2:2

13、注释
> [^_^]: <>  (注释内容1——符号左右加空格)
> [//]: # (注释内容2——符号左右加空格)
> <!-- 我是注释内容3 -->
14、自定义列表
markdown
: this is a markdown

authors
: author is 人间小美味695
markdown
this is a markdown
authors
author is 人间小美味695
二、小技巧
1、空格:
&emsp;
2、换行:
<br>
3、锚点跳转:

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

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

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

4、设置文本样式:
<font color="#FF8C0" size=3 face="华文楷体">文本内容使用font标签包裹,可通过face设置字体,size设置字号,color设置颜色</font>

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

5、特殊符号使用实体编号代替:
&#88; &#89; &#90; &#91; &#92; &#93; &#94; &#95; &#96; &#97; &#98; &#99;

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

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

6、添加表情符号:
代码说明显示效果
>:(生气😠
:")脸红😊
</3心碎💔
:/困惑😕
:,(😢
:(皱眉😦
<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 ↩︎

  • 16
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 24
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人间小美味695

您的鼓励是我创作的动力,感谢!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值