CSDN博客写作编辑器如何使用？

文章目录

  • 0、引言
  • 1、快捷键
  • 2、文字
  • 3、链接和代码
  • 4、注脚和注释
  • 5、公式
  • 6、表
  • 7、图

0、引言

  笔者阅读CSDN博客已有五年，从最初的学习跟随者，到现在的CSDN博客创造者，这其中的转变来源于自身发展的思考，有学的输入，又有创作的输出，才是一个完整的学习流程。同时，又基于笔者所学知识大多数来源于网络各位博客学者，笔者在经历自身思考后，做出一点创新（以笔者角度进行再现现有方法或者进行方法完善），最终发布博客于网络，做出一点社会贡献，我自身仅需这个知识再造的经历。

1、快捷键

  撤销：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

2、文字

  （1）目录和标题

@[TOC]这是目录
# 1级标题
## 2级标题
### 3级标题
#### 四级标题
##### 五级标题
###### 陆级标题

  网页显示结果：
  在这里插入图片描述

  （2）文本样式

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

  网页显示结果：
  在这里插入图片描述

  （3）字体大小

//格式：<font size="">;输入文章内容</font>;，size：规定文本的尺寸大小，取值范围数字 1~7 ，浏览器默认值是 3。
<font size="1">;1号字体</font>;
<font size="2">;2号字体</font>;
<font size="3">;3号字体</font>;
<font size="4">;4号字体</font>;
<font size="5">;5号字体</font>;
<font size="6">;6号字体</font>;
<font size="7">;7号字体</font>;

  网页显示结果:
  在这里插入图片描述

  （4）字体类型

//格式：<font face="">;输入内容</font>;
<font face="黑体">;黑体</font>;
<font face="宋体">;宋体</font>;
<font face="仿宋">;仿宋</font>;
<font face="幼圆">;幼圆</font>;
<font face="楷书">;楷书</font>;
<font face="华文行楷">;华文行楷</font>;
<font face="华文隶书">;华文隶书</font>;
<font face="华文新魏">;华文新魏</font>;
<font face="STCAIYUN">;华文彩云</font>;
<font face="华文琥珀">;华文琥珀</font>;

  网页显示结果：
  在这里插入图片描述

  （5）字体颜色

//<font color="输入颜色">;输入文章内容</font>;
//使用颜色的英文字母
<font color="Green">;绿色</font>;
<font color="Blue">;蓝色</font>;
<font color="Yellow">;黄色</font>;
<font color="Brown">;棕色</font>;
<font color="YellowGreen">;黄绿色</font>;
//color=后面的双引号可以去掉
<font color=Green>;绿色</font>;
//使用十六进制颜色值
<font color="#000000">;黑色</font>;
<font color="#008000">;绿色</font>;
<font color="#0000FF">;蓝色</font>;
<font color="#9ACD32">;黄绿色</font>;

  网页显示结果：
  在这里插入图片描述
  
  （6）字体混合设置

<font color=#0099ff size=4 face="黑体">;4号</font>;
<font color=#00ffff size=5>;color=#00ffff</font>;
<font color=Brown size=7>;color=gray</font>;

  网页显示结果：
  在这里插入图片描述

  （7）插入分割线

//下面为分割线
- - -
//上面为分割线

  网页显示结果：
  在这里插入图片描述

  （8）其他命令

空格——“&amp;emsp;”
换行——“<br/>;”
``高亮显示``

  网页显示结果：
  在这里插入图片描述

3、链接和代码

  （1）链接

链接: [link](https://mp.csdn.net).
图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg)
带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg =30x30)

  网页显示结果：
  在这里插入图片描述

  图片链接参数：
  ①图片居中——#pic_center
  ②图片居左——#pic_left
  ③图片居右——#pic_right
  ④图片放缩——# =50%x
  ⑤居中放缩——#pic_center# =50%x
  ⑥ 修改图片为指定尺寸—— =100x50（空格=长x宽）

  （2）代码
  ①代码片可手动声明代码语言类型
  ②目前支持代码类型: markup、html、svg、xml、c、clike、cpp、csharp、java、vbnet、go、ruby/rb、python/py、php、sql、perl、objectivec、swift、javascript/js、css、handlebars、bash、kotlin
  ③代码片主题
  默认主题为：Atom One Dark
  可以前往 写作中心/博客设置 在代码片样式项进行更改

  ```
  // A code block
  var foo = “bar”;
  ```
  ```javascript
  // An highlighted block
  var foo = “bar”;
  ```
  网页显示结果：
  在这里插入图片描述

