自定义简单模板
<font color=#00aedb>高亮颜色说明</font>:突出重点
<font color=#c3cb71>个人觉得,</font>:待核准个人观点是否有误
[<font color=#FF0033>高亮颜色超链接</font>]()
@[toc]
## 二级标题
  
## 待补充
  
### 待补充
  
<br/>
> []()
[]()
<img src="" width="80%"/>
<img src="#pic_center" width="80%"/>
<img src="#pic_right" 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/>
分割线
---
分割线
##问题记录
**问题描述**:
  开始
**原因分析:**
  开始
**解决方案:**
  开始
Markdown表格
| 方法 | 命令 | 备注 |
| :--- | :---: | ---: |
| 内容| 内容 | 内容 |
内容|内容|内容
为长文本指定列宽实现换行
<div style="width: 150pt">xxx</div> | xxx | xxx
xxx | <div style="width: 100pt">very very very long long long text</div>| xxx
段落设置
Markdown首行缩进
由于Markdown语法主要考虑的是英文,所以对于中文的首行缩进并不太友好,两种方法都可以完美解决这个问题。
- 把输入法由半角改为全角。两次空格之后就能够有两个汉字的缩进。“Shift+空格”键可以将输入法从半角切换至全角,此时可以在Markdown编辑器中输入空格,每个空格正好是一个汉字宽度,首行缩进只需键入2下空格即可。
- 在开头的时候,先输入下面的代码,然后紧跟着输入文本即可。分号也不要掉。直接写:
- 一个汉字的缩进/全方大的空白:
 
或 
(实现首行缩进需要2个) - 半个汉字的缩进/半方大的空白:
 
或 
(实现首行缩进需要4个) - 一个英文字符的缩进/不断行的空白格:
或 
(推荐采用上面两种)
- 一个汉字的缩进/全方大的空白:
  或者  
    或者    
或者        
Markdown强制换行
方法 | 命令 | 备注 |
---|---|---|
键盘 | 空格键+空格键+回车键 | 制表不可用 |
命令 | <br>或</br> 或<br /> | <br /> 中的br和/之间有1个空格 |
命令 | <br/> | <br/> 中的br和/之间没有空格 【2018.09.12更正】 |
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")
“位置002”
为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设置字体颜色,
- size设置字体大小,可能的取值:从 1 到 7 的数字,浏览器默认值是 3;
上述设置的呈现效果如下:
内容及代码块折叠展开功能
注:当前20120002在CSDN中通过Markdown写博客是无法实现该效果的;
- 普通代码折叠
<details>
<summary>点击时的区域标题:点击查看详细内容</summary>
<p> - 文本内容 <pre><code>
展开的内容及代码块;
title, value, callBack可以缺省;
</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数学公式
- 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
中英文混排,排版
- 写给大家看的中文排版指南 - 知乎
- 中英文混排时中文与英文之间是否要有空格? - 知乎
- xxx
- 数学建模清风——论文排版教程_哔哩哔哩_bilibili
- xxx
- Markdown编辑器花体字母问题_Annie_0321的博客-CSDN博客 20210416
排版注意事项节选
待补充
配色方案
Metro UI Colors Color Palette
系列色——十六进制颜色码:#d11141 - #00b159 - #00aedb - #f37735 - #ffc425
系列色——RGB颜色值:
(209,17,65) - (0,177,89) - (0,174,219) - (243,119,53) - (255,196,37)
Pastel Colors Color Palette
系列色——十六进制颜色码:#1b85b8 - #5a5255 - #559e83 - #ae5a41 - #c3cb71
系列色——RGB颜色值:
(27,133,184) - (90,82,85) - (85,158,131) - (174,90,65) - (195,203,113)
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
“复古”系列色
系列色——十六进制颜色码:
0780cf - 765005 - fa6d1d - 0e2c82 - b6b51f - da1f18 - 701866 - f47a75 - 009db2 - 024b51 - 0780cf - 765005
系列色——RGB颜色值:
(7,128,207) - (118,80,5) - (250,109,29) - (14,44,130) - (182,181,31) - (218,31,24) - (112,24,102) - (244,122,117) - (0,157,178) - (2,75,81) - (7,128,207) - (118,80,5)
其它配色
- 配色_蓝色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>
插入网络图片
图片地址链接
使用图片的网络地址链接,可以将图片上传到某些图床上生成图片外链。例如,
![Web Image_Fig 1.jpg](https://img-home.csdnimg.cn/images/20210120054229.jpg "background-image")
把图片存入markdown文件
MarkDown添加图片的三种方式 - 简书 20180208
可以用base64转码工具把图片转成一段字符串,然后把字符串作为 插入图片的基本格式 中的图片地址链接
。
- 基础用法:
这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。![Image_Fig 1.jpg](data:image/png;base64,iVBORw0......)
- 高级用法
比如:![Image_Fig 1.jpg][base64str_Image_Fig_1] [base64str_Image_Fig_1]:data:image/png;base64,iVBORw0......
使用Python生base64图片编码
-
将图片转换为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中的![]()
插入图片 来实现。步骤如下:
- 在CSDN编辑器中点击上传图片按钮(Ctrl+Shift+G)上传图片到CSDN图片服务器,得到“CSDN图片服务器自动生成的图片地址链接”;
![这里写图片描述](图片地址链接)
- 使用以下代码替换上述代码即可;
# 锁定纵横比,按比例缩放
<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>
待补充
待补充
颜色名索引
颜色名索引
红色和粉红色,以及它们的16进制代码。 | |||||||||
#990033 | #CC6699 | #FF6699 | #FF3366 | #993366 | #CC0066 | #CC0033 | #FF0066 | #FF0033 | ..#CC3399.. |
#FF3399 | #FF9999 | #FF99CC | #FF0099 | #CC3366 | #FF66CC | #FF33CC | #FFCCFF | #FF99FF | #FF00CC |
紫红色,以及它们的16进制代码。 | |||||||||
#FF66FF | #CC33CC | #CC00FF | #FF33FF | #CC99FF | #9900CC | #FF00FF | #CC66FF | #990099 | #CC0099 |
#CC33FF | #CC99CC | #990066 | #993399 | #CC66CC | #CC00CC | #663366 | |||
蓝色,以及它们的16进制代码。 | |||||||||
#660099 | #666FF | #000CC | #9933CC | #666699 | #660066 | #333366 | #0066CC | #9900FF | #333399 |
#99CCFF | #9933FF | #330099 | #6699FF | #9966CC | #3300CC | #003366 | #330033 | #3300FF | #6699CC |
#663399 | #3333FF | #006699 | #6633CC | #3333CC | #3399CC | #6600CC | #0066FF | #0099CC | #9966FF |
#0033FF | #66CCFF | #330066 | #3366FF | #3399FF | #6600FF | #3366CC | #003399 | #6633FF | #000066 |
#0099FF | #CCCCFF | #000033 | #33CCFF | #9999FF | #0000FF | #00CCFF | #9999CC | #000099 | #6666CC |
#0033CC | |||||||||
黄色、褐色、玫瑰色和橙色,以及它们的16进制代码。 | |||||||||
#FFFFCC | #FFCC00 | #CC99090 | #663300 | #FF6600 | #663333 | #CC6666 | #FF6666 | #FF0000 | #FFFF99 |
#FFCC66 | #FF9900 | #FF9966 | #CC3300 | #996666 | #FFCCCC | #660000 | #FF3300 | #FF6666 | #FFCC33 |
#CC6600 | #FF6633 | #996633 | #CC9999 | #FF3333 | #990000 | #CC9966 | #FFFF33 | #CC9933 | #993300 |
#FF9933 | #330000 | #993333 | #CC3333 | #CC0000 | #FFCC99 | #FFFF00 | #996600 | #CC6633 | |
绿色,以及它们的16进制代码。 | |||||||||
#99FFFF | #33CCCC | #00CC99 | #99FF99 | #009966 | #33FF33 | #33FF00 | #99CC33 | #CCC33 | #66FFFF |
#66CCCC | #66FFCC | #66FF66 | #009933 | #00CC33 | #66FF00 | #336600 | #33300 | #33FFFF | #339999 |
#99FFCC | #339933 | #33FF66 | #33CC33 | #99FF00 | #669900 | #666600 | #00FFFF | #336666 | #00FF99 |
#99CC99 | #00FF66 | #66FF33 | #66CC00 | #99CC00 | #999933 | #00CCCC | #006666 | #339966 | #66FF99 |
#CCFFCC | #00FF00 | #00CC00 | #CCFF66 | #CCCC66 | #009999 | #003333 | #006633 | #33FF99 | #CCFF99 |
#66CC33 | #33CC00 | #CCFF33 | #666633 | #669999 | #00FFCC | #336633 | #33CC66 | #99FF66 | #006600 |
#339900 | #CCFF00 | #999966 | #99CCCC | #33FFCC | #669966 | #00CC66 | #99FF33 | #003300 | #99CC66 |
#999900 | #CCCC99 | #CCFFFF | #33CC99 | #66CC66 | #66CC99 | #00FF33 | #009900 | #669900 | #669933 |
#CCCC00 | |||||||||
白色、灰色和黑色,以及它们的16进制代码。 | |||||||||
#FFFFF | #CCCCCC | #999999 | #666666 | #333333 | #000000 | ||||
16色和它们的16进制代码。 | |||||||||
Aqua | Black | Fuchsia | Gray | Gree | Lime | Maroon | Navy | Olive | Purple |
Red | Silver | Teal | White | Yellow | Blue |
待补充
待补充