编辑排版神器---Markdown初级教学指南

最新推荐文章于 2024-05-17 03:40:01 发布

进击的蜗牛er

最新推荐文章于 2024-05-17 03:40:01 发布

阅读量1.2k

点赞数 1

分类专栏： Markdown语法指南文章标签： Markdown HTML 编辑神器

本文链接：https://blog.csdn.net/qq_20334947/article/details/83720783

版权

Markdown语法指南专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

写在前面的话

最近看了一下Markdown，然后就对它产生了浓厚的兴趣，尤其是排版的时候，可以让你快速由一些指令生成相应的格式，提高成吨的编辑博客的效率有木有！它是一种可以使用普通文本编辑器编写的轻量级的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，下面就跟我一起学习一下吧。

设置标题

# 这是一级标题
## 这是二级标题
### 这是三级标题
......
注：最多支持六级标题

书写格式：# + 空格

效果展示：
演示效果

字体文本格式

字体加粗可以使用：  **加粗样式** ----  快捷键：Control/Commad + B
字体斜体可以使用：  *斜体样式*    ----  快捷键： Control/Command + I
标记文本或字体可使用： ==标记文本==
删除文本可以使用：    ~~要删除的文本~~

字体加粗可以使用： 加粗样式
字体斜体可以使用： 斜体样式
标记文本或字体可使用：标记文本
删除文本可以使用： ~~要删除的文本~~

无序和有序列表

无序列表：
快捷键： Ctrl/Command + Shift + U
* + 空格键 产生无序列表的点
无序列表可以嵌套，其二级无序列表的写法为 ：Tab + * + 空格
有序列表：
快捷键： Ctrl/Command + Shift + O

无序列表效果：

* + 空格键 产生无序列表
项目一
项目二
- 项目二的子项目，产生此效果使用：Tab + * + 空格

插入图片

有时候我们需要插入一些图片，设置图片的大小和位置等，我们用如下操作。
快捷键：Control+ Shift + I — (CSDN的Markdown编辑器不支持这个快捷键操作)
CSDN的Markdown插入图片快捷键：Ctrl/Command + Shift + G