4、注脚和注释

  （1）注脚

一个具有注脚的文本。[^1]
[^1]: 注脚的解释

  网页显示结果：
  在这里插入图片描述
  
  （2）注释

Markdown将文本转换为 HTML。
*[HTML]: 超文本标记语言

  网页显示结果：
  在这里插入图片描述

5、公式

  CSDN博客编辑器的公式编辑器使用KaTex格式的数学公式，其语法与 LaTex基本一致，但也有一些不同的地方，具体请参考KaTex官方使用文档：https://katex.org/docs/supported.html

Gamma公式展示 $Gamma(n) = (n-1)!\quad \forall n \in \mathbb N$ 是通过 Euler integral
$$
Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,.
$$

  网页显示结果：
  在这里插入图片描述

6、表

  （1）列表

- 项目
* 项目
+ 项目
1. 项目1
2. 项目2
3. 项目3
- [ ] 计划任务
- [x] 完成任务

  网页显示结果：
  在这里插入图片描述
  
  （2）表格

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

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

  网页显示结果：
  在这里插入图片描述

  （3）自定义列表

Markdown
: Text-to-HTML conversion tool

Authors
: John
: Luke

  网页显示结果：
  在这里插入图片描述

7、图

  （1）插入甘特图
  ```mermaid
  gantt
  dateFormat YYYY-MM-DD
  title Adding GANTT diagram functionality to mermaid
  section 现有任务
  已完成 :done, des1, 2014-01-06,2014-01-08
  进行中 :active, des2, 2014-01-09, 3d
  计划中 : des3, after des2, 5d
  ```
  网页显示结果：
  在这里插入图片描述

  （2）插入UML图
  ```mermaid
  sequenceDiagram
  张三 ->>;>; 李四: 你好！李四, 最近怎么样?
  李四–>>;>;王五: 你最近怎么样，王五？
  李四–x 张三: 我很好，谢谢!
  李四-x 王五: 我很好，谢谢!
  Note right of 王五: 李四想了很长时间, 文字太长了<br/>;
  不适合放在一行.
  李四–>>;>;张三: 打量着王五…
  张三->>;>;王五: 很好… 王五, 你怎么样?
  ```

  网页显示结果：
  在这里插入图片描述
  
  （3）插入Mermaid流程图
  ```mermaid
  graph LR
  A[长方形] – 链接 -->; B((圆))
  A -->; C(圆角长方形)
  B -->; D{菱形}
  C -->; D
  ```
  网页显示结果：
  在这里插入图片描述
  
  （4）插入Flowchart流程图
  ```mermaid
  flowchat
  st=>;start: 开始
  e=>;end: 结束
  op=>;operation: 我的操作
  cond=>;condition: 确认？
  st->;op->;cond
  cond(yes)->;e
  cond(no)->;op
  ```
  网页显示结果：
  在这里插入图片描述
  
参考资料：
[1] CSDN官方博客. 博客帮助文档; 2019-12-11 [accessed 2023-04-11].
[2] 星空之路Star. 博客写作小技巧【1】：如何设置字体大小、颜色和字体类型！; 2020-08-19 [accessed 2023-04-11].
[3] 星空之路Star. 博客写作小技巧【2】：段落首行缩进、添加分割线……; 2020-08-19 [accessed 2023-04-11].
[4] NeXT_Vision. CSDN写作技巧记录; 2023-03-26 [accessed 2023-04-11].
[5] zaego. Markdown如何输入上下角标; 2018-10-13 [accessed 2023-04-11].
[6] 少年龙龙. CSDN写作小技巧; 2022-05-11 [accessed 2023-04-11].

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/9936.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

手撕Twitter推荐算法

手撕Twitter推荐算法

Twitter近期开源了其推荐系统源码[1,2,3]&#xff0c;截止现在已经接近36k star。但网上公开的文章都是blog[1]直译&#xff0c;很拗口&#xff0c;因此特地开个系列系统分享下。系列涵盖&#xff1a; Twitter整体推荐系统架构&#xff1a;涵盖图数据挖掘、召回、精排、规则多…
阅读更多...
Python人工智能在气象中的实践技术应用

