自定义简单模板

<font color=#00aedb>高亮颜色说明</font>：突出重点
<font color=#c3cb71>个人觉得，</font>：待核准个人观点是否有误
[<font color=#FF0033>高亮颜色超链接</font>]()


@[toc]
> 本篇博文内容概要for查找：
> 

# 一级标题
## 二级标题
&emsp;&emsp;
## 待补充
&emsp;&emsp;

<br/>

> []()
[]()

<img src="" width="80%"/>
<img src="#pic_right" width="80%"/>
<img src="#pic_center" width="80%"/>
<center>文字居中</center>

数学公式粗体$\textbf{}$或者${\bf memory}$
数学公式粗斜体$\bm{}$

> [摘录自“bookname_author”](链接)
此文系转载，原文链接：[名称 20200505]()
本篇博客涵盖以下内容：
- xxx
本篇博客涵盖以下内容：
1. xxx

<font color=#00aedb>高亮颜色说明</font>：突出重点
<font color=#c3cb71>个人觉得，</font>：待核准个人观点是否有误

分割线
---
分割线

<br/>
<font color=#f37735>我是颜色为00ffff的字体</font>
<br/>
<font size=2>我是字号为2的字体</font>
<br/>
<font color=#f37735 size=2>我是颜色为00ffff, 字号为2的字体</font>
<br/>
<font face="微软雅黑" color=#f37735 size=2>我是字体类型为微软雅黑, 颜色为00ffff, 字号为2的字体</font>
<br/>

分割线
---
分割线
##问题记录
**问题描述**：
&emsp;&emsp;开始
**原因分析：**
&emsp;&emsp;开始
**解决方案：**
&emsp;&emsp;开始

Markdown表格
| 方法 | 命令 | 备注 | 
| :--- | :---: | ---: |  
| 内容| 内容 | 内容 |
内容|内容|内容

为长文本指定列宽实现换行
<div style="width: 150pt">xxx</div> | xxx | xxx
xxx | <div style="width: 100pt">very very very long long long text</div>| xxx

• Cmd Markdown 编辑阅读器 - 作业部落出品
• [Markdown] 使用vscode开始Markdown写作之旅 - 知乎
• 教程-MarkDown

段落设置

Markdown首行缩进

  由于Markdown语法主要考虑的是英文，所以对于中文的首行缩进并不太友好，两种方法都可以完美解决这个问题。

• 把输入法由半角改为全角。两次空格之后就能够有两个汉字的缩进。“Shift+空格”键可以将输入法从半角切换至全角，此时可以在Markdown编辑器中输入空格，每个空格正好是一个汉字宽度，首行缩进只需键入2下空格即可。
• 在开头的时候，先输入下面的代码，然后紧跟着输入文本即可。分号也不要掉。直接写：
  • 一个汉字的缩进/全方大的空白： 或 (实现首行缩进需要2个)
  • 半个汉字的缩进/半方大的空白： 或 (实现首行缩进需要4个)
  • 一个英文字符的缩进/不断行的空白格： 或 (推荐采用上面两种)

  或者  
    或者    
        或者        

Markdown强制换行

CSDN-Markdown页内跳转、页间跳转

通过heading实现页内跳转

// 创建一个id名称为heading_001的heading，作为位置标记
<h1 id="heading_001">“标题001”</h1>

// 创建一个href名称也为heading_001的链接，并且使用target="_self"参数来避免新开窗口
<a href="#heading_001" target="_self">点击本行即会跳转到“标题001”处</a>

通过锚点实现页内跳转、页间跳转：定义位置标记，创建锚点

  “anchor”一词即为锚点，其在W3C标准中的解释为：资源中的某个区域可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源，或者资源的特定部分，或者资源的特定表现形式。
  锚点是网页制作中超级链接的一种，又叫命名锚记。锚点像一个迅速定位器一样，是一种页面内的超级链接。
  使用锚点可以在文档中设置位置标记，这些位置标记通常放在文档的特定主题处或顶部。然后可以创建链接到这些位置标记的锚点，这些锚点链接可快速将访问者带到指定位置。
  创建到位置标记的锚点链接的过程通常分为两步：首先，创建位置标记；然后，创建链接到该位置标记的锚点。

// 定义锚点的格式如下：
[锚点链接名称](#锚点链接地址，必须是英文半角字符 "锚点链接的说明提示，即鼠标移动到锚点链接上所显示的内容")
// 例如，
[锚点链接名称(带提示)](#anchor_000 "锚点链接到的目标位置")
[锚点链接名称(不带提示)](#anchor_000)

锚点链接名称(带提示)
锚点链接名称(不带提示)
点击该锚点即会跳转到“位置001”处
点击该锚点即会跳转到“位置002”处

// 通过锚点实现页内跳转、页间跳转的方式一

// 创建一个id名称为anchor_001的位置标记
<a id="anchor_001">“位置001”</a>

// 创建一个锚点链接地址为anchor_001的锚点
[点击该锚点即会跳转到“位置001”处](#anchor_001 "链接到目标位置001")

// 通过锚点实现页内跳转、页间跳转的方式二

// 创建一个id名称为anchor_002的位置标记
<div id="anchor_002"></div>“位置002” 或者 <div id="anchor_002">“位置002”</div>

// 创建一个锚点链接地址为anchor_002的锚点
[点击该锚点即会跳转到“位置002”处](#anchor_002 "链接到目标位置002")

“位置001”

为Markdown生成目录

Markdown文档内导航目录

20210926记:
Generate TOC Table of Contents for Markdown Online

• Q:如何使用？
  A:将 markdown文档内容 粘贴到左侧的"paste markdown here"中, 然后复制右侧的"TOC generated here"中生成的 markdown文档内容; 在本地新建一个.md文件, 粘贴即可;

• 比对转换前后的两个markdown文档内容, 可以发现主要是在每个heading的前面加了句<!-- TOC --><a name="xxx"></a>, 然后在整个文档的顶部加了<!-- TOC start -->xxx<!-- TOC end -->;

• 转换前

  # heading 1_1
  ## heading 2_11
  ### heading 3_111
  contents in this section;
  
  ### heading 3_112
  contents in this section;
  
  ## heading 2_12
  ### heading 3_121
  contents in this section;
  
  ### heading 3_122
  contents in this section;
  
  

• 转换后

  <!-- TOC start -->
  - [heading 1_1](#heading-1_1)
    * [heading 2_11](#heading-2_11)
      + [heading 3_111](#heading-3_111)
      + [heading 3_112](#heading-3_112)
    * [heading 2_12](#heading-2_12)
      + [heading 3_121](#heading-3_121)
      + [heading 3_122](#heading-3_122)
  <!-- TOC end -->
  <!-- TOC --><a name="heading-1_1"></a>
  # heading 1_1
  <!-- TOC --><a name="heading-2_11"></a>
  ## heading 2_11
  <!-- TOC --><a name="heading-3_111"></a>
  ### heading 3_111
  contents in this section;
  
  <!-- TOC --><a name="heading-3_112"></a>
  ### heading 3_112
  contents in this section;
  
  <!-- TOC --><a name="heading-2_12"></a>
  ## heading 2_12
  <!-- TOC --><a name="heading-3_121"></a>
  ### heading 3_121
  contents in this section;
  
  <!-- TOC --><a name="heading-3_122"></a>
  ### heading 3_122
  contents in this section;
  
  

Markdown侧边导航目录

20210926记:以下内容未尝试;
  keywords:toc-sidebar, table of contents,

• markdown转html生成侧边目录_佳朗的专栏-CSDN博客 20191108
• GitHub - cpadilla/markdown-it-table-of-contents: A table of contents plugin for Markdown-it
• Creating an index (right term?) /fixed table of contents on a page - Pages and Content - Squarespace Forum 20210203

RMarkdown侧边导航目录

20210926记:以下内容未尝试;

• r - rmarkdown with page navigation on the side - Stack Overflow
• Pandoc：一个超级强大的文档格式转换工具_Tony.Dong的专栏-CSDN博客 20200911

文本设置

CSDN-Markdown文字居中

<center>文字居中</center>

<center>*文字斜体居中*</center>  # 没效果
<center>**文字加粗居中**</center>  # 没效果

<div align='center'><font size='4'>文字居中，并设置字号为1~7</font></div>

加粗文本

• 加粗方法一：使用两侧加星号**加粗**
• 加粗方法二：使用strong标签<strong>加粗</strong>
• 加粗方法三：使用b标签<b>加粗</b>

**加粗**
<strong>加粗</strong>
<b>加粗</b>

<h1><font face="Arial black">“A heading”</font></h1>

其它：使用h加粗标签<h1><font face="Arial black">“A heading”</font></h1>的效果

“A heading”

调节字体、字号、颜色

csdn如何修改文字体及颜色_markdown_YZY_001的博客 20181226
  Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的！
  CSDN-Markdown编辑器是其衍生版本，扩展了Markdown的功能（如表格、脚注、内嵌HTML等等）！对，就是内嵌HTML，接下来要讲的功能就需要使用内嵌HTML的方法来实现。

我是默认设置的字体
<font face="黑体">我是字体类型为黑体的字体</font> 
<font face="微软雅黑">我是字体类型为微软雅黑的字体</font> 
<font face="STCAIYUN">我是字体类型为华文彩云的字体</font>
<br/>
<font color=#00ffff size=4>我是颜色为#00ffff, 字号为4的字体</font> 
<br/>
<font color=#0099ff size=7 face="黑体">我是颜色为#0099ff, 字号为4的字体</font>
<br/>
<font color=gray size=72>我是颜色为gray, 字号为72的字体，但字号超出1~7范围</font>
<br/>

• face设置调节字体类型；
• color设置字体颜色，
  • 跳转到颜色名索引
  • CSDN中字体颜色的十六进制表 20181101
• size设置字体大小，可能的取值：从 1 到 7 的数字，浏览器默认值是 3；
  上述设置的呈现效果如下：
  

不转义网址链接

20240905记：
  百度检索"Markdown 不转换链接"，

• 如何取消MarkDown文档中网址的超链接属性_markdown非链接文本出现超链接-CSDN博客 20200226
  不想要自动转换的解决方法就是，在网址的收尾两端使用反引号「`」括起来，当作 code 引用。该符号位于键盘的左上角第二排第一个键帽位置，这个键位上有2个字符，上面的 ~ 叫做tilde，下面的 ` 叫做backtick，在英文输入状态下用下面那个 ` 就可以了。
• Markdown(4):不转义链接和内容_md取消转义-CSDN博客 20220418

内容及代码块折叠展开功能

注：当前20120002在CSDN中通过Markdown写博客是无法实现该效果的;

• 普通代码折叠

<details>
  <summary>点击时的区域标题：点击查看详细内容</summary>
  <p> - 文本内容  <pre><code>
  &nbsp;
  展开的内容及代码块;
  title, value, callBack可以缺省;
  &nbsp;
  </code></pre>
</details>

# 注意:以上代码不要放在Markdown代码块中, 因为Markdown的基本语法是不支持折叠显示功能的, 故需要采用html语法进行扩展;
details：折叠语法标签
summary：折叠语法展示的摘要
pre：以原有格式显示元素内的文字是已经格式化的文本
code：指定代码范例
blockcode：表示程序的代码块

• html代码折叠

<details>
<summary>展开查看</summary>
<xmp>
<h1>hello</h1>
<h2>hello</h2>
</xmp>
</details>

Markdown代码折叠与收起 | 大专栏 20191213
markdown折叠展开代码_NetRookieX的博客 20200220

Markdown表格设置

20240912记：
  百度检索"Markdown 表格 宽度"，

• Markdown排版优化小技巧：表格列宽调整 20240415

Markdown表格
| 方法 | 命令 | 备注 | 
| :--- | :---: | ---: |  
| 内容| 内容 | 内容 |
内容|内容|内容

通过使用div标签包裹来设置行内样式，从而改变表格列宽；
| 方法 | <div style="width:96px;">命令</div> | <div style="width:256px;">备注</div> | 
| :--- | :---: | ---: |  
| 内容| 内容 | 内容 |
内容|内容|内容

Markdown表格

通过使用div标签包裹来设置行内样式，从而改变表格列宽；20240912记：CSDN-Markdown环境未能解析出表格列宽设置；

Markdown数学公式

• Markdown 数学公式以及符号整理_SunshineSki的博客 20181118
  本地文档：\他人博客摘录\Markdown 数学公式以及符号整理_SunshineSki的博客 20181118.html
• Cmd Markdown 公式指导手册 - 作业部落 Cmd Markdown 编辑阅读器
• CSDN Markdown 公式指导手册_Wang-Junchao的博客-CSDN博客 20160610
• Markdown 数学公式指导手册_万俟淋曦的博客-CSDN博客 20200309
• (网页404了)CSDN数学公式指导手册_一条肥鱼的博客 20180705
• LaTeX 公式编辑记录
• Latex公式大合集来啦！-CSDN博客 20231223

Markdown图表 by Mermaid

• (官网)About Mermaid | Mermaid
• GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

【拓展】图的渲染工具-Mermaid - GisliW - 博客园 20231123
Mermaid能绘制哪些图表：

• 流程图 (Flowchart)：用于展示流程、步骤和决策流程。
• 时序图 (Sequence Diagram)：展示事件发生的顺序和时间轴上的活动。
• 类图 (Class Diagram)：用于展示对象之间的关系和结构。
• 状态图 (State Diagram)：展示对象在不同状态下的行为转换。
• 实体关系图 (Entity Relationship Diagram)：用于展示实体之间的关系模型。
• 用户旅程 (User Journey)：描述用户与产品或服务互动的整个过程。
• 甘特图 (Gantt)：用于展示项目进度、时间安排和任务分配。
• 饼图 (Pie Chart)：展示数据的相对比例，常用于比较类别间的数量关系。
• 四象限图 (Quadrant Chart)：用于将数据或概念按照两个维度进行分类和比较。
• 需求图 (Requirement Diagram)：用于展示需求之间的关系和依赖。
• Git 图表 (Gitgraph Diagram)：用于展示 Git 代码仓库中的提交历史和分支结构。
• C4 图表 (C4 Diagram)：一种软件架构图表，用于描述软件系统的结构。
• 思维导图 (Mindmaps)：帮助组织和展示思维导向的图表。
• 时间线 (Timeline)：以时间为轴展示事件或数据的顺序和时序。
• Zenuml：用于创建 UML 序列图和状态图的在线工具。
• Sankey 图表：用于展示复杂系统中能量、物质或者信息的流动关系。
• XY 图表 (XYChart)：以笛卡尔坐标系方式展示数据的散点分布和关联关系。

20240930记：
Q: mermaid工具
(百度文库 AI 智能助手)A: Mermaid是一个开源的、基于JavaScript的绘图库，它以其简洁易用的特点，在软件开发、项目管理、系统架构、数据可视化等领域得到了广泛应用。以下是对Mermaid工具的详细介绍：

一、主要功能

Mermaid支持绘制多种类型的图表，包括但不限于：

• 流程图：用于展示业务流程、算法流程等，可以清晰地表示各个步骤之间的顺序和逻辑关系。
• 时序图：展示对象之间随着时间的交互关系，对于描述系统中不同组件之间的通信非常有用。
• 甘特图：用于项目管理，展示任务的进度和时间安排，有助于规划和跟踪项目进度。
• 类图：绘制类和对象之间的继承、实现、属性、方法和注释等关系，用于表达软件系统的结构和继承体系。
• 状态图：绘制状态和条件之间的转换的图表，适用于描述状态机。
• 部署图：绘制组件和节点之间的关系和通信的图表，适用于描述系统的分布式和物理结构。

二、特点与优势

1. 简单易学：Mermaid的语法结构简单易懂，每种图表均有对应的语法，并且支持样式设置，即使没有专业的绘图经验，也能快速上手。
2. 支持多种图表类型：满足不同用户的需求，支持绘制流程图、时序图、甘特图等多种类型的图表。
3. 轻便灵活：Mermaid是一个基于JavaScript的绘图库，可以通过HTML文本直接生成图表，易于嵌入各种场景，如网页、Markdown文档等。
4. 可定制性高：支持各种样式的配置，可以调整节点、链接、标签、颜色等属性，使图表更具可视化效果。
5. 与多种平台集成：支持与多种文档平台和代码托管平台集成，如GitHub、GitLab等，方便用户在项目中使用Mermaid绘图。

三、使用方法

Mermaid的使用方式多种多样，主要包括以下几种：

• 在文本编辑器中使用：需要在编辑器中安装Mermaid插件，然后在支持的文件类型（如Markdown）中使用Mermaid语法编写图形描述，最后通过插件渲染为可视化的图形。
• 使用在线工具：可以利用Mermaid的在线编译器，直接在网页中编写Mermaid语法并查看渲染结果。
• 通过命令行工具：对于需要批量处理图表或集成到自动化流程中的场景，可以使用Mermaid的命令行工具生成图像文件。

四、优缺点

优点：

• 功能强大，支持多种图表类型。
• 简单易学，易于上手。
• 轻便灵活，易于嵌入各种场景。
• 可定制性高，满足不同用户的需求。

缺点：

• 功能相对于一些商业绘图软件而言可能较为简单。
• 在使用Mermaid绘制图表时，需要先引入其对应的库，有时可能需要一定量的工作。

五、总结

Mermaid是一款功能强大、简洁易用的绘图工具，它以其简单易学的语法和多种图表类型的支持，在软件开发、项目管理等领域得到了广泛应用。通过Mermaid，用户可以快速绘制出高质量的图表，提高工作效率和沟通效果。

流程图 flowchart

时序图 sequence diagram

思维导图 mind map

20241001记：
摘录自"E:\我的坚果云\WebDAV_UserName\Doc_WorkSpace\Doc_Markdown\A_Learning\20230415 AI智能对话问答 ChatGPT.md"；

(复制粘贴时，删除该反斜杠)\```mermaid
graph TD
A[文章总览] --> B[研究背景]
A --> C[研究方法]
A --> D[研究结果]
A --> E[讨论与结论]

B --> B1[幽默在人类沟通中的重要性]
B --> B2[大型语言模型的发展]

C --> C1[实验设计]
C --> C2[数据收集]
C1 --> C1a[笑话生成]
C1 --> C1b[笑话解释]
C1 --> C1c[笑话检测]
C2 --> C2a[使用ChatGPT API]

D --> D1[笑话生成结果]
D --> D2[笑话解释结果]
D --> D3[笑话检测结果]
D1 --> D1a[重复性高]
D2 --> D2a[解释有效性]
D3 --> D3a[对结构和主题的依赖]

E --> E1[局限性]
E --> E2[未来工作的方向]
E1 --> E1a[数据访问限制]
E2 --> E2a[增加训练数据多样性]
E2 --> E2b[算法改进]
(复制粘贴时，删除该反斜杠)\```

上述Markdown文本生成的 chart 如下：

甘特图 gantt chart

类图 class diagram

状态图 state diagram

饼图 pie chart

柱状图 bar chart

软件架构图 C4 diagram

中英文混排,排版

• 写给大家看的中文排版指南 - 知乎
• 中英文混排时中文与英文之间是否要有空格？ - 知乎
• xxx
• 数学建模清风——论文排版教程_哔哩哔哩_bilibili
• xxx
• Markdown编辑器花体字母问题_Annie_0321的博客-CSDN博客 20210416

排版注意事项节选

待补充

配色方案

Most Popular Color Palettes

List of most favorited colors by users of www.color-hex.com

Metro UI Colors Color Palette

Pastel Colors Color Palette

Echarts中的一组颜色

r_hex = '#dc2624'     # red,       RGB = 220,38,36
dt_hex = '#2b4750'    # dark teal, RGB = 43,71,80
tl_hex = '#45a0a2'    # teal,      RGB = 69,160,162
r1_hex = '#e87a59'    # red,       RGB = 232,122,89
tl1_hex = '#7dcaa9'   # teal,      RGB = 125,202,169
g_hex = '#649E7D'     # green,     RGB = 100,158,125
o_hex = '#dc8018'     # orange,    RGB = 220,128,24
tn_hex = '#C89F91'    # tan,       RGB = 200,159,145
g50_hex = '#6c6d6c'   # grey-50,   RGB = 108,109,108
bg_hex = '#4f6268'    # blue grey, RGB = 79,98,104
g25_hex = '#c7cccf'   # grey-25,   RGB = 199,204,207

“复古”系列色

推荐多款好看的报表图表配色方案（适用于PPT，大屏可视化分析） 20190713

其它配色

Standard colours for TradingView scripts · Kodify

• 配色_蓝色Hex1799E3
  RGB:23,153,227; Dec:1546723; Hex:1799E3;
  

Markdown中插入图片

插入图片的基本格式

![Alt text](图片地址链接 "optional title")

• Alt text：是图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当因为某种原因不能显示图片时就出现该替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。
• 图片地址链接：可以是图片的本地地址或者网址。
• “optional title”：鼠标悬停于图片上方时会出现的标题文字，可以不写。

插入本地图片

  图片地址链接使用图片在本地电脑中的路径，支持绝对路径和相对路径。
  需要注意的是，通过使用 Markdown中的![]()插入图片时，路径中的图片名称、文件夹名称不能有空格，否则会无法显示。例如，

![Local Image_Fig 1.jpg](Local_Image_Fig_1.jpg "Local Image_Fig 1.jpg")
![Local Image_Fig 1.jpg](./figures_imgs/Local_Image_Fig_1.jpg)
![Local Image_Fig 1.jpg](E:\Downloads/Pictures/figures_imgs/Local_Image_Fig_1.jpg)

# 在以下命令中, 路径中的图片名称、文件夹名称有空格，故无法显示
![Local Image_Fig 1.jpg](Local Image_Fig 1.jpg)
![Local Image_Fig 1.jpg](./figures imgs/Local_Image_Fig_1.jpg)

  而在通过使用 HTML Markup 中的<img src="">插入图片时，路径中的图片名称、文件夹名称允许有空格。例如，

<div align=center><img src="./figures_imgs/Local Image_Fig 1.jpg" width="80%" title="Local Image_Fig 1.jpg"/></div>

  在通过使用 HTML Markup 中的<img src="">插入图片时，建议"引用相对路径下的图片源文件"，引用图片的几种不同方式的测试结果如下：

20240930记：

<div align=center><img src="./A_Life/imgs/Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg" width="50%" title="Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg"/></div>
(推荐)插入图片方式："引用相对路径下的图片源文件"，能否显示该图片：Preview in VS Code (√)、Open in Browser (√)；

<div align=center><img src="./A_Life/imgs/Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg - 快捷方式" width="50%" title="test能否显示.jpg"/></div>
插入图片方式："引用相对路径下的快捷方式(指向图片源文件)"，能否显示该图片：Preview in VS Code (X)、Open in Browser (X)；

<div align=center><img src="E:/我的坚果云/WebDAV_UserName/Doc_WorkSpace/Doc_Markdown/A_Life/imgs/Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg" width="50%" title="test能否显示.jpg"/></div>
(推荐)插入图片方式："引用绝对路径(斜杠/)下的图片源文件，与.md文件属于同一磁盘"，能否显示该图片：Preview in VS Code (√)、Open in Browser (√)；

<div align=center><img src="E:\我的坚果云\WebDAV_UserName\Doc_WorkSpace\Doc_Markdown\A_Life\imgs\Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg" width="50%" title="test能否显示.jpg"/></div>
(推荐)插入图片方式："引用绝对路径(反斜杠\)下的源文件，与.md文件属于同一磁盘"，能否显示该图片：Preview in VS Code (√)、Open in Browser (√)；

<div align=center><img src="C:/Users/UserName/Pictures/Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg" width="50%" title="test能否显示.jpg"/></div>
插入图片方式："引用绝对路径(斜杠/)下的图片源文件，但与.md文件不属于同一磁盘"，能否显示该图片：Preview in VS Code (X)、Open in Browser (√)；

<div align=center><img src="C:\Users\UserName\Pictures\Itaimbezinho峡谷，巴西_NidoHuebl,Getty Images.jpg" width="50%" title="test能否显示.jpg"/></div>
插入图片方式："引用绝对路径(反斜杠\)下的图片源文件，但与.md文件不属于同一磁盘"，能否显示该图片：Preview in VS Code (X)、Open in Browser (√)；

插入网络图片

  图片地址链接使用图片的网络地址链接，可以将图片上传到某些图床上生成图片外链。例如，

![Web Image_Fig 1.jpg](https://img-home.csdnimg.cn/images/20210120054229.jpg "background-image")

把图片存入Markdown文件

MarkDown添加图片的三种方式 - 简书 20180208
  可以用base64转码工具把图片转成一段字符串，然后把字符串作为 插入图片的基本格式 中的图片地址链接。

• 基础用法：

  ![Image_Fig 1.jpg](data:image/png;base64,iVBORw0......)
  

  这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。
• 高级用法
  比如：

  ![Image_Fig 1.jpg][base64str_Image_Fig_1]
  [base64str_Image_Fig_1]:data:image/png;base64,iVBORw0......
  

生成base64图片编码 by Python

• 将图片转换为base64字符串

  import base64
  f=open('Local_Image_Fig_1.jpg','rb') # 二进制方式打开图文件
  lstr_f=base64.b64encode(f.read()) # 读取文件内容, 转换为base64编码
  f.close()
  print(lstr_f)
  

• 将base64字符串转换为图片

  import base64
  base64str_img='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略
  imgdata=base64.b64decode(base64str_img)
  f=open('Local_Image_Fig_1_.jpg','wb')
  f.write(imgdata)
  f.close()
  

CSDN-Markdown图片设置

  Mardkdown语言本身不直接支持调整图片位置/大小，但是Mardkdown语言支持HTML语言，因此可以通过HTML语言修改图片位置/大小。

图片大小设置

  通过使用 HTML Markup 中的<img src="">插入图片，而不是 Markdown中的![]()插入图片 来实现。步骤如下：

1. 在CSDN编辑器中点击上传图片按钮(Ctrl+Shift+G)上传图片到CSDN图片服务器，得到“CSDN图片服务器自动生成的图片地址链接”；

 ![这里写图片描述](图片地址链接)

2. 使用以下代码替换上述代码即可；

# 锁定纵横比，按比例缩放
<img src="图片地址链接" width="80%"/>

# 仅指定绝对宽度(高度会按比例缩放)
<img src="图片地址链接" width="300"/>
<img src="图片地址链接" width="300" height=""/>

# 自定义图片的宽和高
<img src="图片地址链接" width="300" height="200"/>

CSDN的MarkDown图片大小的调整_网络_Be yourself. 20170120

鼠标悬停于图片上方显示文字

# 可以显示"optional title"
<img src="https://img-blog.csdnimg.cn/20200506194050212.jpg" tile="optional title" />

# 貌似没法显示"optional title"
<img src="https://img-blog.csdnimg.cn/20200506194050212.jpg" alt="optional title" />

# 可以显示"optional title"
![](https://img-blog.csdnimg.cn/20200506194050212.jpg  "optional title")

图片对齐方式设置

• 图片默认居左
• 通过修改img src键值来使图片对齐
  • 在img src键值“图片地址链接”的末尾加上#pic_center即可使图片居中
  • 在img src键值“图片地址链接”的末尾加上#pic_right即可使图片居右

  <img src="" width="80%"/>
  <img src="#pic_center" width="80%"/>
  <img src="#pic_right" width="80%"/>
  
  <img src="?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05lWFRfVm95YWdlcg==,size_16,color_FFFFFF,t_70" width="80%"/>
  在src键值的?前面插入“图片地址链接”即可使图片居左（默认）
  
  <img src="?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05lWFRfVm95YWdlcg==,size_16,color_FFFFFF,t_70#pic_center" width="80%"/>
  在src键值的?前面插入“图片地址链接”即可使图片居中
  
  <img src="?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05lWFRfVm95YWdlcg==,size_16,color_FFFFFF,t_70#pic_right" width="80%"/>
  在src键值的?前面插入“图片地址链接”即可使图片居右
  

• 通过<div align="center"> </div>装饰来使图片对齐

  <div align="center">    
  <img src="" width="80%"/>
  </div>
  
  <div align="right">    
  <img src="" width="80%"/>
  </div>
  

待补充

待补充

颜色名索引

颜色名索引

待补充

待补充