Markdown | 使用手册 | 自学笔记 | 如何便捷编辑出排版整洁的博文

Markdown 使用方法

前序

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。

由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,当前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如 CSND、GitHub、简书、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等,甚至还能被使用来撰写电子书。

在CSDN中也支持markdown的使用。如果想要快捷的编辑出排版整洁的博文,个人认为markdown是个不错的选择。

本文使用markdown编辑,将主要讲解 Markdown 的语法及使用方法。

Typora 官网:https://typora.io/

参考书籍:《了不起的Markdown》

一、标题

  1. 使用#号标记

    # 一级标题
    ## 二级标题
    ### 三级标题
    
  2. 使用=和-标记一级和二级标题

    这是一级标题
    ===
    
    这是二级标题
    ---
    

二、段落格式

1. 段落

  • 段落换行

    • 段落的换行是使用两个以上空格加回车

    • 当然也可以在段落后面使用一个空行来表示重新开始一个段落

  • 段落居中 | 左对齐 | 右对齐

    • 居中:
    <center>诶嘿</center> 
    
    • 左对齐:
    <p align="left">诶嘿</p>
    
    • 右对齐:
    <p align="right">诶嘿</p>
    

2. 字体

  • 斜体

    *斜体文本*
    _斜体文本_
    
  • 粗体

    **粗体文本**
    __粗体文本__
    
  • 粗斜体

    ***粗斜体文本***
    ___粗斜体文本___
    
  • 下划线

    下划线可以通过 HTML 的 <u> 标签来实现:

    <u>下划线</u>
    

3. 分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:

***   (最少使用三个及其以上的*)

* * * (插入空格)

- - -  (减号)

---------- (底线)

4. 删除线

如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可,

例如BAIDU.COM

~~BAIDU.COM~~

5. 脚注

脚注是对文本的补充说明。Markdown 脚注的格式如下:

[^要注明的文本]

以下实例演示了脚注的用法:

# 创建脚注格式类似这样 [^RUNOOB]:注释词

[^qzp]: qzp牛批 - - 这里称之为qzp广场 全体起立!

结果显示:

创建脚注格式类似于这样 1

三、列表

1. 常规列表

Markdown 支持有序列表和无序列表。

  • 无序列表

    使用星号(*)、加号(+)或是减号(-)作为列表标记:

```
 * 第一项
 * 第二项
 * 第三项
 
 + 第一项
 + 第二项
 + 第三项
 
 - 第一项
 - 第二项
 - 第三项
 ```
  • 有序表

使用数字并加上 . 号来表示,如:

1. 第一项
2. 第二项
3. 第三项

2. 列表嵌套

列表嵌套只需在子列表中的选项添加四个空格即可:

示例代码:

1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

效果展示:

1. 第一项:
   - 第一项嵌套的第一个元素
   - 第一项嵌套的第二个元素  
2. 第二项:
   - 第二项嵌套的第一个元素
   - 第二项嵌套的第二个元素

四、区块

1. 常规区块

Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号:

  • 示例代码:

    > 区块1引用
    > 区块2引用
    > 区块3引用
    
  • 效果展示:

    区块1引用

    区块2引用

    区块3引用

2. 区块嵌套

区块是的引用也是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推。
示例代码:

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

效果展示:

最外层

第一层嵌套

第二层嵌套

3. 区块中使用列表

区块中使用列表实例如下:
示例代码:

> 区块中使用列表
> 1. 第一项
> 2. 第二项
>     + 第一项
>     + 第二项
>     + 第三项

效果展示:

区块中使用列表

  1. 第一项
  2. 第二项
    • 第一项
    • 第二项
    • 第三项

4. 列表中使用区块

如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进。

区块中使用列表实例如下:

- 第一项
    > qzpnb
    > 全体起立哈哈哈
- 第二项

效果展示:

  • 第一项

    qzpnb
    全体起立哈哈

  • 第二项

五、代码

1. 函数|代码片段

