用CSDN Markdown写博客可能用到的语法点

前言

打算换个编辑器写博客了，虽然我依旧觉得用富文本编辑器排版比用Markdown排版更好看，可能好看的原因就是它没有那么多花里胡哨的东西。谁让我就是喜欢花里胡哨的东西呢，所以简单的东西被我放弃了，现在开始来学习如何使用Markdown来写博客。可能用到的语法点有点多，比如，汉字缩进，汉字字体、字号和颜色，图片居中，画分割线，插入公式（Latex用法），画流程图等。当然，有些有图形按钮的就不写了。

SmartyPants转化为“智能”印刷标点HTML实体

在把输入法调成英文的条件下，点击如图1所示字符两下，然后两个字符的中间填写要转换的内容，就可以用SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。like this code below。

`like this code below`

图1.'`'在键盘上的位置

文字居中

上图的文字描述部分就采用的文字居中格式，普通居中：<center>图1.在键盘上的位置</center>，加粗居中：<center>**图1.在键盘上的位置**</center>，不知道为啥，我用加粗居中，完全没有加粗迹象，反而留下了四个星号。

画分割横线

沿袭了以前在富文本编辑器上的习惯，在标题与标题之间我喜欢加入长横线，以示分割。有三种方式可以画横分割线，分别是：英文状态下的三个短横线---，英文状态下的三个下划线：___，和三个星号：***。另外，笔者发现在两个分割线中间直接写一行文字，会默认加粗，解决方法是在文字下面留一个空行。其他情况下，也可以通过一个空行解决。

缩进两个汉字

在需要缩进的行添加代码 &emsp;&emsp; 或者添加 &emsp;后再敲一个空格，也可以实现两个汉字缩进（其实只有1.5个汉字的缩进）。另外，N个 &emsp;连用可以实现N个汉字的缩进。注意字符不要敲错，英文状态下的分号不要敲漏，如果准确的敲出，编辑框内&emsp;会变形，预览框里&emsp;会消失。

图片居中与尺寸调整

插入
直接CTRL+C，CTRL+V复制粘贴到对应位置即可。
居中
在图片的链接结尾的?后添加#pic_center，注意前后都不要有空格，且#后也没有空格。
尺寸
在括号内，最后的字符后，先打一个空格，然后再输入你想把图片调到的大小，如=600x400，但是这样可能会使图片变形，所以只用调整宽就可以了，即如=600x，末尾的字母x不可省略。

在这里插入图片描述
注：定义键盘文本标签<kbd>keyboard</kbd>，keyboard

颜色、字号、字体

颜色
图2所示的RGB颜色对照图来自于该网站的颜色对照表，此处截取了几张可能用到颜色的对照表，便于以后查阅，若有侵权，通知立删。修改文字颜色的标签语言代码：纯红色，表示给font的color属性赋值为#FF0000，即对应的颜色为纯红色。

在这里插入图片描述

图2.RGB十六进制与颜色对照表

字号
按照这篇博文的介绍，文本的尺寸大小，可以从数字 1 到 7 ，浏览器默认值是 3。与设置颜色类似，只需给font的size属性赋值即可实现字号的修改，标签语言代码：size = 1，结果就是这样：size = 1，把size的值改成3之后与默认大小一致：size = 3
字体
感觉字体没有啥好改的，但是也放在这里。修改font里的face属性的值就可以修改字体样式，比如可以改成黑体，宋体和微软雅黑等。标签语言代码：华文行楷，结果是这样的：华文行楷，华文彩云：华文彩云，方正舒体：方正舒体，字体样式和名称可以在如图3所示的路径中找到。

在这里插入图片描述

图3.字体样式

插入公式

编辑器用的LaTeX来编辑公式，它的语法文档在这里，语法较复杂，此处就不赘述了，要用的时候去语法文档里把代码复制到编辑器中就可以了。比如我要在这里添加一个矩阵，就先在文档里找到代码，如图4，然后复制下来，放入 $ $ 的中间，变成 $\begin{bmatrix}a & b \\c & d\end{bmatrix}$ 。如果公式想居中，那么则放入$$ $$中间，变成$$\begin{bmatrix} a & b \\ c & d\end{bmatrix}$$。依旧是比较麻烦，还不如在office上编辑好了直接复制图片过来。
在这里插入图片描述

图4.画一个矩阵的代码公式产生效果：

$\begin{bmatrix} a & b \\ c & d\end{bmatrix}$

插入流程图

csdn_markdown用的mermaid的FLowchart来绘制流程图，在其官网上去找demo来修改比直接写要快得多。如下便是其提供的一个demo所画出的图，已经包含了画一个流程图所需要的基本部件，所以以后需要画流程图的时候，直接用这个demo改，可以很迅速的画出流程图。代码块中{ }中的内容才是代码，由于符号原因，才添加的大括号。

{```mermaid
flowchat
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
```}