Python人工智能在气象中的实践技术应用

当今从事气象及其周边相关领域的人员&#xff0c;常会涉及气象数值模式及其数据处理&#xff0c;无论是作为业务预报的手段、还是作为科研工具&#xff0c;掌握气象数值模式与高效前后处理语言是一件非常重要的技能。WRF作为中尺度气象数值模式的佼佼者&#xff0c;模式功能齐全…
阅读更多...
没有你 万般精彩皆枉然

没有你 万般精彩皆枉然

​​没有你&#xff0c;万般精彩皆枉然。你&#xff0c;是栖息在某人心头之人&#xff0c;更是每一个无可替代的它。万物皆有灵&#xff0c;在不曾踟蹰的千里足迹下&#xff0c;觅得到&#xff1b;在大自然作家笔端浮游的辞藻间&#xff0c;看得透。 《没有你 万般精彩皆枉然》…
阅读更多...
ESP32设备驱动-MAX30102脉搏血氧饱和度和心率监测传感器驱动

ESP32设备驱动-MAX30102脉搏血氧饱和度和心率监测传感器驱动

MAX30102脉搏血氧饱和度和心率监测传感器驱动 文章目录 MAX30102脉搏血氧饱和度和心率监测传感器驱动1、MAX30102介绍2、硬件准备3、软件准备4、驱动实现1、MAX30102介绍 MAX30102是一款集成脉搏血氧饱和度和心率监测生物传感器模块。 它包括内部 LED、光电探测器、光学元件和…
阅读更多...
让你的three.js动起来

让你的three.js动起来

让你的three.js动起来 简介 本节主要是给实例添加动画效果&#xff0c;以及加了一些小插件用以实现帧率检测、gui可视化配置、动态监听屏幕大小变化刷新和鼠标操控功能。 引入的插件js&#xff1a; three.jsdat.gui.jsStats.jsTrackballControls.js 实际效果&#xff1a; …
阅读更多...
Redis高可用高性能缓存的应用系列03 - 缓存过期淘汰策略LRU、LFU

Redis高可用高性能缓存的应用系列03 - 缓存过期淘汰策略LRU、LFU

概述 Redis高可用高性能缓存的应用系列的第3篇&#xff0c;主要介绍Redis缓存过期淘汰策略和内存淘汰策略回收的LRU和LFU的知识点进行说明。 Redis过期键删除策略 Redis设置key时&#xff0c;都会设置一个过期时间&#xff0c;那么当过期时间到了都是怎么处理的&#xff1f;…
阅读更多...
不用但一定要懂 ---- iOS 之 响应链、传递链 与 手势识别

不用但一定要懂 ---- iOS 之 响应链、传递链 与 手势识别

iOS 事件的主要由&#xff1a;响应连 和 传递链 构成。一般事件先通过传递链&#xff0c;传递下去。响应链&#xff0c;如果上层不能响应&#xff0c;那么一层一层通过响应链找到能响应的UIResponse。 响应链&#xff1a;由最基础的view向系统传递&#xff0c;first view ->…
阅读更多...
初谈 ChatGPT

初谈 ChatGPT

引子 最近&#xff0c;小编发现互联网中的大 V 突然都在用 ChatGPT 做宣传&#xff1a;“ChatGPT不会淘汰你&#xff0c;能驾驭ChatGPT的人会淘汰你”、“带领一小部分人先驾驭ChatGPT”。 确实&#xff0c;ChatGPT这个新生事物&#xff0c;如今被视为蒸汽机、电脑、iPhone 般的…
阅读更多...
EfficientNet V2

EfficientNet V2

目录 1. EfficientNet V1存在的问题 2. EfficientNet V2 的亮点 3. EfficientNet V2 网络架构 1. EfficientNet V1存在的问题 针对EfficientNet V1 &#xff0c;作者提出了以下的三个缺点 当训练图像的size很大时&#xff0c;网络中传递的特征图尺寸就会很大&#xff0c;这…
阅读更多...
(链表专题) 234. 回文链表——【Leetcode每日一题】

(链表专题) 234. 回文链表——【Leetcode每日一题】

234. 回文链表 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true 示例 2&#xff1a; 输入&…
阅读更多...
Vue：组件化开发