​ 如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:
示例代码:

这里显示`printf()` 函数
这里显示printf()`函数`

效果展示:

​ 这里显示printf()函数

​ 这里显示printf()函数

2. 代码区块

  • 常用表示

你可以用 ` ````包裹一段代码,并指定一种语言(也可以不指定):

  • 代码展示

    ​```javascript
    $(document).ready(function () {
        alert('RUNOOB');
    });
    
  • 效果展示

    $(document).ready(function () {
        alert('RUNOOB');
    });
    
  • 其他表示
    代码区块使用 4 个空格或者一个制表符(Tab 键)
  • 代码展示

    	<?php
    	echo
    	function
    	echo
    	}  
    
  • 效果展示

    	echo
    	function
    	echo
    	} 
    

六、链接

1. 直接使用

直接引用链接地址的使用方法如下:

<链接地址>

2. 文本上链接

常规的文本上使用超链接的使用方法如下:

[链接名称](链接地址)
  • 示例代码:

    这是一个链接 [qzp的博客](https://quincyper.github.io)
    
  • 显示结果

    这是一个链接 qzp的博客

3. 高级链接

类似于使用脚注的方式进行链接。

我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:

[链接名称][脚注]

[脚注]:网址
  • 示例代码
  这个链接用 1 作为网址变量 [Google][1]
  这个链接用 quincyper 作为网址变量 [qzp的博客][quincyper]
  然后在文档的结尾为变量赋值(网址)
  
    [1]: http://www.google.com/
    [quincyper]: http://quincyper.github.io/  
      
  • 显示结果

    这个链接用 1 作为网址变量 Google
    这个链接用 quincyper 作为网址变量 qzp的博客
    然后在文档的结尾为变量赋值(网址)

七、图片

1. 常规使用

常规使用,Markdown 图片语法格式如下:

![alt 属性文本](图片地址)

![alt 属性文本](图片地址 "可选标题")
注:
- 开头一个感叹号 !
- 接着一个方括号,里面放上图片的替代文字
- 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字
  • 示例代码
  ![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)
  
  ![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")
  • 显示结果

    RUNOOB 图标

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HA8mLKl9-1585279130200)(http://static.runoob.com/images/runoob-logo.png “RUNOOB”)]

2. 链接网址使用

同样的也可以用类似于脚注的方式对图片网址使用变量。

 [文本文字][脚注].

[脚注]: 含有图片的网址
  • 示例代码
  这个链接用 1 作为网址变量 [RUNOOB][1].
  然后在文档的结尾为变量赋值(网址)
  
  [1]: http://static.runoob.com/images/runoob-logo.png
  • 显示结果

    这个链接用 2 作为网址变量 RUNOOB.
    然后在文档的结尾为变量赋值(网址)

Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 <img> 标签。
例如:
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">

八、表格

1.表格建立

Markdown 制作表格使用 |来分隔不同的单元格,使用 - 来分隔表头和其他行。

语法格式如下:

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

以上代码显示结果如下:

表头 表头
单元格 单元格
单元格 单元格

2.表格对齐方式

我们可以按照以下方式来设置表格的对齐方式:

-:  设置内容和标题栏居右对齐。
:-  设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
  • 示例代码
 | 左对齐 | 右对齐 | 居中对齐 |
 | :-----| ----: | :----: |
 | 单元格 | 单元格 | 单元格 |
 | 单元格 | 单元格 | 单元格 |
  • 显示结果
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

九、其他技巧

正在学习ing…

持续更新,敬请期待!

1. HTML元素

2. 转义

3. 公式

4. 流程图|时序图(顺序图)|甘特图

参考

Markdown 教程| 菜鸟教程 https://www.runoob.com/markdown/md-tutorial.html


  1. qzp牛批 - - 这里称之为qzp广场 全体起立! ↩︎

发布了4 篇原创文章 · 获赞 8 · 访问量 164

猜你喜欢

转载自blog.csdn.net/weixin_44607794/article/details/105137311