格式：![图片的描述](url)
如果想调整图片的宽度，则在图片的描述后加` -w+图片宽度`即可，要设置对齐，则可以如下设置:左对齐为`-l140`，居中为`-c140`，右对齐为`-r140`即可。
示例：
![图片描述](https://i-blog.csdnimg.cn/blog_migrate/ebd3177bf5c895ad10c1734cf6fd7619.gif)

图片描述

链接

平时我们可能会写到一些网址的链接，包括E-Mail等，可以用如下形式来写：
CSDN插入链接快捷键：Ctrl/Command + Shift + L

示例：
email <example@example.com>
[GitHub](http://github.com)
自动生成链接 <http://www.github.com/>

效果：
email example@example.com
GitHub官方主页
自动生成链接 http://www.github.com/

区块引用

用">"来表示，可以用来进行代码的注释，支持嵌套格式。
示例：
>第一行引用
>第二行引用
>>第二级引用
>>>第三级引用
结束的话需要多敲一行空格

效果:

第一行引用
第二行引用

第二级引用

第三级引用

多行代码

快捷键：Control/Command + Shift + K，在```后面写上所需要高亮的编程语言即可。
如：```+c，```+javascript

C代码效果：

#include<stdio.h>

int main()
{
    /*Code Here*/
    printf("Hello World！/n");
}

JavaScript代码效果：

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("数字是 " + i)
document.write("<br />")
}
</script>

<p>解释：当 i=3 时，会中断循环，并从下一个值开始继续循环。</p>

</body>
</html>

表格

表格也是经常用的一种格式，书写形式如下：

第一格表头 | 第二格表头
--------- | -------------
内容单元格 第一列第一格 | 内容单元格第二列第一格
内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格

效果：

第一格表头	第二格表头
内容单元格第一列第一格	内容单元格第二列第一格
内容单元格第一列第二格多加文字	内容单元格第二列第二格

分割线

以下三种格式均可生成分割线：
***
*****
- - -
同样的，结束需要多加一行空格才行。

效果：

TOC操作

[TOC]可以生成目录，即生成标题的操作。
示例：
@[toc]

效果

文章目录

绘图相关操作

mermaid

mermaid 是比较流行的画图库，它支持流程图、顺序图和甘特图，它的官网为：https://mermaidjs.github.io/ ，mermaid 的语法就是声明代码块的语言为 mermaid，代码块中再写上 mermaid 的画图语法即可。
 ```mermaid
 sequenceDiagram
     participant A
     participant B
     A->>B: Hello John, Do you have Mifan?
     loop Healthcheck
         C->>C: Fight against Cancer!
     end
     Note right of C: Rational thoughts <br/>prevail...
     B-->>A: Great!
     C->>B: How about you?
     B-->>C: Jolly good!
    ```
    甘特图：
    ```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d
    ```

效果：

甘特图效果：

Graphviz

Graphviz 是开源的画图软件，它的官网为 http://www.graphviz.org/。
以下代码可以复制到CSDN的Markdown编辑器中使用，在尝试时可以把 dot 换成 circo, fdp, neato, osage, twopi 这几种来尝试效果。
    ```dot
digraph G {

    subgraph cluster_0 {
        style=filled;
        color=lightgrey;
        node [style=filled,color=white];
        a0 -> a1 -> a2 -> a3;
        label = "process #1";
    }

    subgraph cluster_1 {
        node [style=filled];
        b0 -> b1 -> b2 -> b3;
        label = "process #2";
        color=blue
    }
    start -> a0;
    start -> b0;
    a1 -> b3;
    b2 -> a3;
    a3 -> a0;
    a3 -> end;
    b3 -> end;

    start [shape=Mdiamond];
    end [shape=Msquare];
} 
    ```
注：(CSDN不支持这种画图方式~~)

echarts

echarts 是百度出口的 js 画图库，它的网址为：http://echarts.baidu.com/index.html，功能非常强大，Mweb支持 echarts 的一些基本的用法，太高级的不支持。你可以去 http://echarts.baidu.com/examples/index.html 这个网址查看一些例子，要注意的是 CSDN只能解析 option = {} 这种简单的，不过应该是足够使用了。(CSDN不支持)

###顺序图和流程图

顺序图和流程图是使用 http://bramp.github.io/js-sequence-diagrams/, http://adrai.github.io/flowchart.js/ 这两个画图库，以下是它在CSDN 中的 Markdown 语法。
	```mermaid
      sequenceDiagram
      张三->>李四: 嘿，小四儿, 写博客了没?
      Note right of 李四: 李四愣了一下，说： 
       李四-->>张三: 忙得吐血，哪有时间写。
       ```
       ```mermaid
     flowchat
  	 st=>start: 开始
   	 e=>end: 结束
    op=>operation: 我的操作
    cond=>condition: 确认？
    st->op->cond
    cond(yes)->e
    cond(no)->op
     ```

顺序图效果：

流程图效果：

脚注

脚注用法如下：
这是一个脚注：[^sample_footnote]

[^sample_footnote]: 这里是脚注信息

这是一个脚注：¹

这里是脚注信息 ↩︎

进击的蜗牛er

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
编辑排版神器---Markdown初级教学指南

编辑排版神器—Markdown初级教学指南文章目录编辑排版神器---Markdown初级教学指南写在前面的话设置标题字体文本格式无序和有序列表插入图片链接区块引用多行代码表格分割线TOC操作绘图相关操作mermaidGraphvizecharts脚注写在前面的话最近看了一下Markdown，然后就对它产生了浓厚的兴趣，尤其是排版的时候，可以让你快速由一些指令生成相应的格式，提高成吨的编辑博客...
复制链接

扫一扫