Markdown使用说明

大河qu

已于 2023-05-06 14:56:32 修改

阅读量630

点赞数

分类专栏：实用技巧文章标签： Markdown使用总结

于 2020-03-29 23:31:00 首次发布

本文链接：https://blog.csdn.net/quguanxin/article/details/91472239

版权

实用技巧专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简介

原本打算在CSDN-Markdown帮助文档的基础上，日积月累写自己的使用心得，毕竟要写好一篇博客，工具的使用还是很重要的，但是发布后总被以“无意义”为理由打回来（后来发现确实没意义啊，因为编辑界面的右上角有个帮助按）。无奈，只能大刀阔斧的自己来写一篇适合自身的使用说明书。Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown Markdown的教程可参考，也可主要参考HTML/CCS学习网站。

文字文本

Here主要包含，博客正文中文字的颜色控制、文本格式控制、上标下标控制等操作的实现方法。

文本颜色

为文本文字添加色彩，主要参考了这篇文章。具体的执行代码和效果如下。

//具体写法
$\color{#4285f4}{更}\color{#ea4335}{丰}\color{#fbbc05}{富}\color{#4285f4}{的}\color{#34a853}{颜}\color{#ea4335}{色}$

效果: $\color{#4285f4}{更}\color{#ea4335}{丰}\color{#fbbc05}{富}\color{#4285f4}{的}\color{#34a853}{颜}\color{#ea4335}{色}$

改变文本的样式

强调文本 强调文本 斜体文本

加粗文本 加粗文本 标记文本 ~~删除文本~~

引用文本

上标和下标

//方案1
H~2~O  is是液体
2^10^ 运算结果是 1024
//方案2 兼容HTML的语法
CO<sub>2</sub> 二氧化碳
 A<sup>n</sup> 字符串集合大阿尔法的n次幂

执行结果如下： H₂O is是液体。2¹⁰ 运算结果是 1024.
执行结果如下：CO₂ 二氧化碳。 Aⁿ 字符串集合大阿尔法的n次幂。

图片样式控制

原始图片: Alt

改变图片大小

带尺寸的图片:
带尺寸的图片: 在原有连接基础上，加上 # =30x30，高x宽（注意#与=之间有一个空格）
居中的图片: 在原始连接上加 #pic_center
居中并且带尺寸的图片:在原始连接上加 #pic_center =30x30 但是这里必须要注意：
注意"#pic_center"必须仅跟着图片url名词，不能有空格，否则不生效
注意"#pic_center"与其后的"=30x30 "，必须要加上空格，否则不生效
Alt

![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center =50x50)

gif 图片

请添加图片描述

//注意"#pic_center"必须仅跟着图片url名词，不能有空格，否则不生效
//注意"#pic_center"与其后的"=200x280"，必须要加上空格，否则不生效
![请添加图片描述](https://img-blog.csdnimg.cn/c74b72bb6f1544658130bd9d6a80a00e.gif#pic_center =200x280)

缩放图片

在实际测试中，上述改变图片大小的方法并不生效。找到了一种别的方法，举例：

<img src="https://i-blog.csdnimg.cn/blog_migrate/1a1c5335bed84678e4ae716cbd5b937e.jpeg"  width="50%"/>

这是一幅被缩小了一半的图片，其中src后边是原图片的生成地址，其余的文字是为了改变图片尺寸而增加的。

表格

发现了两种创建表格的方法，具体描述如下。

创建一个表格

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

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

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

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

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

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

单元格内换行

在单元格内进行换行的方法是使用下边的符号，可以参考Markdown表格内换行相关讲解。

<br>

HTML格式的表格

使用HTML方法，创建一个MarkDown表格，可以参考这篇文档，其中主要描述了单元格合并的相关语法，至于更加详细的相关语法，可参考HTML/CCS学习文档。

<table>
    <tr>
        <td bgcolor=#FF69B4>第一列</td> 
        <td>第二列</td>
        <td>第三列</td> 
   </tr>
    <tr>
        <td colspan="2" bgcolor=#7B68EE>合并第1，2列</td>
        <td>第2行，第3列</td>  
    </tr>
    <tr>
        <td colspan="2" bgcolor=#ADFF2F>合并第1，2列</td>
        <td>第3行，第3列</td>    
    </tr>
</table>

第一列	第二列	第三列
合并第1，2列		第2行，第3列
合并第1，2列		第3行，第3列

表格文字的align设置

COMM接口	DSERVER接口
合并第1，2列	第2行，第3列

跨行或跨列的表格

<html> <!-- Markdown中可不写 -->
<body> <!-- Markdown中可不写 -->
<h4>横跨两列的单元格：</h4>  <!-- html标题 -->
<table border="1">
<tr>  <!-- 定义表格中的行 -->
  <th>姓名</th> <!-- 定义表格的表头 -->
  <th colspan="2">电话</th> <!-- 使用方法https://www.w3school.com.cn/tags/tag_th.asp -->
</tr>
<tr>  <!-- 定义表格中的行 -->
  <td>Bill Gates</td>  <!-- 定义表格中的单元 -->
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>  <!-- html标题 -->
<table border="1">
<tr>
  <th>姓名</th> <!-- 使用方法https://www.w3school.com.cn/tags/tag_th.asp -->
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
</body>  <!-- Markdown中可不写 -->
</html>  <!-- Markdown中可不写 -->

横跨两列的单元格：

姓名	电话
Bill Gates	555 77 854	555 77 855

横跨两行的单元格：

姓名	Bill Gates
电话	555 77 854
电话	555 77 855

th等标签的使用方法可以参照 W3School中的相关讲解，还可以在线运行查看实例效果。表格行或列的合并，需要用到align和valign属性，有的浏览器中它们都是默认居中的-如这里的Markdown，但有的不是-如Qt中浏览器，此时就需要显性配置出来…

插入漂亮的代码片

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

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

<后记>
CSDN代码段高亮。反引号的输入(在英文输入状态下，按波浪线按钮，不需要组合键)。
高亮目前支持代码类型: markup、html、svg、xml、c、clike、cpp、csharp、java、vbnet、go、ruby/rb、python/py、php、sql、perl、objectivec、swift、javascript/js、css、handlebars、bash、kotlin

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

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

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

在markdown中输入数学公式使用LaTeX，其基本规则和常用表达式，可参考，更复杂的可参考。如输入一个开方运算，直到十七世纪，法国数学家笛卡尔（1596～1650年）第一个使用了现今用的根号“√￣”，下边是 $\sqrt[4]{n}$ ，对n开4次方在Markdown中的写法：

$\sqrt[4]{n}$

复杂图表绘制

尽管Markdow支持甘特图、UML图表、FLowchart流程图等绘制，但是对于一个非专业的来，还是挺复杂的，感兴趣的可以从CSDN初始化帮助文档中查的其使用方法。个人建议，对于这种相对专业化的图表还是去使用专业的工具绘制吧，那样更规范、也更节省时间，到时候截一张图近来即可。如，流程图就使用VISIO绘制即可、UML图可以使用强大的EA工具进行绘制，甘特图也有相应的Project等工具绘制。

导出与导入

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

离线编辑

MarkdownPad 2下载与安装

MarkdownPad2添加表格，另外，上一节提到的语法也被支持。

简单且详细的语法及使用介绍-参1

再深入的统一语法可以参见HTML/CSS，CSDN原帮助文档也是很丰富的，如注释、注脚、列表等功能。

VSCode-Markdown

使用VSCode作为离线编辑器，Markdowd插件离线安装方法。理论上，vscode 在没有安装任何插件的情况下是可以直接编写markdown文档的，在vscode工作区中新建一个以.md为后缀的文档，即可创建一个markdown文档。但为了能够得到一些更加丰富的功能和有好多体验，可以通过增添新的插件对其功能进行完善，如Markdown Preview Enhanced 预览插件（实际测试这个预览比默认的预览更接近浏览器显示的样子）。这是MPE(Markdown Preview Enhanced)附带的基本使用说明。
需要安装的插件有大约有：Markdown Preview Enhanced、markdown-all-in-one、markdown toc、markdown+math、markdown pdf 等。
markdown toc 允许使用 [TOC] 生成目录？