CSDN博客：Markdown编辑语法教程总结教程（下）

news2025/5/12 13:18:24

折枝寄北
❤个人主页：折枝寄北的博客

前封

Markdown编辑语法教程总结

  • 前言
  • 1. LaTex数学公式
  • 2. 插入不同类别的图
    • 2.1 插入甘特图
    • 2.2 插入UML图
    • 2.3 插入Mermaid流程图
    • 2.4 插入Flowchart流程图
    • 2.5 插入classDiagram类图
  • 3. CSDN快捷键
  • 4. 字体相关设置
    • 4.1 字体样式改变
    • 4.2 字体大小改变
    • 4.3 字体颜色改变
    • 4.4 字体背景色实现
  • 感谢您的阅读支持！！！
  • 后续会持续更新的！！！
  • 文末投票支持一下！！！

前言

在如今这个信息爆炸的时代，知识的分享与传播变得尤为重要，而博客无疑是其中的关键载体之一。CSDN作为国内知名的技术社区平台，为无数技术爱好者提供了展示自我、交流学习的空间。在使用 CSDN 博客进行创作的过程中，Markdown 编辑器无疑是提升写作效率、打造美观文章格式的得力工具。

回首过往，我初涉博客创作领域时，面对Markdown编辑器也是一头雾水。那些看似简单的符号和规则，仿佛是一道难以逾越的门槛，让我在创作过程中走了不少弯路。但凭借着对知识分享的热情和坚持不懈的探索，我逐渐掌握了 Markdown 编辑器的精髓，体会到了它为写作带来的便捷与高效。

如今，我将自己在学习 CSDN Markdown 编辑语法过程中的经验与心得进行总结，整理成这篇教程。希望能为那些和曾经的我一样，对 Markdown 编辑器感到迷茫的新手朋友们提供一份清晰的学习指南，让大家能够快速上手 CSDN Markdown编辑器，专注于优质内容的创作，轻松打造出排版精美的博客文章，在知识分享的道路上更加顺畅地前行。

在这篇博客之前，我已经写了上篇和中篇，在上篇中有“基础介绍，创作助手，目录，标题和文本样式”的使用介绍；在中篇中介绍了列表，图片，链接，代码片，表格，注脚和注释。有需要的朋友可以去看看！！！
CSDN博客：Markdown编辑语法教程总结教程（上）
CSDN博客：Markdown编辑语法教程总结教程（中）

1. LaTex数学公式

不建议使用，想要熟练使用所需的时间较长，适用于专业的文章中使用，在一般的博客中插入相关图片来阅读观看已经足够使用。

通过这个网址可以学习，新手建议先不要使用，上手较难，等能力跟上，在进行补充。

https://khan.github.io/KaTeX/
在这里插入图片描述

CSDN给出的示例：

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过 Euler
integral

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

最终效果：
在这里插入图片描述

2. 插入不同类别的图

不建议使用，熟练使用所需的时间较长且使用频率较低，一般不进行使用，效果同样可以使用插入普通图片来实现效果，而且更为方便直接。

2.1 插入甘特图

简介：甘特图（Gantt Chart）又称为横道图、条状图，是以提出者亨利·甘特的名字命名的一种直观的可视化工具，用于展示项目进度、任务安排等信息。

主要特点
时间导向 ：以时间为横轴，清晰展示各项任务在不同时间段的安排。 任务展示
：以纵轴列出具体任务或活动，通过横轴上的条形长度和位置，直观呈现任务的持续时间、开始时间和结束时间等信息。 进度可视化
：能直观地看出各项任务的进展情况，便于管理者及时掌握项目整体进度。

常见应用场景
项目管理 ：帮助项目经理合理安排项目任务，明确任务顺序和时间要求，有效监控项目进度，及时发现并解决进度偏差等问题。 生产计划
：在生产制造领域，用于制定生产计划，安排不同产品的生产任务，确保生产过程按计划有序推进。 工程建设
：如建筑工程项目中，用于规划工程进度，安排基础施工、主体施工、装修等各个环节的时间和资源投入。 常用制作工具

Microsoft Project ：专业的项目管理软件，具备强大的甘特图制作和管理功能，能够方便地调整任务时间、设置任务关联等。
Excel ：通过数据处理和图表功能，可以制作简单的甘特图，适合小型项目或临时性的任务安排。 在线项目管理工具 ：如
Trello、Asana 等，提供了便捷的甘特图制作模板和功能，方便团队协作和项目进度共享。

具体参考文档进行学习