Vue：组件化开发

一、组件的使用 1、创建组件(结构HTML 交互JS 样式CSS) Vue.extend({该配置项和new Vue的配置项几乎相同&#xff0c;略有差别}) 区别&#xff1a;①创建vue组件的时候&#xff0c;配置项中不能使用el配置项。(但是需要使用template配置项来配置模板语句) ②配置项中的da…
阅读更多...
黑马程序员微服务技术栈教程 - 1. SpringCloud 微服务治理

黑马程序员微服务技术栈教程 - 1. SpringCloud 微服务治理

教程链接&#xff1a;https://www.bilibili.com/video/BV1LQ4y127n4 黑马的资料下载链接&#xff1a;https://pan.baidu.com/s/1zRmwSvSvoDkWh0-MynwERA&pwd1234 目录认识微服务单体架构分布式架构微服务微服务结构微服务技术对比SpringCloud总结 &#x1f380;服务拆分及远…
阅读更多...
实时翻译器-实时自动翻译器

实时翻译器-实时自动翻译器

自动翻译器——让语言不再是障碍。 在当今全球化的背景下&#xff0c;语言已不再是跨文化交流的障碍。而自动翻译技术作为突破语言壁垒的有效手段&#xff0c;越来越受到关注和需求。我们的自动翻译器就是一个高效、准确的翻译工具&#xff0c;它能够根据用户输入的内容自动识…
阅读更多...
【DS】河南省第十三届ICPC大学生程序设计竞赛 J-甜甜圈

【DS】河南省第十三届ICPC大学生程序设计竞赛 J-甜甜圈

明天就要省赛了&#xff0c;感觉已经寄了捏 J-甜甜圈_河南省第十三届ICPC大学生程序设计竞赛&#xff08;重现赛&#xff09; (nowcoder.com) 题意&#xff1a; 思路&#xff1a; 直接模拟复杂度太高&#xff0c;因此考虑用DS优化 我们考虑用树状数组维护 在用线段树和树状…
阅读更多...
MYSQL Row 752 was cut by GROUP_CONCAT()

MYSQL Row 752 was cut by GROUP_CONCAT()

因为group_concat有个最大长度的限制&#xff0c;GROUP_CONCAT函数返回的结果大小被MySQL默认限制为1024(字节)的长度。超过最大长度就会被截断掉 解决方法&#xff1a;更改配置文件&#xff0c;修改长度。 https://blog.csdn.net/zzddada/article/details/115082236 concat…
阅读更多...
网络的基本概念

网络的基本概念

作者&#xff1a;爱塔居 专栏&#xff1a;JavaEE 作者简介&#xff1a;大三学生&#xff0c;希望和大家一起进步 文章简介&#xff1a;主要概述IP地址、端口号、协议、协议分层、封装、分用、客户端、服务器、请求、响应、两台主机之间的网络通信流程。 文章目录 目录 文章目录…
阅读更多...
Yolo V7详解及openvino部署

Yolo V7详解及openvino部署

论文: https://arxiv.org/abs/2207.02696 代码: https://github.com/WongKinYiu/yolov7 Anchor Anchor是一种用于目标检测的先验框(prior box)生成方法&#xff0c;由Ren等人在2015年提出。Anchor可以在不同尺度和不同纵横比下生成多个先验框&#xff0c;并通过与真实目标框的…
阅读更多...
java equals和==的区别

java equals和==的区别

目录一、equals1.前言2.重写equals方法二、三、equals和的区别一、equals 1.前言 **当用equals来比较两个引用数据类型时默认比较的是它们的地址值&#xff0c;比如创建两个成员变量完全相同对象A和对象B两个进行比较&#xff0c;比较的是两个对象的地址值是否相等&#xff0c…
阅读更多...
〖Python网络爬虫实战⑫〗- XPATH语法介绍

〖Python网络爬虫实战⑫〗- XPATH语法介绍

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付费…
阅读更多...
【三十天精通Vue 3】第二天 Vue 3带来的新特性

【三十天精通Vue 3】第二天 Vue 3带来的新特性

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 三十天精通 Vue 3 文章目录引言一、 Vue 3 组件化架构1.1 Composition API1.2 Vuex 3 更新1.3…
阅读更多...
最新文章

Copyright @ 2022~2023