Markdown编辑器使用说明-CSDN博客

文章仅用于技术分享，未经本人同意，禁止转载，且不得应用于商业模式

本文链接：https://blog.csdn.net/ximenjianxue/article/details/90710999

☛ 前言：关于Markdown编辑器的使用说明：

在这里插入图片描述
你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。Markdown 是一个 Web 上使用的文本到 HTML 的转换工具，可以通过简单、易读易写的文本格式生成结构化的 HTML 文档。

相关资源链接：Markdown 中文网、中文文档

一、新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

二、功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

三、合理的创建标题，有助于目录的生成

1）标题：

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持h1~h6共6级标题，对应的快捷键为ctrl+对应数字。有助于使用TOC语法后生成一个完美的目录。

2）页眉

- - -在第一行是页眉，在其他地方是分割线；
先按- - -或***,再回车，就会出现分割线效果，如下所示：

3）创建目录

[toc]，然后回车即可。

四、如何改变文本的样式

1）显示效果：强调文本 强调文本，可以用以下格式：

*强调文本* _强调文本_

2）显示效果：加粗文本 加粗文本，可以用以下格式：

**加粗文本** __加粗文本__

3）显示效果：标记文本，可以用以下格式：

==标记文本==

4）显示效果：~~删除文本~~，可以用以下格式：

~~删除文本~~

5）首行缩进2种方式：

1）把输入法由半角改为全角（搜狗：shift+空格）。两次空格之后就能够有两个汉字的缩进；
2）或者将下列字符粘贴到行前：------>分号一起粘贴；效果如下：

半方大的空白
全方大的空白
不断行的空白

以下为上述效果实现方式：（也可组合使用）

       半方大的空白------>&ensp;或&#8194;
       全方大的空白------>&emsp;或&#8195; 
       不断行的空白格------>&nbsp;或&#160;

6）显示效果：如下引用文本，可以用以下格式：

> 引用文本

7）显示效果：H₂O is是液体。可以用以下格式：

H~2~O is是液体。  //显示效果如下，注意是2个~

H₂O is是液体。

8）显示效果：2¹⁰ 运算结果是 1024.。可以用以下格式：2¹⁰ 运算结果是 1024.

2^10^ 运算结果是 1024

9）换行：

<br/>和</br>

10）上下标

使用此功能，在偏好设置–markdown扩展语法选项卡中启用它，然后启用~来跳过下标内容H₂o：

H~2~o

五、插入链接与图片

1）显示链接: link.可以用以下格式：

[link](https://mp.csdn.net “俊恩”)   //其中，[ ]里放关键词，（）放要链接的地址

2）插入图片操作：

直接粘贴进来后，默认是如下显示：

Alt

带尺寸的图片：要想实现需要在图片属性里插入：# =30x30

居中的图片显示需要在图片属性里插入：#pic_center)

Alt

居中并且带尺寸的图片属性里插入: #pic_center =30x30

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

3）插入动态图片，实际与插入普通图片一样，唯一不同的就是目标位gif动图，可借助screentogif工具来制作git图片；效果如下：

![动态图例](https://img-blog.csdnimg.cn/img_convert/0f22f5ffbbdd1cfe88ea7e47d8b14863.gif)

六、如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

七、生成一个适合你的列表

无序列表可在文字钱倩棉加+、-、*号，然后空格，三种符号任选一种。

1）显示如下效果，只需输入

项目
- 项目
  - 项目

- 项目
  - 项目
    - 项目

2）有序列表，数字后面加英文点号，然后空格就可以了，如下效果：

1. 项目1
2. 项目2
3. 项目3

3）可选/任务列表，想达到如下效果，只需输入：

计划任务
完成任务

- [ ] 计划任务
- [x] 完成任务

八、创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

8.1、设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

8.2、SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

九、创建一个自定义列表

:Text-to-HTML conversion tool

Authors
:  John
:  Luke

十、如何创建一个注脚

一个具有注脚的文本¹ 。

文本[^1] :注脚的解释

十一、注释也是必不可少的

Markdown将文本转换为 HTML。

*[HTML]:   超文本标记语言

十二、KaTeX数学公式

可以使用MathJax来渲染LaTeX数学表达式 KaTeX；Markdown源文件中，数学公式是由$$标记包装的LaTeX表达式。

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式，单击here.

eg：如下公式
$\mathbf(V)_1 \times \mathbf(V)_2= \begin{vmatrix} \mathbf(i) & \mathbf(j) & \mathbf(k) \\ \frac{\partial X} (\partial u) & \frac{partial Y} (\partial u) & 0 \\ \frac{\partial X} (\partial v) & \frac{partial Y} (\partial v) & 0 \\ \end{vmatrix}$

$$
\mathbf(V)_1  \times  \mathbf(V)_2= \begin{vmatrix}
\mathbf(i) & \mathbf(j) & \mathbf(k) \\
\frac{\partial X} (\partial u) & \frac{partial Y} (\partial u) & 0 \\
\frac{\partial X} (\partial v) & \frac{partial Y} (\partial v) & 0 \\
\end{vmatrix}
$$