最实用的Markdown教程

最近使用GitHub Pages搭建了自己的个人博客,特别好用。打算重拾写博客的习惯,发现大家都在用markdown语法,就研究研究,记下此篇。

一、什么是Markdown?

Markdown是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。说白了就是和Html语言一样,但是更加简化了。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档,更加简洁,更加符合人们的操作习惯。Markdown可以内嵌html语法

示例:Html的段落是<p/>,而Markdown就是一个或多个空行。html的标题<h1/>,而Markdown就是#

二、Markdown基本用法

从大家写文章的习惯讲起吧!

1、标题

标题要区分于普通段落。Markdown的标题使用#可以表示1-6级标题。=一级标题,-二级标题(任何数量的=-都可以有效果,最好三个及以上,比较直观)。
示例:

# 一级标题
## 二级标题
### 三级标题
一级标题
===========
二级标题
---------
注意:'#'和标题中间要有空格,'='或者'-'在文字底

效果:

2、段落和换行

一个Markdown段落的前后要有一个以上的空行。普通段落不该用空格或制表符来缩进。如果想在段前加缩进&emsp;是一个中文字符,&ensp;是半个中文字符&nbsp;是1/4中文字符。换行在需要换行后面至少有两个以上的空格+回车。

注:不同的Markdown解释器段落和换行实现也不同,但基本上都是空行决定段落,空格+回车决定换行。多个&emsp;&ensp;或者&nbsp;表示缩进。

3、文字

Markdown简化了Html,但是也丢失了一些字体的设置。注:使用其他字体的设置可以直接内嵌html语法
示例:

**加粗**
*斜体*
***斜体加粗***
~~删除线~~

效果:

加粗
斜体
斜体加粗
删除线

内嵌html语法支持字体颜色:
示例:

<font color=#FF0000 >红色</font>
<font color=#008000 >绿色</font>
<font color=#0000FF >蓝色</font>

效果:

红色
绿色
蓝色

4、引用

一个或多个>在引用文字前
示例:

>引用
>>引用
>>>引用

效果:

引用

引用

引用

5、分割线

三个或者三个以上的 - 或者 * 都可以。
示例:

---
横线分割线
***
星分割线

效果:


横线分割线


星分割线

6、超链接

示例:

[超链接名](超链接地址 "超链接title")
title可加可不加
[Winter的博客](https://imzdong.com)
[百度](https://www.baidu.com)

效果:

Winter的博客
百度

7、图片

超链接的加强版

![图片名称](图片地址)
![图片](/images/article/markdown/1.jpg)

效果:

8、列表

有序列表(数字+.

1. 我有一个梦想
2. 我有两个梦想
3. 我有三个梦想

效果:

  1. 我有一个梦想
  2. 我有两个梦想
  3. 我有三个梦想

无序列表(*+-)

* 使用【星号】标识无序列表
* 使用【星号】标识无序列表
* 使用【星号】标识无序列表
+ 使用【加号】标识无序列表
+ 使用【加号】标识无序列表
+ 使用【加号】标识无序列表
- 使用【减号】标识无序列表
- 使用【减号】标识无序列表
- 使用【减号】标识无序列表

效果:

  • 使用【星号】标识无序列表
  • 使用【星号】标识无序列表
  • 使用【星号】标识无序列表
  • 使用【加号】标识无序列表
  • 使用【加号】标识无序列表
  • 使用【加号】标识无序列表
  • 使用【减号】标识无序列表
  • 使用【减号】标识无序列表
  • 使用【减号】标识无序列表

注:有序列表和无序列表可以嵌套使用

9、表格

语法:

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容
第二行分割表头和内容。 - 有一个就行,为了对齐,多加了几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略

示例

第一格表头 | 第二格表头| 第三个表头
---------| :-------------:|-----:
内容单元格 第一列第一格 | 内容单元格第二列第一格(居中)|内容单元格第三列列第一格(居右)
内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格(居中)|内容单元格第三列列第二格(居右)
内容单元格 第一列第三格 多加文字 | 内容单元格第二列第三格(居中)|内容单元格第三列列第三格(居右)
内容单元格 第一列第四格 多加文字 | 内容单元格第二列第四格(居中)|内容单元格第三列列第四格(居右)

效果:

第一格表头 第二格表头 第三个表头
内容单元格 第一列第一格 内容单元格第二列第一格(居中) 内容单元格第三列列第一格(居右)
内容单元格 第一列第二格 多加文字 内容单元格第二列第二格(居中) 内容单元格第三列列第二格(居右)
内容单元格 第一列第三格 多加文字 内容单元格第二列第三格(居中) 内容单元格第三列列第三格(居右)
内容单元格 第一列第四格 多加文字 内容单元格第二列第四格(居中) 内容单元格第三列列第四格(居右)

10、代码

语法

单行代码:
‘代码内容’
代码块:
‘‘‘
代码块内容
‘‘‘

示例:

‘com.winter’

效果:

com.winter

package com.winter;
/**
 * Winter
 */
public class Code {
    public static void main(String[] args)throws Exception{
        System.out.println("HelloWorld");
    }
}

11、流程图

Markdown的流程图是各个编辑器支持的不同,大家需要看各个编辑器的支持文档。
我的博客使用的HexoHexo常用的流程图插件:

下面使用hexo-filter-mermaid-diagrams
示例:

‘‘‘mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
‘‘‘

效果:

graph TD; A-->B; A-->C; B-->D; C-->D;

12、注意

Markdown简化了用户的操作,所以复杂的、花里胡哨需要Markdown和内嵌的Html语句相结合(比如:字体颜色,字体大小等)。一些流程图、目录也需要借助于其他的插件或者编辑器。没有万能的简单的语法,大家相结合使用高效快速的完成博客文档的编辑。
祝大家好运!

本文作者:小小的泥巴
原文地址:https://www.cnblogs.com/imzdong/p/12419639.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

posted @ 2020-03-05 13:03  小小的泥巴  阅读(219)  评论(0编辑  收藏  举报