参考文档：(https://mermaid-js.github.io/mermaid/#/gantt)

示例：

2014-01-06 2014-01-07 2014-01-08 2014-01-09 2014-01-10 2014-01-11 2014-01-12 2014-01-13 2014-01-14 2014-01-15 2014-01-16 2014-01-17 已完成 进行中 计划中 现有任务 Adding GANTT diagram functionality to mermaid

在这里插入图片描述

2.2 插入UML图

简介：UML（Unified Modeling Language）图，即统一建模语言图，是一种标准化的建模工具，广泛应用于软件工程、系统设计等领域，用于可视化、详述、构造和文档化系统的设计过程。

主要特点
可视化表达 ：通过各种图形元素（如矩形、椭圆形、箭头等）和连接关系，将系统的组成部分及其相互关系以直观的方式呈现出来，便于理解和沟通。
多角度描述：从不同的视角和层次对系统进行建模，包括静态结构、动态行为、系统组件等方面，全面展示系统的特性。
标准化规范：具有一套统一的符号和语义规范，使得不同人员在使用 UML 图进行建模时，能够保持一致的表达方式和理解，便于团队协作和知识共享。

常见类型
结构图 类图（Class Diagram） ：展示系统的类、接口及其之间的关系，如继承、关联、聚合等，是描述系统静态结构的核心图。
对象图（Object Diagram） ：显示系统在某一特定时刻的对象实例及其关联关系，是对类图的一个示例化展示。
组件图（Component Diagram） ：描绘系统的组件及其之间的依赖关系，组件可以是代码库、动态链接库等可替代的物理实现部分。
部署图（Deployment Diagram） ：展示系统硬件节点以及在节点上部署的软件构件，用于描述系统的物理架构和部署情况。 行为图
用例图（Use Case Diagram） ：从用户角度出发，展示系统功能（用例）以及参与者（如用户、外部系统等）与系统功能之间的交互关系。
活动图（Activity Diagram） ：描述系统的业务流程、工作流或操作的执行步骤，展示从开始到结束的活动顺序及分支、并发等情况。
状态图（State Diagram） ：刻画系统中某一类对象的状态及其之间的转移关系，适用于描述具有明显状态变化和事件驱动行为的对象。
顺序图（Sequence Diagram） ：以时间和顺序为轴，展示对象之间的交互顺序和消息传递，直观呈现系统动态行为的时间序列。
通信图（Communication Diagram）
：侧重于展示对象之间的关联关系及消息传递，以对象和关联为图的轴线，强调对象之间的交互连接。

常用制作工具 专业建模工具 ：
如
Enterprise Architect、Visual Paradigm 等，具备强大的 UML 建模功能，支持所有类型的 UML
图制作，且提供丰富的模板和自定义选项。 办公软件 ：Microsoft Visio 也常用于绘制 UML
图，通过其形状库和连接工具，可以方便地创建各类 UML 图形。 在线工具 ：如 draw.io、Lucidchart 等，提供了简洁易用的 UML 图制作界面和基本的图形元素，适合快速绘制简单的 UML 图，便于在线协作和分享。

应用场景
软件开发：在软件系统的设计阶段，帮助开发团队梳理需求、设计系统架构和模块划分，指导代码编写和系统实现。
系统分析与设计：用于对现有系统进行分析和建模，发现系统中的问题和改进点，为系统优化和升级提供依据。
项目管理：辅助项目团队进行项目规划、任务分解和进度跟踪，通过 UML 图展示项目的整体结构和各任务之间的依赖关系。
业务流程梳理 ：对企业或组织的业务流程进行可视化建模，帮助业务人员和开发人员共同理解业务规则和流程，为信息化建设提供业务基础。

具体参考文档进行学习

参考文档：(https://mermaid-js.github.io/mermaid/#/sequenceDiagram)

示例：

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

2.3 插入Mermaid流程图

简介：Mermaid流程图是一种基于文本的图表绘制工具，它允许用户通过简单的文本语法来创建和修改各种类型的图表，包括流程图、序列图、甘特图、类图、状态图等。以下是关于Mermaid流程图的详细介绍：

核心特点
文本驱动的图表生成：通过类似Markdown的语法，用户可以使用纯文本描述来创建图表，这种方式易于学习和使用，且便于版本管理和协作。
跨平台兼容：Mermaid可以在任何支持JavaScript的环境中运行，包括网页、Markdown编辑器、笔记应用等，具有良好的跨平台特性。
动态修改：图表可以通过修改其描述来重新渲染和修改，这使得它在文档编写和项目管理中非常灵活。
多种图表支持：除了流程图，Mermaid还支持序列图、类图、状态图、甘特图等多种图表类型，满足不同场景的需求。
开源与社区支持：作为开源项目，Mermaid拥有活跃的社区，持续更新和改进，用户可以获取丰富的资源和支持。

具体参考文档进行学习

参考文档：(https://mermaid-js.github.io/mermaid/#/flowchart?id=graph)

示例：

链接
长方形
圆
圆角长方形
菱形

2.4 插入Flowchart流程图

简介：流程图是一种通过图形化方式展示算法、工作流程或业务流程的工具。它使用一系列标准化的图形和符号来表示不同的操作、决策点、数据流等，并通过箭头连接这些图形来表示流程的顺序和逻辑关系。

常用图形及意义
椭圆形：表示流程的开始或结束，通常用于流程的起点和终点。 矩形：表示具体的处理步骤或操作，是流程图中最常用的图形。
菱形：表示决策点，用于需要根据条件进行判断的地方，通常会有多个分支。 平行四边形：表示输入或输出操作，如数据的读取或结果的输出。
箭头：表示流程的走向和顺序，连接各个图形元素。

应用场景
软件开发：在编写代码之前，使用流程图可以清晰地规划算法的逻辑结构，帮助开发者理清思路，减少编程错误。
业务流程梳理：企业可以使用流程图来描述和优化业务流程，使员工更好地理解各自的工作职责和流程中的协作关系。
教育领域：教师可以用流程图来讲解复杂的知识点，如数学题的解题步骤、化学反应的过程等，帮助学生更直观地理解。

具体参考文档进行学习

参考文档：(http://flowchart.js.org/)

示例：

Created with Raphaël 2.3.0 开始 我的操作 确认？ 结束 yes no

2.5 插入classDiagram类图

简介：ClassDiagram（类图）是 UML（Unified Modeling Language，统一建模语言）中的一种静态结构图，用于描述系统的类、接口、协作（在 UML 2.0 中称为模块）、枚举、约束等元素及其相互关系。类图是面向对象系统建模的核心工具之一，它能够清晰地展示系统的静态结构，包括类与类之间的关联、继承、实现等关系，为系统的分析、设计和实现提供了重要的参考。

具体参考文档进行学习

参考文档：(https://mermaid-js.github.io/mermaid/#/classDiagram)

示例：

Cool
Where am i?
«interface»
Class01
int chimp
int gorilla
size()
AveryLongClass
Class09
C2
C3
Class07
Object[] elementData
equals()
Class10
>>service>>
int id
size()

3. CSDN快捷键

在这里插入图片描述

4. 字体相关设置

4.1 字体样式改变

不同字体设置：

1. 默认字体
2. <font face="宋体">宋体</font>
3. <font face="黑体">黑体</font>
4. <font face="雅黑">雅黑</font>
5. <font face="楷体">楷体</font>
6. <font face="STCAIYUN">华文彩云</font>
7. <font face="Arial">Arial</font><font face="fantasy">fantasy</font>

最终效果：

在这里插入图片描述

4.2 字体大小改变

<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>
<font size=8 > 8号 </font>
<font size=9 > 9号 </font>
<font size=10 > 10号 </font>
<font size=11 > 11号 </font>
<font size=12 > 12号 </font>

最终效果：
在这里插入图片描述

4.3 字体颜色改变

<font color=green > green </font>
<font color=gold  > gold</font>
<font color=yellow  > yellow</font>
<font color=lawngreen  > lawngreen</font>
<font color=chartreuse  > chartreuse</font>
<font color=orange  > orange</font>
<font color=pink  > pink</font>
<font color=purple  > purple</font>
<font color=mediumblue  > mediumblue</font>
<font color=darkorange  > darkorange</font>
<font color=brown  > brown</font>
<font color=bright brown  > bright brown</font>
<font color=bright magenta  > bright magenta</font>
<font color=teal  > teal</font>
<font color=darkgreen  > darkgreen</font>

最终效果：
在这里插入图片描述

4.4 字体背景色实现


> <table><tr><td bgcolor=颜色替换位置> 想要什么颜色就换什么颜色 </td></tr></table>

颜色常用单词： red green blue gold yellow lawngreen chartreuse orange pink
purple mediumblue darkorange brown bright brown bright magenta teal
darkgreen

在这里插入图片描述

感谢您的阅读支持！！！

后续会持续更新的！！！

文末投票支持一下！！！

结束

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Python】06、流程控制语句

【Python】06、流程控制语句

文章目录 1.条件判断语句1.1 if 语句2. input 函数3.if-else 语句4.if-elif-else 语句 2.循环语句2.1 while语句2.2 while语句练习&#xff1a;2.3 循环嵌套2.4 break和continue 通过流程控制语句&#xff0c;可以改变程序的执行顺序&#xff0c;也可以让指定程序反复执行多次。…
阅读更多...
《python》—— threading库（线程和多线程）

《python》—— threading库（线程和多线程）

文章目录 threading简介threading基本概念常用类和方法线程同步线程池实例 threading简介 threading 是 Python 标准库中用于实现多线程编程的模块。多线程编程允许程序同时执行多个任务&#xff0c;提高程序的并发性能&#xff0c;尤其适用于 I/O 密集型任务&#xff0c;例如…
阅读更多...
【数据分享】2000-2024年全国逐年归一化植被指数（NDVI）栅格数据（年最大值）

【数据分享】2000-2024年全国逐年归一化植被指数（NDVI）栅格数据（年最大值）

NDVI&#xff0c;全名为Normalized Difference Vegetation Index&#xff0c;中文名称为归一化植被指数。这个指数可以用来定性和定量评价植被覆盖及其生长活力&#xff0c;我们也可以简单地将它理解为体现植被密度和健康状况的一个指标。 之前我们给大家分享了来源于MOD13A3数…
阅读更多...
混沌理论与混沌映射——算法改进初始化创新点之一

混沌理论与混沌映射——算法改进初始化创新点之一

混沌理论与混沌映射 混沌理论研究混沌系统的动力学&#xff0c;其特征是非线性和对初始条件的极端敏感性。即使在这些条件下的微小变化也可能导致系统结果的显著变化。尽管看起来是随机的&#xff0c;混沌系统可以在不依赖随机性的情况下表现出不规则的行为&#xff0c;因为确…
阅读更多...
19874并查集

19874并查集

19874并查集 ⭐️难度&#xff1a;中等 &#x1f31f;考点&#xff1a;并查集、数据结构 &#x1f4d6; &#x1f4da; import java.util.*;public class Main {static int N 100010;static int[] a new int[N];static int[] p new int[N];static int n;static int m;st…
阅读更多...
Jmeter下载安装配置及使用

Jmeter下载安装配置及使用

1、下载 官网地址&#xff1a;Apache JMeter - Download Apache JMeter 2、配置环境变量 ①找到环境变量&#xff0c;两种方法 法一&#xff1a;我的电脑→右键菜单→属性→高级系统设置→环境变量 法二&#xff1a;直接搜索环境变量 ②新建两个系统变量 1.变量名&#x…
阅读更多...
【从零开始学习计算机科学】编译原理（一）编译过程概述

【从零开始学习计算机科学】编译原理（一）编译过程概述

【从零开始学习计算机科学】编译原理（一）编译过程概述 绪论编译过程概述词法分析语法分析代码优化代码生成其他功能编译器的前端和后端绪论 什么叫编译程序？为什么我们需要编译程序？编译程序就是一个程序，将便于人编写、阅读、维护的高级计算机语言所写作的源代码程序，翻…
阅读更多...
【算法day8】 Z 字形变换 -O(n）算法思路整理

【算法day8】 Z 字形变换 -O(n）算法思路整理

Z 字形变换&#xff0c;算法思路整理 https://leetcode.cn/problems/zigzag-conversion/description/ 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下…
阅读更多...
L3-1 夺宝大赛

L3-1 夺宝大赛

输入样例 1&#xff1a; 5 7 1 1 1 1 1 0 1 1 1 1 1 1 0 0 1 1 0 2 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1 7 1 5 7 1 1 1 5 5 3 1 3 5 1 4输出样例 1&#xff1a; 7 6样例 1 说明&#xff1a; 七支队伍到达大本营的时间顺次为&#xff1a;7、不可能、5、3、3、5、6&#xff0c…
阅读更多...
Matlab:矩阵运算篇——矩阵

Matlab:矩阵运算篇——矩阵

目录 1.定义 实例——创建矩阵 实例——创建复数矩阵 2.矩阵的生成 实例——M文件矩阵 2.利用文本创建 实例——创建生活用品矩阵 3.创建特殊矩阵 实例——生成特殊矩阵 4.矩阵元素的运算 1.矩阵元素的修改 实例——新矩阵的生成 2.矩阵的变维 实例——矩阵维度修…
阅读更多...
泛微ecode的页面开发发送请求参数携带集合

泛微ecode的页面开发发送请求参数携带集合

1.在开发过程中我们难免遇见会存在需要将集合传递到后端的情况&#xff0c;那么这里就有一些如下的注意事项&#xff0c;如以下代码&#xff1a; // 新增action.boundasync addQuestion(formData) {var theList this.questionAnswerList;var questionAnswerListArray new Ar…
阅读更多...
Javaweb后端全局异常处理器

Javaweb后端全局异常处理器

类名随便定义 这是异常处理的方法exceptionhandler responsebody作用&#xff0c;方法的响应值返回给前端&#xff0c;如果返回的是集合对象&#xff0c;会把集合对象转为json&#xff0c;再给前端响应返回
阅读更多...
SpringBoot缓存抽象：@Cacheable与缓存管理器配置

SpringBoot缓存抽象：@Cacheable与缓存管理器配置

文章目录 引言一、SpringBoot缓存抽象概述二、Cacheable注解详解2.1 Cacheable的关键属性 三、缓存管理器配置四、自定义键生成策略五、缓存同步与失效策略六、SpringBoot缓存最佳实践总结 引言 缓存是提升应用性能的关键技术&#xff0c;SpringBoot提供了强大的缓存抽象层&am…
阅读更多...
江科大51单片机笔记【11】AT24C02（I2C总线）

江科大51单片机笔记【11】AT24C02（I2C总线）

一、存储器 1.介绍 RAM的特点是存储速度特别快&#xff0c;但是掉电会丢失&#xff1b;ROM的特点是存储速度特别慢&#xff0c;但是掉电不会丢失 SRAM是所有存储器最快的&#xff0c;一般用于电脑的CPU高速缓存&#xff0c;容量相对较少&#xff0c;成本较高&#xff1b;DRAM…
阅读更多...
外层元素旋转，其包括在内的子元素一并旋转（不改变旋转中心），单元测试

外层元素旋转，其包括在内的子元素一并旋转（不改变旋转中心），单元测试

思路&#xff1a;外层旋转后坐标&#xff0c;元素旋转后坐标&#xff0c;计算偏移坐标 <template><div class"outbox"><label>角度: <input v-model.number"rotate" type"number" /></label><br><div c…
阅读更多...
Docker容器安装软件（完整版）

Docker容器安装软件（完整版）

文章目录 一、安装Docker1.1 docker 相关的命令1.2 配置镜像加速 二. 安装es2.1 创建网络2.2 拉取镜像2.3 创建挂载点目录2.4 部署单点es&#xff0c;创建es容器2.5 编写elasticsearch.yml2.6 重启es容器2.7 测试Elasticsearch是否安装成功 三. 基于Docker安装Kibana3.1 拉取镜…
阅读更多...
「 机器人 」扑翼飞行器通过总气动力控制四自由度运动方法

「 机器人 」扑翼飞行器通过总气动力控制四自由度运动方法

一、前言 在扑翼飞行中，总气动力（Total Aerodynamic Force）是指扑翼在运动过程中受到的所有空气动力作用的合力。它是由以下两种主要力的合成结果： 1. 升力（Lift, ）：垂直于空气流方向的力，用于支持飞行器（或生物）的重量。 2. 阻力（Drag, ）：平行于空气流方向的力，…
阅读更多...
Axios简单说明，快速上手

Axios简单说明，快速上手

Ajax&#xff1a;异步的JavaScript和XML 作用&#xff1a; 数据交换异步交互 Axios&#xff1a;就是对原生Ajax进行封装&#xff0c;简化书写&#xff0c;快速开发 使用逻辑&#xff1a; 首先要安装Axios&#xff0c;可以通过npm在项目中安装&#xff1a; 打开命令行工具…
阅读更多...
云服务器安装宝塔面板部署

云服务器安装宝塔面板部署

单机部署(前端vue项目) 服务器安装宝塔面板 连接到服务器 使用 SSH 连接到你的服务器&#xff1a; ssh rootip安装宝塔面板 运行以下命令来安装宝塔面板&#xff1a; yum install -y wget wget -O install.sh http://download.bt.cn/install/install_6.0.sh sh install.sh安…
阅读更多...
通义万相 2.1：AIGC 领域的 “王炸” 组合如何颠覆创作生态？

通义万相 2.1：AIGC 领域的 “王炸” 组合如何颠覆创作生态？

引言 在数字化和人工智能的飞速发展中&#xff0c;AIGC&#xff08;AI生成内容&#xff09;技术已经成为推动创作、设计和内容生成领域创新的核心力量。而当通义万相2.1与蓝耘智算平台强强联手&#xff0c;这一“王炸”组合不仅提升了AIGC的效率&#xff0c;还为创作生态带来了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023