CSDN写作技巧记录

自定义简单模板

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


@[toc]
## 二级标题
&emsp;&emsp;
## 待补充
&emsp;&emsp;
### 待补充
&emsp;&emsp;

<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/>

分割线
---
分割线
##问题记录
**问题描述**&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

段落设置

Markdown首行缩进

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

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

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")

“位置001”

“位置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,

RMarkdown侧边导航目录

20210926记:以下内容未尝试;

文本设置

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/>

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

注:当前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数学公式

中英文混排,排版

排版注意事项节选

待补充

配色方案

Most Popular Color Palettes

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

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

“复古”系列色

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

系列色——十六进制颜色码:
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)

其它配色

Standard colours for TradingView scripts · Kodify

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

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转码工具把图片转成一段字符串,然后把字符串作为 插入图片的基本格式 中的图片地址链接

  • 基础用法:
    ![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......
    

使用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中的![]()插入图片 来实现。步骤如下:

  1. 在CSDN编辑器中点击上传图片按钮(Ctrl+Shift+G)上传图片到CSDN图片服务器,得到“CSDN图片服务器自动生成的图片地址链接”;
 ![这里写图片描述](图片地址链接)
  1. 使用以下代码替换上述代码即可;
# 锁定纵横比,按比例缩放
<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

待补充

待补充

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值